/* RIA Lens: 600 × 600, pure black (black is see-through on an additive
   display). Her face holds every screen. One thing at a time. Focus is light —
   white, a glow and a cyan bar — never a box or a border. Fraunces for her
   words, Figtree for chrome. Cyan the one accent; orange only for "offline";
   no yellow. */
:root {
  --white: #F2F5F7;
  --soft: #C3CAD0;
  --grey: #8C969F;
  --dim: #5D6870;
  --faint: #2C3338;
  --accent: #5CE1E6;
  --her: #46EADF;      /* her idle hue (face.js HUE.idle), for "online" */
  --offline: #F28C26;
  --black: #000000;
  --f-ui: 'Figtree', system-ui, sans-serif;
  --f-voice: 'Fraunces', Georgia, serif;
}

/* Self-hosted (fonts/OFL-*.txt): the CSP allows fonts from this origin only. */
@font-face {
  font-family: 'Figtree'; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url('../fonts/figtree-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Fraunces'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/fraunces-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Fraunces'; font-style: italic; font-weight: 400; font-display: swap;
  src: url('../fonts/fraunces-latin-italic.woff2') format('woff2');
}

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--black); }
body { position: relative; width: 600px; height: 600px; overflow: hidden; font-family: var(--f-ui); color: var(--white); -webkit-font-smoothing: antialiased; }

/* ---- her face: one canvas under the text, moved by app.js ---- */
.face {
  position: absolute; left: 0; top: 0; width: 300px; height: 300px; z-index: 1;
  transform-origin: 0 0; transition: transform .45s cubic-bezier(.2, .8, .2, 1);
}

/* ---- the text layer ---- */
.lens { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.scr { position: absolute; inset: 0; padding: 26px 34px 30px; display: flex; flex-direction: column; }
.center { text-align: center; justify-content: center; }
.top { display: flex; align-items: baseline; gap: 14px; min-height: 34px; flex: none; }
.foot { margin-top: auto; display: flex; flex-direction: column; gap: 12px; flex: none; }
.foot.center { align-items: center; }

/* status, top right on Home */
.status { margin-left: auto; font-size: 17px; font-weight: 600; color: var(--grey); display: inline-flex; align-items: center; gap: 8px; }
.status.live { color: var(--soft); }
.status.live i { width: 10px; height: 10px; border-radius: 50%; background: var(--her); box-shadow: 0 0 10px var(--her); }
.status.off { color: var(--offline); }
.tag { font-size: 13px; font-weight: 700; letter-spacing: .16em; color: var(--grey); }

.hint { font-size: 26px; font-weight: 600; color: var(--soft); }
.hint.dim { font-size: 19px; color: var(--grey); }
.notice { font-family: var(--f-voice); font-size: 28px; line-height: 1.25; color: var(--white); max-width: 520px; }

.kick { font-size: 20px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.row { display: flex; align-items: center; gap: 14px; margin-top: 4px; min-height: 110px; flex: none; }
.face-slot { width: 104px; height: 104px; flex: none; }
.face-slot.small { width: 96px; }

/* her words */
.voice { font-family: var(--f-voice); font-size: 40px; line-height: 1.22; letter-spacing: -.005em; margin-top: 16px; overflow-wrap: anywhere; }
.voice.center { margin-top: 0; }
.voice.heard { color: var(--soft); max-height: 260px; overflow: hidden; display: flex; flex-wrap: wrap; align-content: flex-end; column-gap: .26em; }
.voice .w { display: inline-block; animation: rise .5s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes rise { from { opacity: .2; transform: translateY(5px); } }
.caret { color: var(--accent); animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.said { font-size: 24px; color: #7D8790; font-style: italic; line-height: 1.3; max-width: 520px; }
.voice.answer { font-size: 34px; margin-top: 8px; }

.gap-listen { height: 196px; flex: none; }
.gap-error { flex: 1; min-height: 230px; }
.s-error .voice { font-size: 34px; margin-bottom: 12px; }
.gap-send { height: 186px; flex: none; }

/* focus is light */
.acts { display: flex; gap: 44px; align-items: baseline; }
.act { position: relative; font-size: 30px; font-weight: 700; color: var(--dim); padding-bottom: 10px; transition: color .2s; }
.act.back { font-size: 22px; padding-bottom: 6px; }
.act.on { color: #fff; text-shadow: 0 0 22px rgba(92, 225, 230, .55); }
.act.on::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 5px; border-radius: 5px; background: var(--accent); box-shadow: 0 0 14px var(--accent); }

/* send: the ring is how long the pinch is good for */
.ring { position: absolute; left: 205px; top: 42px; width: 190px; height: 190px; transform: rotate(-90deg); }
.ring circle { fill: none; stroke-width: 1.4; stroke-linecap: round; }
.ring .track { stroke: #1D2328; }
.ring .left { stroke: var(--accent); transition: stroke-dashoffset .25s linear; }
.card { display: grid; gap: 10px; justify-items: center; text-align: center; }
.card .kick { font-size: 19px; }
.guess { font-size: 20px; font-weight: 600; color: var(--white); text-shadow: 0 0 16px rgba(92, 225, 230, .5); }
.voice.body { font-size: 32px; margin-top: 4px; max-height: 160px; overflow: hidden; }

/* choose: a wheel, the middle item is what a pinch picks */
.wheel { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 8px; padding-left: 10px; }
.wheel div { transition: all .25s cubic-bezier(.2, .8, .2, 1); }
.w0 { font-size: 50px; font-weight: 800; letter-spacing: -.02em; color: #fff; text-shadow: 0 0 22px rgba(92, 225, 230, .45); }
.w0.dim { color: var(--soft); text-shadow: none; }
.w0 small { display: block; font-size: 24px; font-weight: 500; color: var(--accent); letter-spacing: 0; margin-top: 2px; }
.w1 { font-size: 32px; font-weight: 700; color: #59636B; }
.w2 { font-size: 24px; font-weight: 700; color: var(--faint); }

/* answer pages */
.rail { position: absolute; right: 18px; top: 50%; transform: translateY(-50%); display: grid; gap: 8px; }
.rail i { width: 6px; height: 16px; border-radius: 6px; background: #2B3238; }
.rail i.on { background: #fff; height: 34px; }

@media (prefers-reduced-motion: reduce) {
  .face, .act, .wheel div, .ring .left { transition: none; }
  .voice .w, .caret { animation: none; }
}