/* Photo faces (miiface.js): a felt face-in-the-hole board over the photo, and the Face tab's photo card (plaza.js). */
.fc { z-index: 5200; }
.fc-stage { position: relative; flex: 1; min-height: 0; overflow: hidden; background: #111; touch-action: none; cursor: grab; user-select: none; -webkit-user-select: none; }
.fc-stage:active { cursor: grabbing; }
.fc-img { position: absolute; left: 0; top: 0; max-width: none; height: auto; transform-origin: 0 0; pointer-events: none; -webkit-user-drag: none; }
.fc-board { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
/* the board: the letterboard felt, cut through with the oval */
.fc-felt { fill: var(--felt); opacity: .86; }
.fc-ring { fill: none; stroke: var(--letter); stroke-width: 2.5; stroke-dasharray: 7 6; }
.fc-ticks line { stroke: var(--letter); stroke-width: 2; stroke-linecap: round; }
.fc-ticks text { fill: var(--letter); font: 700 13px/1 var(--pz-rounded); }
.fc-tools { flex: none; padding: 12px 16px calc(14px + env(safe-area-inset-bottom)); background: var(--pz-chrome); border-top: 2px solid var(--pz-line); }
.fc-zoom { display: grid; grid-template-columns: 24px 1fr 24px; align-items: center; gap: 8px; font: 800 22px/1 var(--pz-rounded); color: var(--pz-ink-2); text-align: center; }
.fc-zoom input { width: 100%; height: 36px; accent-color: var(--pz-blue); }
.fc-hint { margin: 6px 0 0; text-align: center; font-size: 14.5px; line-height: 1.4; color: var(--pz-ink-2); }

/* the Face tab's card: the face in its oval, like the hole it was cut from */
.ed-photo { margin-bottom: 14px; }
.ed-photo-thumb { background: var(--felt); }
.ed-photo-thumb img { width: 58px; height: 69px; border-radius: 50%; object-fit: cover; image-rendering: auto; box-shadow: 0 0 0 2px var(--letter); }
.ed-photo-thumb svg { color: var(--letter); }
.ed-photo-thumb.tinted img { filter: grayscale(1) sepia(.55) saturate(1.5) brightness(1.04); }
.ed-paint-acts .pz-btn.on { border-color: var(--pz-blue); box-shadow: inset 0 0 0 2px var(--pz-blue); background: var(--pz-sky); }
.ed-note { margin: 0 0 12px; padding: 10px 12px; border-radius: 12px; background: var(--pz-sky); font-size: 14.5px; line-height: 1.4; color: var(--pz-ink-2); }