/* Shared Propware chrome — fictional set-dressing UI */
:root {
  --prop-red: #ff2a2a;
  --prop-green: #22e36a;
  --prop-amber: #f0b429;
  --prop-cyan: #4dd2ff;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --sans: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.prop-watermark {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 100;
  pointer-events: none;
  text-align: center;
  padding: .35rem .6rem calc(.35rem + env(safe-area-inset-bottom));
  font: 600 .62rem/1.2 var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255, 220, 80, .55);
  background: linear-gradient(transparent, rgba(0, 0, 0, .55));
}

.prop-watermark.corner {
  inset: auto auto env(safe-area-inset-bottom, .5rem) .6rem;
  text-align: left;
  background: none;
  padding: 0;
  color: rgba(255, 220, 80, .4);
}

.flash {
  animation: flash 1.1s ease-in-out infinite;
}
@keyframes flash {
  0%, 100% { opacity: 1; }
  50% { opacity: .35; }
}

.scanlines::after {
  content: "";
  pointer-events: none;
  position: fixed;
  inset: 0;
  z-index: 50;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent 2px,
    rgba(0, 0, 0, .12) 2px,
    rgba(0, 0, 0, .12) 3px
  );
  mix-blend-mode: multiply;
}

.hud-clock {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: .04em;
}

/* Face frames: Faker AI fillers, or cover-crop for Jakobus Swart */
figure.face {
  margin: 0;
  position: relative;
  overflow: hidden;
  background: #0a0f14;
}
figure.face img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
  filter: contrast(1.05) saturate(.92);
}
figure.face.face-cover img {
  object-position: center 22%;
  filter: contrast(1.08) saturate(.88) grayscale(.08);
}
figure.face figcaption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: .2rem .35rem;
  font: 700 .58rem/1.2 var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(240, 245, 250, .92);
  background: linear-gradient(transparent, rgba(0, 0, 0, .75));
}
.face-empty {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  font: 700 .7rem/1 var(--mono);
  letter-spacing: .1em;
  color: #7a8699;
}