:root{
  color-scheme: dark;
  --bg:#000; --fg:#f2f2f2; --dim:#7a7a7a; --accent:#1db954; --line:#232323;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{
  margin:0;background:var(--bg);color:var(--fg);
  font:16px/1.5 system-ui,-apple-system,"Segoe UI",sans-serif;
  display:flex;align-items:center;justify-content:center;
  padding:max(1.5rem,env(safe-area-inset-top)) 1.5rem max(1.5rem,env(safe-area-inset-bottom));
  overscroll-behavior:none;
}
.screen{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:1.75rem;text-align:center;width:100%;max-width:32rem;
}
.hidden{display:none !important}

h1{font-size:1.6rem;font-weight:800;letter-spacing:-.02em;margin:0;line-height:1.15}
h1 span{display:block;font-size:.8em;font-weight:500;color:var(--accent)}
.hint{margin:0;color:var(--dim);font-size:.9rem}

button{font:inherit;border:0;cursor:pointer;color:inherit;background:none}
.pill{
  font-weight:650;border-radius:999px;padding:1rem 2.2rem;
  background:var(--accent);color:#000;min-height:3.25rem;
}
.pill.ghost{background:transparent;border:1px solid var(--line);color:var(--fg)}
.row{display:flex;gap:.75rem;flex-wrap:wrap;justify-content:center}

/* Der Hauptknopf. Bewusst gross genug, um ihn ohne Hinsehen zu treffen. */
.disc{
  width:min(62vw,240px);aspect-ratio:1;border-radius:50%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.6rem;
  background:var(--accent);color:#000;font-weight:700;
  transition:transform .12s ease;
}
.disc:active{transform:scale(.96)}
.disc svg{width:34%;height:auto;fill:currentColor}
.disc.big svg{width:30%}
.disc span{font-size:1rem}

#cam-wrap{
  width:min(88vw,26rem);aspect-ratio:1;border-radius:1.25rem;overflow:hidden;
  background:#111;border:1px solid var(--line);
}
#cam{width:100%;height:100%;object-fit:cover}

.err{
  position:fixed;left:1rem;right:1rem;bottom:1rem;margin:0;padding:.85rem 1rem;
  background:#2a1414;border:1px solid #5c2626;border-radius:.75rem;
  color:#ffb4b4;font-size:.8rem;text-align:left;white-space:pre-wrap;font-family:ui-monospace,monospace;line-height:1.45;
}
