/* Cypher Core — mascot, guide, shared buttons */
:root {
  --cyx-forest: #024430;
  --cyx-forest-2: #066a4c;
  --cyx-deep: #011a12;
  --cyx-mint: #06d6a0;
  --cyx-leaf: #46c93a;
  --cyx-gold: #ffd166;
  --cyx-gold-d: #e9b949;
  --cyx-red: #ef476f;
  --cyx-blue: #3a7bd5;
  --cyx-bg: #f3f6f5;
  --cyx-card: #ffffff;
  --cyx-line: #e3ebe7;
  --cyx-ink: #0b1f17;
  --cyx-text: #33463e;
  --cyx-muted: #6b7f76;
  --cyx-font: "Lato", system-ui, -apple-system, "Segoe UI", sans-serif;
  --cyx-head: "Manrope", "Montserrat", system-ui, sans-serif;
  --cyx-ease: cubic-bezier(.32, .72, 0, 1);
}

/* ---------- Mascot ---------- */
.cyx-mascot { position: relative; width: var(--cyx-size, 160px); flex: none; line-height: 0; user-select: none; }
.cyx-mascot .cyx-svg { width: 100%; height: auto; display: block; overflow: visible; }
.cyx-mascot .cyx-svg * { transform-box: view-box; }
.cyx-all { transform-origin: 100px 250px; }
.cyx-head { transform-origin: 100px 120px; }
.cyx-sprout { transform-origin: 100px 26px; }
.cyx-arm-l { transform-origin: 63px 131px; }
.cyx-arm-r { transform-origin: 137px 131px; }
.cyx-leg-l { transform-origin: 85px 192px; }
.cyx-leg-r { transform-origin: 115px 192px; }
.cyx-eyes { filter: drop-shadow(0 0 2.5px #86ff70); }
.cyx-mouth { filter: drop-shadow(0 0 2px #86ff70); }
.cyx-thumb { opacity: 0; transition: opacity .2s; }
.cyx-shadow { transform-origin: 100px 254px; }

/* faces */
.cyx-e { display: none; }
.cyx-mascot[data-face="happy"] .cyx-e-happy,
.cyx-mascot[data-face="open"] .cyx-e-open,
.cyx-mascot[data-face="look"] .cyx-e-look,
.cyx-mascot[data-face="wide"] .cyx-e-wide,
.cyx-mascot[data-face="wink"] .cyx-e-wink,
.cyx-mascot[data-face="squint"] .cyx-e-squint,
.cyx-mascot[data-face="flat"] .cyx-e-flat,
.cyx-mascot[data-face="star"] .cyx-e-star { display: inline; }
.cyx-blink { transform-origin: 100px 84px; animation: cyxBlink 4.2s infinite; }

.cyx-m { opacity: 0; }
.cyx-m-smile { opacity: 1; }
.cyx-mascot[data-face="squint"] .cyx-m-smile, .cyx-mascot[data-face="star"] .cyx-m-smile,
.cyx-mascot[data-face="wide"] .cyx-m-smile, .cyx-mascot[data-face="flat"] .cyx-m-smile { opacity: 0; }
.cyx-mascot[data-face="squint"] .cyx-m-open, .cyx-mascot[data-face="star"] .cyx-m-open { opacity: 1; }
.cyx-mascot[data-face="wide"] .cyx-m-o { opacity: 1; }
.cyx-mascot[data-face="flat"] .cyx-m-flat { opacity: 1; }
.cyx-mascot.is-talking .cyx-m { opacity: 0; }
.cyx-mascot.is-talking .cyx-m-open { animation: cyxTalkA .26s steps(1) infinite; }
.cyx-mascot.is-talking .cyx-m-smile { animation: cyxTalkB .26s steps(1) infinite; }

/* fx */
.cyx-fx > * { opacity: 0; }
.cyx-fx-q, .cyx-fx-bang, .cyx-fx-ha, .cyx-fx-z, .cyx-fx-drop, .cyx-fx-notes { transform-origin: 160px 30px; }

/* drone buddy */
.cyx-drone { position: absolute; width: 34%; left: -18%; top: 2%; animation: cyxDrone 5s ease-in-out infinite; filter: drop-shadow(0 4px 4px rgba(0,0,0,.15)); }
.cyx-prop { transform-box: fill-box; transform-origin: center; animation: cyxProp .12s linear infinite; }

/* ---- gestures ---- */
.cyx-mascot[data-g="idle"] .cyx-all, .cyx-mascot[data-g="point"] .cyx-all, .cyx-mascot[data-g="present"] .cyx-all, .cyx-mascot[data-g="think"] .cyx-all { animation: cyxFloat 3.4s ease-in-out infinite; }
.cyx-mascot[data-g="idle"] .cyx-arm-l { animation: cyxSwingL 3.4s ease-in-out infinite; }
.cyx-mascot[data-g="idle"] .cyx-arm-r { animation: cyxSwingR 3.4s ease-in-out infinite; }
.cyx-mascot .cyx-sprout { animation: cyxSprout 3s ease-in-out infinite; }

.cyx-mascot[data-g="wave"] .cyx-arm-l { animation: cyxWave 2.6s ease-in-out both; }
.cyx-mascot[data-g="wave"] .cyx-head { animation: cyxTilt 2.6s ease-in-out both; }
.cyx-mascot[data-g="wave"] .cyx-all { animation: cyxHop 2.6s ease-in-out both; }

.cyx-mascot[data-g="thumbs"] .cyx-arm-l { animation: cyxThumbs 2.4s var(--cyx-ease) both; }
.cyx-mascot[data-g="thumbs"] .cyx-thumb { opacity: 1; }
.cyx-mascot[data-g="thumbs"] .cyx-head { animation: cyxNod 2.4s ease-in-out both; }

.cyx-mascot[data-g="point"] .cyx-arm-r { animation: cyxPoint .7s var(--cyx-ease) forwards; }
.cyx-mascot[data-g="point"] .cyx-head { animation: cyxLookR .7s var(--cyx-ease) forwards; }
.cyx-mascot[data-g="present"] .cyx-arm-r { animation: cyxPresent .7s var(--cyx-ease) forwards; }
.cyx-mascot[data-g="present"] .cyx-arm-l { animation: cyxPresentL .7s var(--cyx-ease) forwards; }

.cyx-mascot[data-g="think"] .cyx-head { animation: cyxThinkHead .6s var(--cyx-ease) forwards; }
.cyx-mascot[data-g="think"] .cyx-arm-l { animation: cyxScratch 1.1s ease-in-out infinite; }
.cyx-mascot[data-g="think"] .cyx-fx-q { animation: cyxPop 1.6s ease-in-out infinite; }

.cyx-mascot[data-g="celebrate"] .cyx-all { animation: cyxJump .6s ease-in-out infinite; }
.cyx-mascot[data-g="celebrate"] .cyx-arm-l { animation: cyxCheerL .6s ease-in-out infinite; }
.cyx-mascot[data-g="celebrate"] .cyx-arm-r { animation: cyxCheerR .6s ease-in-out infinite; }
.cyx-mascot[data-g="celebrate"] .cyx-fx-spark { animation: cyxTwinkle .6s ease-in-out infinite; }
.cyx-mascot[data-g="celebrate"] .cyx-shadow { animation: cyxShadow .6s ease-in-out infinite; }

.cyx-mascot[data-g="laugh"] .cyx-all { animation: cyxShake .18s linear infinite; }
.cyx-mascot[data-g="laugh"] .cyx-head { animation: cyxLaughHead .36s ease-in-out infinite; }
.cyx-mascot[data-g="laugh"] .cyx-arm-l { animation: cyxBelly .36s ease-in-out infinite; }
.cyx-mascot[data-g="laugh"] .cyx-fx-ha { animation: cyxPop 1.2s ease-in-out infinite; }

.cyx-mascot[data-g="facepalm"] .cyx-arm-l { animation: cyxPalm 2.6s var(--cyx-ease) both; }
.cyx-mascot[data-g="facepalm"] .cyx-head { animation: cyxHeadDown 2.6s var(--cyx-ease) both; }
.cyx-mascot[data-g="facepalm"] .cyx-fx-drop { animation: cyxDrop 1.3s ease-in infinite; }

.cyx-mascot[data-g="shrug"] .cyx-arm-l { animation: cyxShrugL 2.2s ease-in-out both; }
.cyx-mascot[data-g="shrug"] .cyx-arm-r { animation: cyxShrugR 2.2s ease-in-out both; }
.cyx-mascot[data-g="shrug"] .cyx-head { animation: cyxTilt 2.2s ease-in-out both; }

.cyx-mascot[data-g="dance"] .cyx-all { animation: cyxDance .8s ease-in-out infinite; }
.cyx-mascot[data-g="dance"] .cyx-leg-l { animation: cyxStep .8s ease-in-out infinite; }
.cyx-mascot[data-g="dance"] .cyx-leg-r { animation: cyxStep .8s ease-in-out infinite .4s; }
.cyx-mascot[data-g="dance"] .cyx-arm-l { animation: cyxCheerL .8s ease-in-out infinite; }
.cyx-mascot[data-g="dance"] .cyx-arm-r { animation: cyxCheerR .8s ease-in-out infinite .4s; }
.cyx-mascot[data-g="dance"] .cyx-fx-notes { animation: cyxPop 1.6s ease-in-out infinite; }

.cyx-mascot[data-g="nod"] .cyx-head { animation: cyxNod 1.8s ease-in-out both; }
.cyx-mascot[data-g="nod"] .cyx-all { animation: cyxFloat 1.8s ease-in-out both; }

.cyx-mascot[data-g="surprised"] .cyx-all { animation: cyxStartle 1.8s var(--cyx-ease) both; }
.cyx-mascot[data-g="surprised"] .cyx-arm-l { animation: cyxShrugL 1.8s ease-in-out both; }
.cyx-mascot[data-g="surprised"] .cyx-arm-r { animation: cyxShrugR 1.8s ease-in-out both; }
.cyx-mascot[data-g="surprised"] .cyx-fx-bang { animation: cyxPop 1.8s ease-in-out both; }

.cyx-mascot[data-g="sleep"] .cyx-all { animation: cyxBreathe 3s ease-in-out infinite; }
.cyx-mascot[data-g="sleep"] .cyx-head { transform: rotate(8deg); transition: transform .6s; }
.cyx-mascot[data-g="sleep"] .cyx-fx-z { animation: cyxZ 2.4s ease-in-out infinite; }

@keyframes cyxFloat { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-5px) } }
@keyframes cyxSwingL { 0%,100% { transform: rotate(4deg) } 50% { transform: rotate(-3deg) } }
@keyframes cyxSwingR { 0%,100% { transform: rotate(-4deg) } 50% { transform: rotate(3deg) } }
@keyframes cyxSprout { 0%,100% { transform: rotate(-6deg) } 50% { transform: rotate(7deg) } }
@keyframes cyxBlink { 0%,46%,50%,100% { transform: scaleY(1) } 48% { transform: scaleY(.1) } }
@keyframes cyxTalkA { 0% { opacity: 1 } 50% { opacity: 0 } }
@keyframes cyxTalkB { 0% { opacity: 0 } 50% { opacity: 1 } }
@keyframes cyxWave { 0% { transform: rotate(0) } 14% { transform: rotate(150deg) } 28% { transform: rotate(122deg) } 42% { transform: rotate(152deg) } 56% { transform: rotate(122deg) } 70% { transform: rotate(150deg) } 88%,100% { transform: rotate(0) } }
@keyframes cyxTilt { 0%,100% { transform: rotate(0) } 20%,80% { transform: rotate(-7deg) } }
@keyframes cyxHop { 0%,100% { transform: translateY(0) } 10% { transform: translateY(-8px) } 20% { transform: translateY(0) } }
@keyframes cyxThumbs { 0% { transform: rotate(0) } 18% { transform: rotate(104deg) } 30% { transform: rotate(92deg) translateY(2px) } 42% { transform: rotate(104deg) } 54% { transform: rotate(92deg) } 66%,86% { transform: rotate(100deg) } 100% { transform: rotate(0) } }
@keyframes cyxNod { 0%,100% { transform: rotate(0) } 20% { transform: translateY(4px) rotate(3deg) } 40% { transform: translateY(0) } 60% { transform: translateY(4px) rotate(3deg) } 80% { transform: translateY(0) } }
@keyframes cyxPoint { to { transform: rotate(-98deg) } }
@keyframes cyxPresent { to { transform: rotate(-62deg) } }
@keyframes cyxPresentL { to { transform: rotate(24deg) } }
@keyframes cyxLookR { to { transform: rotate(6deg) } }
@keyframes cyxThinkHead { to { transform: rotate(-9deg) } }
@keyframes cyxScratch { 0%,100% { transform: rotate(158deg) } 50% { transform: rotate(170deg) } }
@keyframes cyxPop { 0% { opacity: 0; transform: translateY(6px) scale(.6) } 25%,75% { opacity: 1; transform: translateY(0) scale(1) } 100% { opacity: 0; transform: translateY(-6px) scale(.9) } }
@keyframes cyxJump { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-18px) } }
@keyframes cyxShadow { 0%,100% { transform: scale(1); opacity: 1 } 50% { transform: scale(.7); opacity: .6 } }
@keyframes cyxCheerL { 0%,100% { transform: rotate(140deg) } 50% { transform: rotate(118deg) } }
@keyframes cyxCheerR { 0%,100% { transform: rotate(-140deg) } 50% { transform: rotate(-118deg) } }
@keyframes cyxTwinkle { 0%,100% { opacity: .2 } 50% { opacity: 1 } }
@keyframes cyxShake { 0%,100% { transform: rotate(-3deg) } 50% { transform: rotate(3deg) } }
@keyframes cyxLaughHead { 0%,100% { transform: rotate(-4deg) translateY(0) } 50% { transform: rotate(-4deg) translateY(-3px) } }
@keyframes cyxBelly { 0%,100% { transform: rotate(-20deg) } 50% { transform: rotate(-30deg) } }
@keyframes cyxPalm { 0% { transform: rotate(0) } 22%,82% { transform: rotate(170deg) } 100% { transform: rotate(0) } }
@keyframes cyxHeadDown { 0%,100% { transform: rotate(0) } 22%,82% { transform: rotate(-6deg) translateY(4px) } }
@keyframes cyxDrop { 0% { opacity: 0; transform: translateY(-4px) } 30% { opacity: 1 } 100% { opacity: 0; transform: translateY(14px) } }
@keyframes cyxShrugL { 0%,100% { transform: rotate(0) } 25%,70% { transform: rotate(62deg) } }
@keyframes cyxShrugR { 0%,100% { transform: rotate(0) } 25%,70% { transform: rotate(-62deg) } }
@keyframes cyxDance { 0%,100% { transform: rotate(-6deg) translateX(-4px) } 50% { transform: rotate(6deg) translateX(4px) } }
@keyframes cyxStep { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-8px) } }
@keyframes cyxStartle { 0% { transform: translateY(0) } 15% { transform: translateY(-14px) scale(1.03) } 30% { transform: translateY(0) } 100% { transform: translateY(0) } }
@keyframes cyxBreathe { 0%,100% { transform: scale(1, 1) } 50% { transform: scale(1.02, .985) } }
@keyframes cyxZ { 0% { opacity: 0; transform: translate(0, 6px) } 30%,70% { opacity: 1 } 100% { opacity: 0; transform: translate(8px, -10px) } }
@keyframes cyxDrone { 0%,100% { transform: translate(0, 0) rotate(-3deg) } 25% { transform: translate(8px, -6px) rotate(3deg) } 50% { transform: translate(14px, 2px) rotate(-2deg) } 75% { transform: translate(4px, 5px) rotate(2deg) } }
@keyframes cyxProp { 0% { transform: scaleX(1) } 50% { transform: scaleX(.3) } 100% { transform: scaleX(1) } }

