:root{
  --ink:#12161c;
  --panel:#1c232c;
  --line:#2f3a46;
  --amber:#ffb020;
  --amber-dim:#8a5f16;
  --led:#7dff9b;
  --bad:#ff5a4d;
  --paper:#e8e4d9;
  --blue:#4aa8e0;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden;background:var(--ink);
  font-family:"IBM Plex Mono",ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
  color:var(--paper);-webkit-user-select:none;user-select:none;touch-action:none}
canvas{display:block;position:fixed;inset:0;filter:contrast(1.09) saturate(1.10) brightness(.98)}

/* ---------- Vollbild-Overlays ---------- */
#hud{position:fixed;inset:0;pointer-events:none;z-index:4}
#grade{position:fixed;inset:0;pointer-events:none;z-index:2;
  background:radial-gradient(ellipse at 50% 48%,rgba(0,0,0,0) 34%,rgba(4,7,10,.62) 100%)}
#grain{position:fixed;inset:0;pointer-events:none;z-index:3;opacity:.07;
  mix-blend-mode:overlay;background-repeat:repeat}
#kopfweh{position:fixed;inset:0;pointer-events:none;z-index:3;opacity:0;
  background:radial-gradient(ellipse at 50% 50%,rgba(0,0,0,0) 40%,rgba(200,30,20,.55) 100%)}
#fade{position:fixed;inset:0;pointer-events:none;z-index:8;opacity:0;background:#000;
  transition:opacity .4s;display:flex;align-items:center;justify-content:center;
  font-size:20px;color:#93a1b0;letter-spacing:.1em}

