*{margin:0;padding:0;box-sizing:border-box}
/* Eigene Kette statt der Variablen aus fonts.css: laeuft auch, wenn die Plattform-CSS fehlt.
   Poppins fuer UI (Arcade-System), JetBrains Mono nur fuer Zahlen. */
:root{--sans:'Poppins','Avenir Next',sans-serif;--mono:'JetBrains Mono','Courier New',monospace;
  --bg:#0a0713;--fg:#efe6ff;--dim:#9a8cb8;--acc:#c48cff;--acc2:#ffd36a;--rot:#ff4d3a;
  --panel:rgba(12,8,22,.93);--chip:rgba(255,255,255,.06);--rand:rgba(196,140,255,.35);--shadow:rgba(0,0,0,.55)}
html,body{height:100%}
body{background:var(--bg);color:var(--fg);overflow:hidden;font-family:var(--sans);user-select:none;-webkit-user-select:none;touch-action:none}
video#cam{position:fixed;inset:0;width:100vw;height:100vh;object-fit:cover;transform:scaleX(-1);display:none;z-index:0;background:#000}
body.cam video#cam{display:block}
canvas#game{position:fixed;inset:0;display:block;width:100vw;height:100vh;z-index:1}

/* Spiel-Orb, direkt neben dem Arcade-Orb des SDK (Zwei-Orb-Doktrin) */
#orb{position:fixed;left:70px;top:12px;width:42px;height:42px;border-radius:50%;background:var(--panel);border:2px solid var(--acc);color:var(--acc);
  display:flex;align-items:center;justify-content:center;font-size:20px;cursor:pointer;z-index:60;box-shadow:0 2px 14px var(--shadow);transition:transform .18s}
#orb:hover{transform:scale(1.08)}
#orbmenu{position:fixed;left:70px;top:62px;background:var(--panel);border:1px solid var(--acc);border-radius:12px;padding:8px;z-index:60;display:none;min-width:190px;box-shadow:0 6px 24px var(--shadow)}
#orbmenu.open{display:block}
#orbmenu button{display:block;width:100%;text-align:left;background:none;border:0;color:var(--fg);font-family:var(--sans);font-size:14px;padding:9px 12px;border-radius:8px;cursor:pointer}
#orbmenu button:hover,#orbmenu button.fokus{background:var(--chip)}

/* HUD oben rechts */
#hud{position:fixed;right:64px;top:12px;text-align:right;z-index:50;line-height:1.3;pointer-events:none;min-width:170px}
#hud .lab{font-size:11px;letter-spacing:.12em;color:var(--dim);text-transform:uppercase}
#hud .val{font-family:var(--mono);font-size:24px;font-weight:700;color:var(--acc2)}
#hud .bar{height:9px;border-radius:5px;background:rgba(255,255,255,.1);overflow:hidden;margin:3px 0 6px;border:1px solid rgba(255,255,255,.15)}
#hud .bar i{display:block;height:100%;width:100%;background:linear-gradient(90deg,#7dffb0,#ffd36a 60%,#ff4d3a);transition:width .12s}
#hud .zau{font-size:14px;color:var(--fg)}
#hud .sterne{font-size:12px;color:var(--acc2);letter-spacing:.08em}
#hud .mono{font-family:var(--mono)}

/* Statuschips unten links (Kamera, Mikro) */
#status{position:fixed;left:14px;bottom:12px;z-index:50;display:flex;gap:6px;flex-wrap:wrap;pointer-events:none;max-width:60vw}
#status span{font-size:11px;padding:4px 9px;border-radius:999px;background:var(--panel);border:1px solid var(--rand);color:var(--dim)}
#status span.an{color:#7dffb0;border-color:rgba(125,255,176,.5)}
#status span.warn{color:var(--acc2)}
/* Pegelbalken im Mikro-Chip: 5 Striche, leuchten mit dem Pegel (nur sichtbar bei offenem Tonstrom) */
#status span .peg{display:none;gap:2px;margin-right:7px;vertical-align:-1px}
#status span.hoert .peg{display:inline-flex}
#status span .peg b{display:block;width:3px;height:9px;border-radius:1px;background:rgba(255,255,255,.14)}
#status span .peg b.an{background:#7dffb0;box-shadow:0 0 4px rgba(125,255,176,.8)}
#status span.warn .peg b.an{background:var(--acc2)}
#status span em{font-style:normal}

