/* Cosmic orb-companion — Money Lessons guide. All classes namespaced .cmp-* */
.cmp { display:flex; align-items:flex-start; gap:12px; margin:0 0 16px; }

/* Kurus — glowing glass orb with minimal expressive eyes (deadpan resting face). */
.cmp-orb { position:relative; width:52px; height:52px; flex:none; animation:cmp-breathe 3.2s ease-in-out infinite; }
.cmp-orb .k-glow {
  position:absolute; inset:-32%; border-radius:50%; z-index:0;
  background:radial-gradient(circle at 50% 46%, rgba(143,194,255,.32), rgba(143,194,255,.096) 46%, transparent 70%);
  filter:blur(6px);
}
.cmp-orb .k-body {
  position:absolute; inset:0; border-radius:50%; z-index:1;
  background:radial-gradient(circle at 38% 30%, #eef6ff 0%, #eef6ff 18%, #8fc2ff 58%, #1c3a6e 100%);
  box-shadow:inset 0 -3px 8px rgba(28,58,110,.55), inset 0 2px 5px rgba(255,255,255,.55), 0 2px 9px rgba(28,58,110,.35);
}
.cmp-orb .k-rim {
  position:absolute; left:16%; top:7%; width:46%; height:20%; border-radius:50%; z-index:2;
  background:linear-gradient(180deg, rgba(255,255,255,.85), rgba(255,255,255,0)); filter:blur(1px); transform:rotate(-12deg);
}
.cmp-orb .k-bounce {
  position:absolute; left:28%; bottom:5%; width:44%; height:12%; border-radius:50%; z-index:2;
  background:radial-gradient(ellipse at center, rgba(255,255,255,.35), transparent 70%); filter:blur(1px);
}
.cmp-orb .k-eyes { position:absolute; left:0; right:0; top:40%; z-index:3; display:flex; justify-content:center; gap:8px; }
.cmp-orb .k-eye {
  width:4px; height:9px; border-radius:999px; background:rgba(13,26,52,.88); filter:blur(.4px);
  transform:scaleY(.42); /* deadpan resting */ animation:cmp-blink 3.6s ease-in-out infinite;
}
/* moods the AI brain can set via data-mood (default = deadpan) */
.cmp-orb[data-mood="sly"] .k-eye { animation:none; transform:scaleY(.42) rotate(-9deg); }
.cmp-orb[data-mood="sly"] .k-eye:last-child { transform:scaleY(.72) rotate(-9deg); }
.cmp-orb[data-mood="side"] .k-eye { animation:none; transform:translateX(2px); }
.cmp-orb[data-mood="surprised"] .k-eye { animation:none; transform:scaleY(1); }
@keyframes cmp-breathe { 0%,100% { transform:scale(1); } 50% { transform:scale(1.045); } }
@keyframes cmp-blink { 0%,90%,100% { transform:scaleY(.42); } 94% { transform:scaleY(.1); } }

.cmp-bubble {
  position:relative; flex:1;
  background:var(--panel2,#1b1f29); color:var(--ink,#e7ecf3);
  border-radius:14px; padding:11px 14px; font-size:14px; line-height:1.5;
}
.cmp-bubble::before {
  content:''; position:absolute; left:-6px; top:14px; width:12px; height:12px;
  background:inherit; transform:rotate(45deg); border-radius:2px;
}

.cmp-foot { margin-top:16px; }
.cmp-hint-btn {
  width:100%; background:transparent; border:1px solid var(--line2,#2c313b);
  color:var(--ink2,#aab3c0); border-radius:10px; padding:10px 14px;
  font-size:13px; cursor:pointer;
}
.cmp-hint-btn:hover { border-color:#5aa0ff; color:var(--ink,#e7ecf3); }
.cmp-hint {
  margin-top:10px; background:var(--panel2,#1b1f29); border-left:3px solid #5aa0ff;
  border-radius:8px; padding:11px 14px; font-size:13px; line-height:1.55;
  color:var(--ink2,#c4ccd8);
}

@media (prefers-reduced-motion: reduce) {
  .cmp-orb { animation:none; }
  .cmp-orb .k-eye { animation:none; transform:scaleY(.42); }
}

/* ── Shorts capture mode (/?capture): hide chrome so the lesson sits clean on the cosmos ── */
.capture-mode #em-system,
.capture-mode #em-foot,
.capture-mode .footer-note,
.capture-mode #em-splash,
.capture-mode #tg-tilt-toggle { display:none !important; }
/* the lesson must be visible immediately (Tideglass leaves screens visibility:hidden until they "settle") */
.capture-mode #game, .capture-mode #game * { visibility:visible !important; }
.capture-mode #game { opacity:1 !important; }