/* Vibe Studio sub-pages (linked through partials/vibev-assets.hbs, after css/vibe-page.css): extra parts for the
   animated drawings vibev-w-*, vibev-p-*, vibev-g-* and vibev-m-* (same stage and animation classes as
   css/mcp-visuals.css: s3/s4 frames, h3/h4 highlights, r3-N/r4-N reveals, k0..k3 phases). Everything sits inside
   .mcpv-stage, in stage pixels. Empty elements are <i>, never <span>: the site hides span:empty (an inline Webflow rule). Never write a star followed by a slash inside these comments. */

/* ------------------------------------------------ casino site frame and overlays */
.vD-site { position: absolute; background: #10131f; border: 1px solid #2f3755; border-radius: 12px; overflow: hidden; }
.vD-topbar { display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px; background: #161a2b; border-bottom: 1px solid #2f3755; font-size: 12px; color: #c9cee3; }
.vD-logo { font-weight: 700; color: #f9c440; letter-spacing: .04em; }
.vD-bal { margin-left: auto; font-weight: 600; color: #fff; }
.vD-depbtn { background: #2ecc71; color: #0b1a10; font-weight: 700; font-size: 11px; border-radius: 6px; padding: 4px 8px; }
.vD-lobby { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 10px; }
.vD-lobby i { display: block; height: 58px; border-radius: 8px; background: linear-gradient(160deg, #2a3150, #1c2135); border: 1px solid #2f3755; }
.vD-dim { position: absolute; inset: 36px 0 0; background: rgba(6, 8, 14, .62); }
.vD-pop { position: absolute; border-radius: 14px; overflow: hidden; box-shadow: 0 18px 40px rgba(0, 0, 0, .55); display: grid; gap: 8px; align-content: start; justify-items: center; text-align: center; padding: 14px; color: #fff; }
.vD-pop.gold { background: radial-gradient(120% 80% at 50% 0%, #3a2c10 0%, #0d0b07 70%); border: 1.5px solid #c9a44c; }
.vD-pop.velvet { background: radial-gradient(120% 80% at 50% 0%, #6e1020 0%, #2a0710 75%); border: 1.5px solid #f9c440; }
.vD-pop.navy { background: linear-gradient(180deg, #151b33, #0b0e1a); border: 1.5px solid #c9a44c; }
.vD-pop.green { background: radial-gradient(120% 80% at 50% 0%, #0f4a35 0%, #06180f 75%); border: 1.5px solid #c9a44c; }
.vD-ttl { font-family: Georgia, "Times New Roman", serif; font-size: 20px; font-weight: 700; color: #f2cf6b; line-height: 1.15; }
.vD-big { font-size: 30px; font-weight: 800; color: #f9c440; line-height: 1; }
.vD-txt { font-size: 12px; color: #e3e6f2; line-height: 1.35; }
.vD-gbtn { width: 100%; border-radius: 8px; padding: 8px 10px; font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #1b1305; background: linear-gradient(180deg, #ffe08a, #c9952a); text-align: center; }
.vD-ghost { font-size: 11px; color: #aab1cc; }
.vD-x { display: block; position: absolute; top: 8px; right: 10px; width: 18px; height: 18px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .35); }
.vD-gem { display: block; width: 34px; height: 34px; transform: rotate(45deg); border-radius: 6px; background: linear-gradient(135deg, #e9f6ff, #8fd3ff 45%, #3a7bd5); box-shadow: 0 0 18px rgba(143, 211, 255, .7); margin: 6px 0 2px; }
.vD-reels { display: flex; gap: 6px; padding: 6px; border-radius: 8px; background: linear-gradient(180deg, #ffe08a, #b07d1f); }
.vD-reels b { width: 30px; height: 36px; border-radius: 5px; background: #fff; color: #c0172b; font-size: 22px; font-weight: 900; display: grid; place-items: center; }

/* ------------------------------------------------ forms */
.vD-field { display: grid; gap: 4px; width: 100%; text-align: left; }
.vD-lbl { font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #f2cf6b; }
.vD-in { position: relative; height: 30px; border-radius: 7px; border: 1px solid #3a3f58; background: #0b0d16; font-size: 12px; color: #fff; padding: 0 10px; display: flex; align-items: center; white-space: nowrap; overflow: hidden; }
.vD-in.focus { border-color: #f2cf6b; box-shadow: 0 0 0 3px rgba(242, 207, 107, .18); }
.vD-in.sel::after { content: ""; position: absolute; right: 10px; top: 11px; width: 7px; height: 7px; border-right: 2px solid #f2cf6b; border-bottom: 2px solid #f2cf6b; transform: rotate(45deg); }
.vD-ph { color: #6a7190; }
.vD-chk { display: flex; align-items: center; gap: 8px; width: 100%; font-size: 11px; color: #e3e6f2; text-align: left; }
.vD-box { flex: none; width: 16px; height: 16px; border-radius: 4px; border: 1.5px solid #f2cf6b; display: grid; place-items: center; }
.vD-box.on { background: #f2cf6b; }
.vD-box.on::after { content: ""; width: 4px; height: 8px; border-right: 2px solid #1b1305; border-bottom: 2px solid #1b1305; transform: translateY(-1px) rotate(45deg); }
.vD-caret { display: inline-block; width: 1px; height: 14px; margin-left: 1px; background: #f2cf6b; animation: vD-blink 1s steps(1) infinite; }
@keyframes vD-blink { 50% { opacity: 0; } }
.vD-kv { display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; font: 11px/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: #b9f5cf; }
.vD-kv span { color: #8d93b0; }

/* ------------------------------------------------ journey (campaign flow) */
.vD-node { position: absolute; display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px; border-radius: 10px; font-size: 13px; font-weight: 600; color: #fff; background: #232943; border: 1px solid #39405f; white-space: nowrap; }
.vD-node i { flex: none; width: 20px; height: 20px; border-radius: 6px; background: #11ced7; display: block; }
.vD-node.ev i { background: #f9c440; border-radius: 50%; }
.vD-node.pop i { background: #59a7ff; }
.vD-node.frm i { background: #f39c3d; }
.vD-node.pts i { background: #2ecc71; }
.vD-edge { position: absolute; font-size: 11px; color: #aab1cc; background: #171b2a; padding: 1px 6px; border-radius: 6px; white-space: nowrap; }
.vD-plus { position: absolute; font-size: 22px; font-weight: 800; color: #2ecc71; text-shadow: 0 0 14px rgba(46, 204, 113, .6); }

/* ------------------------------------------------ doodle art */
.vD-wheel { display: block; position: relative; width: 150px; height: 150px; border-radius: 50%; box-shadow: 0 0 0 6px #c9952a, 0 0 0 9px #3a2a0a, 0 0 26px rgba(249, 196, 64, .45);
  background: conic-gradient(#c0172b 0 45deg, #111 45deg 90deg, #f9c440 90deg 135deg, #0f7a4f 135deg 180deg, #c0172b 180deg 225deg, #111 225deg 270deg, #f9c440 270deg 315deg, #0f7a4f 315deg 360deg); }
.vD-wheel::after { content: ""; position: absolute; left: 50%; top: 50%; width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff3c4, #c9952a); }
.vD-spin { animation: vD-spin var(--T) infinite cubic-bezier(.2, .7, .1, 1); }
@keyframes vD-spin { 0% { transform: rotate(0deg); } 30% { transform: rotate(1395deg); } 100% { transform: rotate(1395deg); } }
.vD-pin { display: block; width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 18px solid #ffe08a; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .5)); margin-bottom: -10px; position: relative; z-index: 1; }
.vD-scratch { display: grid; grid-template-columns: repeat(3, 42px); gap: 8px; padding: 10px; border-radius: 10px; background: #0b2a1d; border: 1px solid #c9a44c; }
.vD-scratch b { height: 42px; border-radius: 8px; display: grid; place-items: center; font-size: 18px; font-weight: 900; color: #f9c440; background: #123d2b; }
.vD-foil { display: block; position: absolute; inset: 0; border-radius: 8px; background: repeating-linear-gradient(135deg, #c9ccd8 0 6px, #aeb3c5 6px 12px); }

/* ------------------------------------------------ pages, phones, languages */
.vD-phone { position: absolute; width: 176px; height: 340px; border-radius: 26px; border: 3px solid #39405f; background: #0d1019; overflow: hidden; padding: 22px 10px 10px; display: grid; gap: 8px; align-content: start; }
.vD-phone::before { content: ""; position: absolute; top: 8px; left: 50%; width: 52px; height: 6px; margin-left: -26px; border-radius: 4px; background: #2a3150; }
.vD-chan { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: #e3e6f2; padding: 8px 10px; border-radius: 10px; background: #232943; border: 1px solid #39405f; }
.vD-chan i { flex: none; width: 22px; height: 22px; border-radius: 6px; display: block; }
.vD-link { font: 11px/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: #11ced7; background: #141826; border: 1px solid #2f3755; border-radius: 8px; padding: 6px 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vD-tickets { display: flex; gap: 4px; flex-wrap: wrap; }
.vD-tickets i { width: 22px; height: 14px; border-radius: 3px; background: #f9c440; display: block; }
.vD-tickets i.off { background: #2a3150; }
.vD-lang { display: flex; gap: 6px; }
.vD-lang b { font-size: 11px; font-weight: 700; padding: 4px 8px; border-radius: 6px; border: 1px solid #39405f; color: #aab1cc; }
.vD-globe { width: 56px; height: 56px; border-radius: 50%; border: 2px solid #11ced7; background: radial-gradient(circle at 35% 35%, rgba(17, 206, 215, .35), rgba(17, 206, 215, .05)); position: relative; }
.vD-globe::before, .vD-globe::after { content: ""; position: absolute; inset: 6px 18px; border: 1.5px solid rgba(17, 206, 215, .7); border-radius: 50%; }
.vD-globe::after { inset: 20px 4px; }
.vD-lock { display: inline-block; width: 12px; height: 9px; border-radius: 2px; background: #aab1cc; position: relative; margin-right: 6px; vertical-align: -1px; }
.vD-lock::before { content: ""; position: absolute; left: 2px; top: -6px; width: 8px; height: 8px; border: 1.5px solid #aab1cc; border-bottom: 0; border-radius: 5px 5px 0 0; box-sizing: border-box; }
.vD-tmpl { display: grid; gap: 4px; justify-items: center; padding: 8px 6px; border-radius: 10px; background: #232943; border: 1px solid #39405f; font-size: 11px; font-weight: 600; color: #e3e6f2; }
.vD-tmpl > i { display: block; width: 100%; height: 44px; border-radius: 6px; }
.vD-cur { display: block; position: absolute; width: 0; height: 0; border-left: 7px solid transparent; border-right: 7px solid transparent; border-bottom: 16px solid #fff; transform: rotate(-30deg); filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .6)); }

/* glow of an element during its phase (3 phases) */
@keyframes vD-glow3 { 0%, 33.3%, 100% { box-shadow: none; } 3%, 30% { box-shadow: 0 0 0 2px #11ced7, 0 0 18px rgba(17, 206, 215, .55); } }
.mcpv-stage .g3 { animation: vD-glow3 var(--T) infinite both; }
.mcpv-stage .g3.k1 { animation-delay: calc(var(--T) * -2 / 3); }
.mcpv-stage .g3.k2 { animation-delay: calc(var(--T) * -1 / 3); }

@media (prefers-reduced-motion: reduce) {
  .mcpv-stage .vD-spin, .mcpv-stage .vD-caret { animation: none !important; }
}