/* Avatar malen und Foto (draw.js, camera.js) – gemeinsam für Handy (index.html) und PC-Show (host.html) */
.drawmodal { position: fixed; inset: 0; z-index: 500; background: rgba(20, 6, 50, 0.85); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; padding: 14px; animation: fadeIn 0.25s both; }
.drawbox { width: min(420px, 100%); padding: 16px; display: flex; flex-direction: column; gap: 12px; align-items: center; }
.drawbox h2 { font-size: 24px; }
.drawcanvas { width: min(300px, 76vw); aspect-ratio: 1; border-radius: 50%; border: var(--outline); background: var(--dbg, #ffd6e5); touch-action: none; box-shadow: var(--shadow-sm); cursor: crosshair; }
/* Kamera-Sucher */
.camview { position: relative; width: min(300px, 76vw); aspect-ratio: 1; border-radius: 50%; overflow: hidden; border: var(--outline); background: #120830; box-shadow: var(--shadow-sm); }
.camview video { width: 100%; height: 100%; object-fit: cover; display: block; }
.camview video.mirror { transform: scaleX(-1); }
/* Zuschneiden (camera.js): Bild im Kreis verschieben/zoomen, Ecken abgedunkelt */
.cropview { position: relative; width: min(300px, 76vw); aspect-ratio: 1; border-radius: 22px; overflow: hidden; border: var(--outline); background: #120830; box-shadow: var(--shadow-sm); touch-action: none; cursor: grab; user-select: none; -webkit-user-select: none; }
.cropview:active { cursor: grabbing; }
.cropview img { position: absolute; left: 50%; top: 50%; max-width: none; pointer-events: none; -webkit-user-drag: none; }
.cropview::after { content: ''; position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 999px rgba(12, 3, 36, 0.62); border: 3px dashed rgba(255, 255, 255, 0.8); pointer-events: none; }
.cropzoom { display: flex; align-items: center; gap: 10px; width: min(300px, 76vw); }
.cropzoom input { flex: 1; accent-color: var(--pink, #ff4f8b); height: 28px; }
.cropzoom button { width: 36px; height: 36px; flex: none; border-radius: 50%; border: 2px solid var(--ink); background: var(--paper-2); color: var(--ink); font-weight: 900; font-size: 20px; line-height: 1; padding: 0; }
.camcount { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--font-head); font-size: 110px; color: #fff; text-shadow: 0 4px 0 var(--ink), 0 0 30px rgba(0, 0, 0, 0.5); pointer-events: none; }
.camcount.go { animation: pop 0.5s var(--ease-back) both; }
.camflash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; }
.camflash.go { animation: camFlash 0.35s ease-out; }
@keyframes camFlash { 0% { opacity: 1; } 100% { opacity: 0; } }
.drawcanvas { background-size: cover; background-position: center; }
.palette { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.palette button { width: 34px; height: 34px; border-radius: 50%; border: 3px solid var(--ink); padding: 0; transition: transform 0.15s var(--ease-back); }
.palette button.on { transform: scale(1.25); box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--ink); }
.palette.bgs button { width: 26px; height: 26px; border-width: 2px; }
.drawtools { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.drawtools button { border: 2px solid var(--ink); background: var(--paper-2); color: var(--ink); border-radius: 12px; padding: 6px 12px; font-weight: 900; }
.drawtools button.on { background: var(--ink); color: #fff; }