/* app.css — one dark surface, one ring. Signal renderings from persona/light-language.yaml,
   keyed by class: .sig-<signal> for Register A (state), .ov-<signal> for Register B (overlay,
   drawn on ::after so it plays on top and decays back to the state underneath). */

:root {
  color-scheme: dark;
  --sky-blue: #4FA8FF; --amber: #FFB020; --leaf-green: #3ED598; --warm-green: #7BD389;
  --gold: #FFC24B; --kuromi-purple: #8A2BE2; --warm-pink: #FF7BAC; --soft-white: #E8E4D8;
  --dim-red: #B0413E; --ground: #0b0d12;
}
html, body { margin: 0; height: 100%; background: var(--ground); overflow: hidden; }
body {
  font: 16px/1.4 -apple-system, BlinkMacSystemFont, system-ui, sans-serif; color: var(--soft-white);
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent;
}
#stage {
  position: fixed; inset: 0; display: flex; align-items: center; justify-content: center;
  touch-action: none; cursor: pointer;
}
.ring-wrap {
  position: relative; width: 70vmin; height: 70vmin;
  filter: drop-shadow(0 0 calc(3vmin) var(--c, var(--soft-white)));
}
#ring {
  --c: var(--soft-white); --level: 0;
  position: absolute; inset: 0; border-radius: 50%;
  background: var(--c);
  -webkit-mask: radial-gradient(circle, transparent 0 60%, #000 61% 79%, transparent 80%);
  mask: radial-gradient(circle, transparent 0 60%, #000 61% 79%, transparent 80%);
  opacity: .5;
}
#ring::after {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  background: var(--oc, transparent); opacity: 0; pointer-events: none;
}
#centre {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center;
  justify-content: center; pointer-events: none;
}
#centre .code { font-size: 11vmin; letter-spacing: .12em; font-variant-numeric: tabular-nums; }
#centre .door { font-size: 3.2vmin; letter-spacing: .3em; opacity: .6; margin-top: 1vmin; }

/* ---- Register A --------------------------------------------------------------------------- */
@keyframes breathe { 0%, 100% { opacity: .15; } 50% { opacity: 1; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse1 { 0% { opacity: .15; } 12% { opacity: 1; } 100% { opacity: .15; } }
@keyframes trouble { 0%, 50% { opacity: .15; } 6%, 56% { opacity: 1; } 25%, 75% { opacity: .15; }
                     100% { opacity: .8; } }

.sig-idle       { --c: var(--soft-white); animation: breathe 6s ease-in-out infinite; }
.sig-listening  { --c: var(--sky-blue);   animation: breathe 4s ease-in-out infinite; }
.sig-connecting, .sig-thinking {
  background: conic-gradient(from 0deg, var(--c) 0 90deg, transparent 100deg 360deg);
  opacity: 1; animation: spin 1.6s linear infinite;
}
.sig-connecting { --c: var(--soft-white); }
.sig-thinking   { --c: var(--amber); }
.sig-speaking   { --c: var(--soft-white); opacity: calc(.5 + var(--level) * .5); transition: opacity 60ms linear; }
.sig-your-turn  { --c: var(--leaf-green); animation: pulse1 .7s ease-out 1 both; }
.sig-trouble    { --c: var(--dim-red); animation: trouble 4s ease-in-out 1 forwards; }

/* ---- Register B (overlays) ----------------------------------------------------------------- */
@keyframes ov-fill { 0% { opacity: 1; background: conic-gradient(var(--oc) 0deg, transparent 0deg); }
  30% { background: conic-gradient(var(--oc) 360deg, transparent 360deg); }
  100% { opacity: 1; background: var(--oc); } }
@keyframes ov-sparkle { 0%, 100% { opacity: .55; } 20% { opacity: 1; } 35% { opacity: .5; } 50% { opacity: .95; }
  70% { opacity: .6; } 85% { opacity: 1; } }
@keyframes ov-flicker { 0% { opacity: .5; } 10% { opacity: 1; } 20% { opacity: .4; } 30% { opacity: .9; }
  40% { opacity: .55; } 50% { opacity: 1; } 60% { opacity: .45; } 70% { opacity: .85; } 80% { opacity: .5; }
  90% { opacity: 1; } 100% { opacity: .6; } }
@keyframes ov-breathe { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
@keyframes ov-pulse2 { 0%, 50% { opacity: .1; } 6%, 56% { opacity: 1; } 45%, 100% { opacity: .1; } }

.ov-praise::after        { --oc: var(--gold); animation: ov-fill 1.2s ease-out 1 both, ov-sparkle .5s linear 1.2s 5; }
.ov-mischief::after      { --oc: var(--kuromi-purple); animation: ov-flicker .5s steps(10) 6; }
.ov-encouragement::after { --oc: var(--warm-green); animation: ov-breathe 2s ease-in-out 2; }
.ov-almost::after        { --oc: var(--amber); animation: ov-pulse2 1.2s ease-out 1 both; }
.ov-mood-warm::after     { --oc: var(--gold); animation: ov-breathe 3s ease-in-out 1; }
.ov-mood-fun::after      { --oc: var(--kuromi-purple); animation: ov-sparkle .5s linear 5; }
.ov-mood-comfort::after  { --oc: var(--warm-pink); animation: ov-breathe 4s ease-in-out 1; }
.ov-mood-wonder::after   { --oc: var(--sky-blue); animation: ov-pulse2 1.4s ease-out 1 both; }
.ov-decay::after         { animation: none !important; opacity: 0 !important; transition: opacity 600ms ease-out; }

/* ---- diagnostics (long-press only) --------------------------------------------------------- */
#diag {
  position: fixed; inset: 0; background: rgba(6, 8, 12, .96); padding: max(16px, env(safe-area-inset-top)) 16px 24px;
  overflow: auto; font: 12px/1.5 ui-monospace, Menlo, Consolas, monospace; color: #cfcbc3; touch-action: pan-y;
}
#diag h2 { font: 600 14px/1.2 -apple-system, system-ui, sans-serif; margin: 0 0 10px; color: var(--soft-white); }
#diag dl { display: grid; grid-template-columns: max-content 1fr; gap: 2px 12px; margin: 0 0 12px; }
#diag dt { color: #8f8b84; }
#diag dd { margin: 0; word-break: break-all; }
#diag ul { list-style: none; padding: 0; margin: 0 0 16px; }
#diag .row { display: flex; gap: 10px; }
#diag button {
  flex: 1; padding: 12px; font: 600 15px/1 -apple-system, system-ui, sans-serif; border: 0; border-radius: 10px;
  background: #2a2e35; color: var(--soft-white); -webkit-appearance: none;
}
#diag button.primary { background: #3b6ea5; color: #fff; }