.plate{background:linear-gradient(180deg,#232c36,#171d24);border:1px solid var(--line);
  border-radius:2px;box-shadow:0 2px 0 #0c1016,inset 0 1px 0 #33404e}
#status{position:absolute;top:14px;left:14px;padding:10px 14px;min-width:230px}
.row{display:flex;justify-content:space-between;align-items:baseline;gap:18px}
.lbl{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:#7d8b9a}
.val{font-size:24px;font-weight:700;color:var(--amber);font-variant-numeric:tabular-nums}
.val.small{font-size:15px;color:var(--paper)}
#rightcol{position:absolute;top:14px;right:14px;display:flex;flex-direction:column;
  align-items:flex-end;gap:8px;max-width:320px}
#round{padding:10px 14px;text-align:right}
#round .val.boss{color:var(--bad)}

/* Bedürfnis-Balken */
.needbar{display:flex;align-items:center;gap:8px;margin-top:8px}
.nlbl{font-size:10px;letter-spacing:.06em;color:#93a1b0;width:86px;white-space:nowrap}
.ntrack{flex:1;height:7px;background:#0e1319;border-radius:3px;overflow:hidden}
.nfill{height:100%;width:100%;background:var(--amber);border-radius:3px}
.nfill.blue{background:var(--blue)}
.nfill.warn{background:var(--bad);animation:blink 0.7s infinite}
@keyframes blink{50%{opacity:.4}}

/* Aufgabenpanel */
#tasks{position:absolute;top:150px;left:14px;padding:9px 12px;width:250px;display:none}
#tasks.on{display:block}
#tasks .lbl{margin-bottom:4px}
.task{display:flex;justify-content:space-between;align-items:baseline;gap:8px;
  font-size:12px;line-height:1.45;padding:4px 0;border-top:1px solid #232c36}
.task:first-of-type{border-top:0}
.task .ttxt{flex:1}
.task .ttime{color:#7d8b9a;font-variant-numeric:tabular-nums;white-space:nowrap}
.task.urgent .ttxt,.task.urgent .ttime{color:var(--bad)}
.task.urgent{animation:blink 0.8s infinite}
.task.calm .ttxt{color:#7d8b9a}
@media (max-width:700px){#tasks{width:190px;top:140px}.task{font-size:11px}}

/* Multiplayer-Scoreboard */
#scorebrd{padding:8px 14px;min-width:170px;display:none;text-align:left}
#scorebrd.on{display:block}
#scorebrd .srow{display:flex;justify-content:space-between;gap:14px;font-size:12px;line-height:1.9}
#scorebrd .srow.you{color:var(--amber)}
#scorebrd .srow b{font-variant-numeric:tabular-nums}

/* Auftrag + Ereignisbanner */
#order{position:absolute;top:96px;left:50%;transform:translateX(-50%);
  padding:9px 16px;text-align:center;opacity:0;transition:opacity .25s}
#order.on{opacity:1}
#order .who{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#7d8b9a}
#order .what{font-size:17px;color:var(--paper);margin-top:2px}
#order b{color:var(--amber)}
#bar{height:4px;background:#0e1319;margin-top:9px;border-radius:2px;overflow:hidden}
#barfill{height:100%;width:100%;background:var(--amber);transition:background .2s}

/* Boss-HP */
#bossbar{position:absolute;top:14px;left:50%;transform:translateX(-50%);
  padding:9px 18px;min-width:min(560px,86vw);text-align:center;display:none;border-color:#7a2a22}
#bossbar.on{display:block}
#bossbar .who{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--bad)}
#bosstrack{height:10px;background:#0e1319;margin-top:7px;border-radius:3px;overflow:hidden;
  border:1px solid #442}
#bossFill{height:100%;width:100%;background:linear-gradient(90deg,#ff5a4d,#ffb020)}
#bossbar .what{font-size:15px;margin-top:6px}

/* Kompass, Fadenkreuz, Toast */
#compass{position:absolute;top:50%;left:50%;width:150px;height:150px;margin:-75px 0 0 -75px;opacity:0;transition:opacity .3s}
#compass.on{opacity:.9}
#compass svg{width:100%;height:100%;display:block}
#cross{position:absolute;top:50%;left:50%;width:22px;height:22px;margin:-11px 0 0 -11px}
#cross i{position:absolute;background:#e8e4d9;opacity:.75;transition:background .1s}
#cross i:nth-child(1){left:0;top:10px;width:7px;height:2px}
#cross i:nth-child(2){right:0;top:10px;width:7px;height:2px}
#cross i:nth-child(3){top:0;left:10px;width:2px;height:7px}
#cross i:nth-child(4){bottom:0;left:10px;width:2px;height:7px}
#cross.hot i{background:var(--amber);opacity:1}
#toast{position:absolute;bottom:22%;left:50%;transform:translateX(-50%) scale(.9);
  font-size:26px;font-weight:700;letter-spacing:.04em;opacity:0;transition:all .18s;
  text-align:center;text-shadow:0 2px 8px rgba(0,0,0,.7)}
#toast.on{opacity:1;transform:translateX(-50%) scale(1)}

/* Interaktions-Prompt */
#prompt{position:absolute;bottom:15%;left:50%;transform:translateX(-50%);
  font-size:15px;color:var(--paper);opacity:0;transition:opacity .15s;
  background:rgba(20,26,33,.85);border:1px solid var(--line);border-radius:3px;padding:8px 14px}
#prompt.on{opacity:1}

#pause{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);padding:16px 26px;
  font-size:14px;letter-spacing:.1em;text-transform:uppercase;color:var(--amber);display:none}
#pause.on{display:block}
#hint{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);
  font-size:12px;color:#93a1b0;letter-spacing:.06em;text-align:center;line-height:1.6}
kbd{background:#242e39;border:1px solid var(--line);border-bottom-width:2px;border-radius:3px;
  padding:1px 6px;font:inherit;font-size:11px;color:var(--paper)}

/* ---------- Start-/Lobby-/Endscreen ---------- */
#screen{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(120% 90% at 50% 0%,#243040 0%,#0d1116 70%);z-index:10;padding:24px;
  overflow-y:auto}
#screen.hide{display:none}
.card{max-width:600px;width:100%;text-align:left}
.eyebrow{font-size:11px;letter-spacing:.34em;text-transform:uppercase;color:var(--amber-dim)}
h1{font-size:clamp(30px,7vw,52px);line-height:.98;letter-spacing:-.02em;margin:10px 0 6px;
   font-weight:800;color:var(--paper)}
h1 span{color:var(--amber);display:block}
.lead{color:#a9b6c3;font-size:14px;line-height:1.7;margin:14px 0 20px;max-width:52ch}
.card ul{list-style:none;font-size:13px;color:#a9b6c3;line-height:2}
.card ul b{color:var(--paper)}
button{pointer-events:auto;margin-top:18px;background:var(--amber);color:#171008;border:0;
  padding:14px 26px;font:inherit;font-weight:700;font-size:15px;letter-spacing:.06em;
  text-transform:uppercase;border-radius:2px;cursor:pointer;box-shadow:0 3px 0 #a06a0e}
button:active{transform:translateY(2px);box-shadow:0 1px 0 #a06a0e}
button:focus-visible{outline:3px solid #fff;outline-offset:3px}
button.ghost{background:#242e39;color:var(--paper);box-shadow:0 3px 0 #10151b}
button.ghost:active{box-shadow:0 1px 0 #10151b}
button:disabled{opacity:.45;cursor:default;transform:none}
input[type=text]{pointer-events:auto;background:#0e1319;border:1px solid var(--line);
  color:var(--paper);font:inherit;font-size:16px;padding:12px 14px;border-radius:2px;
  width:100%;margin-top:8px;letter-spacing:.05em}
input[type=text]:focus{outline:2px solid var(--amber);border-color:var(--amber)}
input.code{text-transform:uppercase;letter-spacing:.4em;width:9.5em;text-align:center}
.btnrow{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end}
.lobbylist{margin:16px 0;font-size:15px;line-height:2.1}
.lobbylist .host::after{content:" · Chef vom Dienst";color:var(--amber-dim);font-size:11px}
.codebig{font-size:42px;font-weight:800;letter-spacing:.3em;color:var(--amber);margin:6px 0}
.error{color:var(--bad);font-size:13px;margin-top:10px;min-height:18px}
.standings{margin:14px 0;font-size:16px;line-height:2.2}
.standings .srow{display:flex;justify-content:space-between;max-width:340px;border-bottom:1px dashed #2f3a46}
.standings .srow.first{color:var(--amber);font-weight:700}
.statgrid{display:grid;grid-template-columns:auto auto;gap:2px 24px;font-size:13px;color:#a9b6c3;margin:12px 0}
.statgrid b{color:var(--paper)}

/* ---------- Touch ---------- */
#touch{position:fixed;inset:0;z-index:5;display:none;pointer-events:none}
#touch.on{display:block}
#stick{position:absolute;left:26px;bottom:26px;width:126px;height:126px;border-radius:50%;
  border:1px solid var(--line);background:rgba(28,35,44,.5);pointer-events:auto}
#knob{position:absolute;left:41px;top:41px;width:44px;height:44px;border-radius:50%;background:#5b6b7c}
#push{position:absolute;right:26px;bottom:30px;width:112px;height:112px;border-radius:50%;
  background:rgba(255,176,32,.16);border:2px solid var(--amber);color:var(--amber);
  display:flex;align-items:center;justify-content:center;font-size:12px;letter-spacing:.12em;
  pointer-events:auto;font-weight:700}
#push.down{background:rgba(255,176,32,.42)}
#useBtn{position:absolute;right:156px;bottom:52px;width:68px;height:68px;border-radius:50%;
  background:rgba(125,255,155,.14);border:2px solid var(--led);color:var(--led);
  display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:700;
  pointer-events:auto}
#useBtn.down{background:rgba(125,255,155,.4)}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}