/* Kamera-Kacheln (Overlay, Spielerseite, Moderator) */
.tiles-grid { display: grid; justify-content: center; align-content: center; }
.ctile-empty { padding: 32px; text-align: center; font-size: 22px; font-weight: 800; color: var(--ink-2); background: var(--panel); border-radius: 12px; }
.ctile { position: relative; background: var(--panel-2); border-radius: var(--tr, 14px); overflow: hidden; display: grid; place-items: center; box-shadow: 0 0 0 2px var(--line); transition: box-shadow .15s; }
.ctile > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ctile .ph { width: 28%; aspect-ratio: 1; border-radius: 50%; background: var(--panel-3); display: grid; place-items: center; font-weight: 800; color: var(--ink-2); }
.ctile.done { box-shadow: 0 0 0 3px var(--ok); }
.ctile.off { opacity: .6; }
/* Eigene Kachel: kräftiger Akzentrahmen, damit man sich sofort erkennt */
.ctile.me { box-shadow: 0 0 0 4px var(--accent), 0 0 0 8px color-mix(in srgb, var(--accent) 30%, transparent); }
.ctile.me.done { box-shadow: 0 0 0 4px var(--ok), 0 0 0 8px color-mix(in srgb, var(--ok) 30%, transparent); }
.ctile .bar { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: .5em; padding: 1.1em .8em .5em; background: linear-gradient(transparent, rgba(0,0,0,.72)); color: #fff; }
.ctile .nm { font-weight: 800; font-stretch: 108%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ctile .you { background: var(--accent); color: #fff; font-weight: 800; font-size: .55em; padding: .15em .7em; border-radius: 99px; flex: none; }
.ctile .sc { font-weight: 800; font-size: .6em; color: var(--on-signal); background: var(--signal); padding: .15em .65em; border-radius: 99px; flex: none; margin-left: auto; }
.ctile .sc + .jokers { margin-left: .5em; }
/* Aufsatz über dem Kamerabild (wird bei jedem Update neu befüllt, das Video darunter bleibt unberührt) */
.ctile .ov { position: absolute; inset: 0; pointer-events: none; }
.ctile .lock { position: absolute; right: .9em; top: .9em; background: var(--ok); color: var(--on-signal); border-radius: 99px; padding: .2em .8em .2em .55em; font-weight: 800; display: flex; align-items: center; gap: .35em; }
.ctile .rank { position: absolute; left: .7em; top: .7em; height: 1.9em; border-radius: .6em; background: var(--signal); color: var(--on-signal); display: flex; align-items: center; justify-content: center; gap: .25em; padding: 0 .55em; white-space: nowrap; box-shadow: 0 .15em .5em rgba(0,0,0,.35); }
.ctile .rank small { font-size: .6em; font-weight: 800; }

/* Joker-Münzen */
.jokers { display: inline-flex; gap: .4em; margin-left: auto; flex: none; }
.coin { display: inline-grid; place-items: center; width: 2em; height: 2em; border-radius: 50%; position: relative; color: #fff; flex: none;
  background: linear-gradient(145deg, #a66bff, #6d28d9); box-shadow: inset 0 0 0 .13em rgba(255,255,255,.38), 0 .12em .35em rgba(0,0,0,.4); }
.coin.chat { background: linear-gradient(145deg, #3ddc97, #0f9a78); color: #05261a; box-shadow: inset 0 0 0 .13em rgba(255,255,255,.42), 0 .12em .35em rgba(0,0,0,.4); }
.coin svg { width: 62%; height: 62%; stroke: currentColor; fill: none; stroke-width: 2.3; stroke-linecap: round; stroke-linejoin: round; }
.coin.used { background: #3a4049; color: #9aa5b5; box-shadow: inset 0 0 0 .13em rgba(255,255,255,.12); opacity: .75; }
.coin.used::after { content: ""; position: absolute; left: 12%; right: 12%; top: 50%; height: .16em; background: #ff6b6b; transform: rotate(-42deg); border-radius: 1em; box-shadow: 0 0 0 .06em rgba(0,0,0,.35); }
.ic { display: inline-grid; } .ic svg { width: 1.1em; height: 1.1em; stroke: currentColor; fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }