/* ── Embed styles ─────────────────────────────────────────────
 * Standalone on purpose. The embed does not link the CDN token sheet: an iframe
 * that fetches a stylesheet from another origin can be blocked by the host
 * page's own CSP, and a ball that fails to paint inside somebody else's article
 * is worse than a ball with hard-coded colours.
 *
 * The background is transparent by default so the host's own page shows
 * through; ?bg=0b0b12 sets it, and js/embed.js writes that inline.
 */

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
[hidden] { display: none !important; }

html, body { height: 100%; }
body {
  background: transparent;
  color: #e8e8f0;
  font: 15px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.frame {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 12px;
  min-height: 0;
}

.frame__question {
  font-size: 13px;
  color: #a8a8bd;
  text-align: center;
  max-width: 40ch;
}

.stage {
  position: relative;
  width: 100%;
  flex: 1;
  min-height: 160px;
  touch-action: none;
  cursor: grab;
  user-select: none;
}
.stage.is-grabbed { cursor: grabbing; }
.stage__ball { position: absolute; inset: 0; }
.stage__ball canvas, .ball-canvas { display: block; width: 100%; height: 100%; }

.frame__answer {
  min-height: 2.6em;
  display: flex;
  align-items: center;
  text-align: center;
  font-size: 17px;
  font-weight: 600;
  max-width: 24ch;
}
.frame__answer[data-tone="yes"]   { color: #6ee7b7; }
.frame__answer[data-tone="maybe"] { color: #fcd34d; }
.frame__answer[data-tone="no"]    { color: #fda4af; }

.frame__controls { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: center; }

.ebtn {
  height: 36px;
  padding: 0 14px;
  border-radius: 9px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.06);
  color: inherit;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.18s cubic-bezier(0.22, 1, 0.36, 1);
}
.ebtn:hover { background: rgba(255, 255, 255, 0.12); }
.ebtn--primary { background: #8b5cf6; border-color: #8b5cf6; color: #fff; }
.ebtn--primary:hover { background: #a78bfa; }
.ebtn:focus-visible, .frame__link:focus-visible { outline: 2px solid #a78bfa; outline-offset: 2px; }

.frame__link { font-size: 12px; color: #8f8fa8; text-decoration: none; }
.frame__link:hover { color: #c4c4d8; text-decoration: underline; }

/* ── The flat ball (no WebGL) ─────────────────────────────────
 * The same twin as the app's, kept here rather than shared because css/style.css
 * is never loaded in the frame. */
.flat-ball { display: none; }
.stage[data-fallback="true"] .stage__ball { display: none; }
.stage[data-fallback="true"] .flat-ball {
  display: grid;
  place-items: center;
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(70%, 240px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 26%, rgba(255,255,255,0.5), transparent 34%),
    radial-gradient(circle at 50% 50%, #14141a, #05050a 72%);
  box-shadow: inset -14px -18px 38px rgba(0,0,0,0.85), 0 12px 30px rgba(0,0,0,0.55);
}
.flat-ball__eight {
  position: absolute;
  top: 9%;
  width: 34%;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #f2f2ee;
  color: #0b0b0f;
  font-weight: 700;
  font-size: clamp(1.1rem, 5vw, 1.9rem);
}
.flat-ball__window {
  position: absolute;
  bottom: 12%;
  width: 40%;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  padding: 5px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 35%, #17347a, #08163a);
  border: 5px solid #08080c;
  color: #eef2ff;
  font-size: clamp(0.55rem, 2vw, 0.75rem);
  font-weight: 600;
  text-align: center;
  line-height: 1.15;
  overflow: hidden;
}
.flat-ball[data-away="true"] .flat-ball__window,
.flat-ball[data-phase="agitated"] .flat-ball__window { color: transparent; }

.stage.is-shaking .flat-ball { animation: flat-shake 0.42s cubic-bezier(0.22, 1, 0.36, 1) 2; }
@keyframes flat-shake {
  0%, 100% { transform: translate(-50%, -50%) rotate(0deg); }
  20%  { transform: translate(-56%, -52%) rotate(-7deg); }
  45%  { transform: translate(-44%, -48%) rotate(8deg); }
  70%  { transform: translate(-53%, -53%) rotate(-4deg); }
}

@media (prefers-reduced-motion: reduce) {
  .stage.is-shaking .flat-ball { animation: none; }
  .ebtn { transition: none; }
}