/* Ladebalken */
#lade{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);z-index:80;background:var(--panel);border:1px solid var(--acc);border-radius:14px;padding:16px 22px;min-width:280px;display:none;text-align:center}
#lade.open{display:block}
#lade .bar{height:8px;border-radius:4px;background:rgba(255,255,255,.1);margin-top:10px;overflow:hidden}
#lade .bar i{display:block;height:100%;width:0;background:var(--acc);transition:width .15s}
#lade .t{font-size:13px;color:var(--dim)}

/* Tippfeld fuer den Spruch ohne Mikro */
#tipp{position:fixed;left:50%;bottom:120px;transform:translateX(-50%);z-index:65;display:none;gap:8px;background:var(--panel);border:1px solid var(--acc);border-radius:12px;padding:10px}
#tipp.open{display:flex}
#tipp input{font-family:var(--sans);font-size:16px;padding:8px 12px;border-radius:8px;border:1px solid var(--rand);background:#150e22;color:var(--fg);width:260px;outline:none}
#tipp button{font-family:var(--sans);font-size:14px;padding:8px 14px;border-radius:8px;border:0;background:var(--acc);color:#120a20;cursor:pointer}

/* Overlays */
.ov{position:fixed;inset:0;background:var(--panel);z-index:70;display:none;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:24px;overflow:auto}
.ov.open{display:flex}
.ov .klein{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim);margin-bottom:8px}
.ov h1{font-size:clamp(26px,6vw,52px);letter-spacing:.01em;margin-bottom:10px;line-height:1.1;
  background:linear-gradient(92deg,var(--acc),var(--acc2));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.ov h2{font-size:clamp(22px,4.5vw,36px);margin-bottom:10px;color:var(--acc2)}
.ov p{color:var(--dim);max-width:36em;margin-bottom:8px;font-size:15px;line-height:1.55}
.ov .big{font-family:var(--mono);font-size:44px;color:var(--acc2);margin:8px 0}
.ov .reihe{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:14px}
.ov button,.ov .fx{background:var(--acc);color:#120a20;border:0;border-radius:12px;padding:12px 26px;font-size:16px;font-family:var(--sans);font-weight:600;cursor:pointer;outline:none}
.ov button.zweit{background:var(--chip);color:var(--fg);border:1px solid var(--rand)}
.ov button.fokus,#buch .fx.fokus{box-shadow:0 0 0 3px #fff,0 0 18px var(--acc2)}
.ov .unter{font-size:clamp(14px,2.2vw,20px);letter-spacing:.08em;color:var(--acc2);margin:-2px 0 14px;font-weight:500}
.ov .keys{margin-top:16px;font-family:var(--mono);font-size:12px;color:var(--dim);line-height:1.7;max-width:40em}

/* Zauberbuch */
#buch{display:flex;flex-direction:column;align-items:center;max-height:calc(100vh - 48px)}
#buch .seite{background:linear-gradient(180deg,#f3e7c9,#e2d1a8);color:#2b1d10;border-radius:6px 18px 18px 6px;padding:22px 26px 18px 30px;max-width:560px;width:92vw;
  box-shadow:inset 14px 0 24px rgba(0,0,0,.18),0 20px 50px rgba(0,0,0,.6);text-align:left;position:relative;
  display:flex;flex-direction:column;min-height:0;max-height:calc(100vh - 90px)}
/* Der Inhalt scrollt, die Knoepfe darunter bleiben stehen (auch bei 1280x700) */
#buch .inhalt{overflow-y:auto;min-height:0;flex:1 1 auto;padding-right:8px;scrollbar-width:thin;scrollbar-color:#8a6a42 transparent}
#buch .inhalt::-webkit-scrollbar{width:6px}
#buch .inhalt::-webkit-scrollbar-thumb{background:#8a6a42;border-radius:3px}
#buch ol.anl{margin:6px 0 0 20px;font-size:13.5px;line-height:1.45;color:#2b1d10}
#buch ol.anl li{margin-bottom:5px;padding-left:3px}
#buch ol.anl li.sprich{color:#4a1e8a}
#buch ol.anl li.ende{color:#8a2b1b}
#buch .grund .intro{font-size:13.5px;line-height:1.5;color:#2b1d10;margin-top:8px}
#buch .grund .eintrag{display:flex;gap:10px;align-items:center;margin-top:6px;font-size:13px;line-height:1.4;color:#2b1d10}
#buch .grund .eintrag canvas{flex:0 0 auto;width:44px;height:44px}
#buch .grund .eintrag b{display:block;font-size:13px;color:#3a2210}
#buch ol.regeln{margin:6px 0 0 20px;font-size:13px;line-height:1.45;color:#2b1d10}
#buch ol.regeln li{margin-bottom:4px;padding-left:3px}
#buch .seite:before{content:'';position:absolute;left:0;top:0;bottom:0;width:10px;background:linear-gradient(90deg,#5a3b1c,#a07a45)}
#buch .kopf{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
#buch h2{font-size:30px;color:#3a2210;margin:0;font-family:var(--sans)}
#buch .stufe{font-family:var(--mono);font-weight:700;font-size:14px;color:#8a2b1b;letter-spacing:.1em}
#buch .lab{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:#7a5a38;margin-top:12px}
#buch .w{font-size:18px;color:#2b1d10}
#buch .w.spruch{font-weight:600;font-size:22px;color:#4a1e8a}
#buch .w.formel{font-weight:600;color:#8a2b1b}
#buch .w.mono{font-family:var(--mono);font-size:15px}
#buch canvas{display:block;margin-top:6px;max-width:100%}
#buch .txt{font-size:14px;color:#4a3520;line-height:1.5;margin-top:12px;font-style:italic}
#buch .nav{display:flex;justify-content:space-between;align-items:center;margin-top:12px;gap:10px;flex:0 0 auto}
#buch .nav .pf{background:none;border:1px solid #8a6a42;color:#3a2210;font-size:18px;padding:6px 14px;border-radius:8px}
#buch .nav .fx{padding:10px 18px;font-size:14px}
#buch .nr{font-family:var(--mono);font-size:12px;color:#7a5a38}
#buch .sterne{color:#c08a1a;letter-spacing:.1em}
#buch .hint{color:var(--dim);font-size:12px;margin-top:14px;font-family:var(--mono)}

/* Online */
#online .code{font-family:var(--mono);font-size:56px;letter-spacing:.3em;color:var(--acc2);margin:8px 0}
#online .tast{display:grid;grid-template-columns:repeat(8,44px);gap:6px;margin-top:12px}
#online .tast b{display:flex;align-items:center;justify-content:center;height:44px;border-radius:8px;background:var(--chip);border:1px solid var(--rand);font-family:var(--mono);font-size:18px;font-weight:600;cursor:pointer}
#online .tast b.fokus{background:var(--acc);color:#120a20;box-shadow:0 0 0 2px #fff}
#online .eingabe{font-family:var(--mono);font-size:40px;letter-spacing:.3em;min-height:52px;color:var(--fg)}
#online .liste{margin-top:10px;font-size:14px;color:var(--fg)}
#online .liste span{display:inline-block;margin:3px 6px;padding:4px 10px;border-radius:999px;border:1px solid var(--rand)}
#online input{font-family:var(--sans);font-size:15px;padding:8px 12px;border-radius:8px;border:1px solid var(--rand);background:#150e22;color:var(--fg);width:200px;text-align:center;outline:none;margin-bottom:6px}

/* Touch-Leiste (nur bei pointer:coarse) */
#touch{position:fixed;left:0;right:0;bottom:0;height:92px;display:none;z-index:55;grid-template-columns:repeat(6,1fr);gap:6px;padding:6px 10px 12px}
#touch button{background:var(--chip);border:1px solid var(--rand);border-radius:12px;color:var(--fg);font-size:15px;font-family:var(--sans)}
#touch button:active{background:var(--acc);color:var(--bg)}
body.touch #touch{display:grid}
body.touch #status{bottom:100px}