/* ---------- Buttons ---------- */
.cyx-btn { appearance: none; border: 0; border-radius: 10px; padding: 9px 15px; font: 700 14px/1.2 var(--cyx-font); cursor: pointer; display: inline-flex; align-items: center; gap: 7px; text-decoration: none; transition: transform .15s, background .15s, box-shadow .15s; white-space: nowrap; }
.cyx-btn:focus-visible, .cyx-x:focus-visible { outline: 3px solid var(--cyx-mint); outline-offset: 2px; }
.cyx-btn:active { transform: translateY(1px); }
.cyx-btn-primary { background: var(--cyx-forest); color: #fff; }
.cyx-btn-primary:hover { background: var(--cyx-forest-2); }
.cyx-btn-gold { background: var(--cyx-gold); color: var(--cyx-ink); }
.cyx-btn-gold:hover { background: var(--cyx-gold-d); }
.cyx-btn-soft { background: #e8f2ee; color: var(--cyx-forest); }
.cyx-btn-soft:hover { background: #d9ebe3; }
.cyx-btn-ghost { background: transparent; color: var(--cyx-muted); padding-left: 6px; padding-right: 6px; }
.cyx-btn-ghost:hover { color: var(--cyx-ink); }
.cyx-flex { flex: 1; }
.cyx-x { position: absolute; top: 8px; right: 10px; width: 32px; height: 32px; border-radius: 50%; border: 0; background: transparent; color: var(--cyx-muted); font-size: 24px; line-height: 1; cursor: pointer; }
.cyx-x:hover { background: #eef3f1; color: var(--cyx-ink); }

/* ---------- Spotlight guide ---------- */
.cyx-guide { position: fixed; inset: 0; z-index: 2147483000; font-family: var(--cyx-font); opacity: 0; transition: opacity .25s; }
.cyx-guide.is-on { opacity: 1; }
.cyx-guide-shade { position: absolute; inset: 0; background: transparent; }
.cyx-guide.is-centered .cyx-guide-shade { background: rgba(1, 26, 18, .66); backdrop-filter: blur(2px); }
.cyx-guide-hole { position: fixed; border-radius: 14px; box-shadow: 0 0 0 4px rgba(6, 214, 160, .9), 0 0 0 200vmax rgba(1, 26, 18, .62); transition: all .4s var(--cyx-ease); pointer-events: none; }
.cyx-guide-card { position: fixed; width: min(460px, calc(100vw - 32px)); display: flex; align-items: flex-end; gap: 4px; transition: top .4s var(--cyx-ease), left .4s var(--cyx-ease); }
.cyx-guide.is-centered .cyx-guide-card { left: 50% !important; top: 50% !important; transform: translate(-50%, -50%); }
.cyx-guide-bot { flex: none; margin-bottom: -6px; }
.cyx-guide-bubble { position: relative; flex: 1; background: #fff; color: var(--cyx-text); border-radius: 18px; padding: 16px 16px 12px; box-shadow: 0 18px 50px rgba(1, 26, 18, .35); }
.cyx-guide-bubble::before { content: ""; position: absolute; left: -9px; bottom: 34px; border: 10px solid transparent; border-right-color: #fff; border-left: 0; }
.cyx-guide-count { font: 800 11px/1 var(--cyx-head); letter-spacing: .08em; color: var(--cyx-forest-2); text-transform: uppercase; margin-bottom: 6px; }
.cyx-guide-title { font: 800 18px/1.25 var(--cyx-head); color: var(--cyx-ink); margin: 0 30px 6px 0; }
.cyx-guide-text { font-size: 15px; line-height: 1.55; margin: 0 0 12px; min-height: 3.1em; }
.cyx-guide-actions { display: flex; align-items: center; gap: 6px; }
.cyx-guide-card .cyx-x { right: 4px; top: 6px; }
.cyx-guide-card[data-side="dock"] { left: 12px !important; right: 12px; top: auto !important; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); width: auto; }
@media (max-width: 639px) {
  .cyx-guide-bot .cyx-mascot { --cyx-size: 84px !important; }
  .cyx-guide-title { font-size: 16px; }
  .cyx-guide-text { font-size: 14px; }
}

/* ---------- Confetti ---------- */
.cyx-confetti { position: fixed; inset: 0; pointer-events: none; z-index: 2147483600; overflow: hidden; }
.cyx-confetti i { position: absolute; top: -12px; width: 8px; height: 13px; border-radius: 2px; animation: cyxFall 2s cubic-bezier(.2,.6,.4,1) forwards; }
@keyframes cyxFall { to { transform: translate(var(--dx), 105vh) rotate(var(--rot)); opacity: .9; } }

@media (prefers-reduced-motion: reduce) {
  .cyx-mascot *, .cyx-drone, .cyx-guide-hole, .cyx-guide-card { animation: none !important; transition: none !important; }
}