/* Founder face window (drawn by scene/founder.js). Frame from samples/style-a, chip shows the water temperature. */
#face {
  --chip: #ffb070;
  position: fixed; right: 24px; top: 24px; z-index: 1;
  width: min(28vw, 320px); aspect-ratio: 4 / 5;
  border-radius: 24px; overflow: hidden;
  border: 6px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
  background: #2a1c16;
  transition: border-color 0.8s ease, box-shadow 0.8s ease;
}
#face canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
#face .face-fade { opacity: 0; pointer-events: none; }
#face[data-band="lukewarm"] { --chip: #ffd08a; }
#face[data-band="cold"] { --chip: #7fd3e6; border-color: rgba(225, 242, 255, 0.92); }
#face[data-band="frozen"] { --chip: #bfe6ff; border-color: rgba(214, 238, 255, 0.95); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35), 0 0 24px rgba(160, 215, 255, 0.55); }

.face-chip {
  position: absolute; left: 10px; bottom: 10px;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 11px 5px 9px; border-radius: 999px;
  background: rgba(32, 20, 16, 0.55);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  color: #fff; font: 700 15px/1 ui-rounded, system-ui, -apple-system, sans-serif;
  font-variant-numeric: tabular-nums; letter-spacing: 0.01em;
}
.face-chip .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--chip); box-shadow: 0 0 8px var(--chip); transition: background 0.8s ease, box-shadow 0.8s ease; }

#face.hit { animation: face-hit 0.45s ease-out; }
@keyframes face-hit {
  0% { transform: translate(0, 0); border-color: rgba(170, 220, 255, 1); }
  25% { transform: translate(-4px, 2px); }
  50% { transform: translate(4px, -2px); }
  100% { transform: translate(0, 0); }
}
.face-you { position: absolute; right: 12px; bottom: 14px; color: #fff; font: 800 12px/1 ui-rounded, system-ui, -apple-system, sans-serif; letter-spacing: 0.08em; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5); }