/* Avenzoar demo game — scoped under .avg-root. Slide coordinates (1920×1080
   canvas): the root is placed by the slide fragment; everything inside is
   positioned relative to it. */
.avg-root{position:absolute;pointer-events:none;color:#0F0B31;font-family:'Inter Tight',system-ui,sans-serif;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none}
.avg-root *{box-sizing:border-box}
.avg-root button{font-family:inherit}
.avg-root .avg-csv,.avg-root .avg-ctrl,.avg-root .avg-langs,.avg-root .avg-phone-wrap{pointer-events:auto}

/* ── controls ── */
.avg-ctrl{position:absolute;left:1247px;top:0;display:flex;gap:14px}
.avg-exit,.avg-stop{height:52px;padding:0 24px;border-radius:26px;border:2px solid #E3E8F6;background:#fff;color:#0F0B31;font-size:22px;font-weight:800;cursor:pointer;box-shadow:0 10px 24px -14px rgba(15,11,49,.4)}
.avg-stop{color:#DC2626}
.avg-stop:disabled{opacity:.35;cursor:default}
.avg-exit:hover,.avg-stop:not(:disabled):hover{background:#F4F6FD}
.avg-langs{position:absolute;left:0;top:500px;display:flex;gap:8px}
.avg-lang{height:44px;min-width:76px;padding:0 20px;border-radius:22px;border:2px solid #E3E8F6;background:#fff;color:#5A6178;font-size:20px;font-weight:800;cursor:pointer}
.avg-lang.is-on{background:#2563EB;border-color:#2563EB;color:#fff}

/* ── live CSV ── */
.avg-csv{position:absolute;left:0;top:556px;width:900px;height:386px;background:#14132E;border-radius:32px;padding:26px 30px;box-shadow:0 40px 80px -40px rgba(15,11,49,.5);overflow:hidden}
.avg-csv-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.avg-csv-t{font-size:20px;font-weight:800;letter-spacing:.12em;color:#F5A623}
.avg-csv-n{font-size:20px;font-weight:800;color:#8B8DA8}
.avg-csv-body{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:21px;line-height:1.35}
.avg-csv-body p{margin:0}
.avg-csv-rows p{margin-top:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.avg-csv-h{color:#8B8DA8}
.avg-csv-dots{color:#8B8DA8;margin-top:6px!important;animation:avg-blink 2s infinite}
.avg-g{color:#6fe39a}.avg-r{color:#ff8f7a}.avg-w{color:#D6DCEF}.avg-b{font-weight:700}

/* ── phone (340×644 design box, scaled) ── */
.avg-phone-wrap{position:absolute;left:1262px;top:70px;width:442px;height:837px}
.avg-phone{width:340px;border-radius:46px;background:#14132E;padding:12px;box-shadow:0 30px 80px rgba(15,11,49,.28);transform:scale(1.3);transform-origin:0 0}
.avg-screen{position:relative;height:620px;border-radius:36px;overflow:hidden;background:linear-gradient(180deg,#fff 0%,#EAF2FB 100%);direction:ltr;transform-origin:50% 46%;font-size:14px}
.avg-screen.avg-shake{animation:avg-shake .9s both}
.avg-notch{position:absolute;top:10px;left:50%;transform:translateX(-50%);width:96px;height:22px;border-radius:999px;background:#14132E;z-index:40}
.avg-stripes{position:absolute;inset:0;background-size:100% 240px;animation:avg-slope 1.55s linear infinite;animation-play-state:paused}
.avg-s1{opacity:.32;background-image:repeating-linear-gradient(115deg,transparent 0 46px,rgba(96,165,250,.14) 46px 52px)}
.avg-s2{opacity:.32;background-image:repeating-linear-gradient(245deg,transparent 0 46px,rgba(96,165,250,.12) 46px 52px);animation-duration:2.5s}
.avg-s3{opacity:.16;background-image:repeating-linear-gradient(115deg,transparent 0 90px,rgba(96,165,250,.12) 90px 96px);animation-duration:3.2s}
.avg-screen.is-play .avg-stripes,.avg-screen.is-play .avg-obs{animation-play-state:running}
.avg-haze{position:absolute;inset:0;background:linear-gradient(180deg,rgba(191,219,254,.22) 0%,rgba(255,255,255,0) 30%,rgba(255,255,255,0) 64%,rgba(59,91,219,.08) 100%);pointer-events:none}
.avg-obs{position:absolute;top:0;font-size:26px;z-index:1;filter:saturate(.9);animation:avg-fall var(--dur) linear infinite;animation-play-state:paused}
.avg-line{display:none;position:absolute;top:0;width:3px;height:90px;border-radius:2px;background:linear-gradient(180deg,transparent,rgba(96,165,250,.85));z-index:18;animation:avg-line .34s linear infinite}
.avg-screen.is-boost .avg-line{display:block}

/* HUD */
.avg-hud{position:absolute;top:42px;left:12px;right:12px;z-index:30;display:flex;align-items:center;justify-content:space-between;gap:6px}
.avg-coins{background:#fff;border-radius:999px;border:2px solid #F5A623;padding:4px 12px;font-weight:900;font-size:14px;color:#8a5a00;display:inline-flex;align-items:center;gap:5px}
.avg-dist{font-weight:900;font-size:13px;color:#5A6178;background:#fff;border-radius:999px;padding:4px 10px}
.avg-screen.is-panic .avg-dist{color:#DC2626;animation:avg-pulse .5s infinite}
.avg-streak{font-weight:800;font-size:13px;color:#D97706}
.avg-bar{width:76px;height:10px;border-radius:99px;background:rgba(20,19,46,.15);overflow:hidden}
.avg-bar i{display:block;height:100%;border-radius:99px;background:#16A34A}
.avg-screen.is-panic .avg-bar i{background:#DC2626}
.avg-snd{border:none;cursor:pointer;background:#fff;border-radius:999px;width:28px;height:28px;font-size:13px;display:inline-flex;align-items:center;justify-content:center;box-shadow:0 2px 8px rgba(15,11,49,.12)}
.avg-coin{display:inline-block;border-radius:50%;flex-shrink:0;background:radial-gradient(circle at 35% 30%,#FFE985,#FFC94A 55%,#E8A317);border:1.8px solid #D08A00;box-shadow:inset 0 -1px 2px rgba(0,0,0,.2),0 1px 2px rgba(0,0,0,.18);vertical-align:-2px}

/* sentence card */
.avg-card-host{position:absolute;top:66px;left:14px;right:14px;z-index:25}
.avg-card{background:#fff;border-radius:16px;padding:14px;font-size:14.5px;font-weight:700;color:#0F0B31;line-height:1.65;text-align:center;box-shadow:0 10px 26px rgba(15,11,49,.14)}
.avg-fly,.avg-fx{position:absolute;inset:0;pointer-events:none}
.avg-fly{z-index:33}.avg-fx{z-index:31}
.avg-fc{position:absolute;top:310px}
.avg-amt{position:absolute;top:290px;font-weight:900;font-size:21px;color:#D97706;text-shadow:0 2px 10px rgba(255,255,255,.9);display:inline-flex;align-items:center;gap:5px;opacity:0}
.avg-close{position:absolute;top:38%;left:0;right:0;z-index:34;text-align:center;pointer-events:none}
.avg-closetxt{font-weight:900;font-size:19px;color:#D97706;text-shadow:0 2px 10px rgba(255,255,255,.9)}

/* monster */
.avg-mon{position:absolute;width:86px;z-index:20;top:104%;left:38%;transition:left .3s ease-out;will-change:top,transform}
.avg-mon.is-eat{transition:left .3s ease-out;animation:avg-pounce .45s ease-out}
.avg-mon.is-win{transition:top 1.1s ease-in,left .3s ease-out}
.avg-shadow{position:absolute;bottom:-4px;left:12%;width:76%;height:14px;border-radius:50%;background:rgba(30,40,90,.16);filter:blur(3px)}
.avg-mon-img{position:relative;display:block;width:100%;pointer-events:none}
.avg-mon-img.is-panic{animation:avg-wob .4s infinite}
.avg-mon-img.is-trip{animation:avg-trip .4s}

/* surfer */
.avg-surf{position:absolute;width:96px;top:50%;left:40%;z-index:15;transition:opacity .22s .2s,transform .22s .2s}
.avg-surf.is-win{transition:top 1s ease-in,opacity .22s .2s,transform .22s .2s}
.avg-surf.is-eaten{opacity:0;transform:scale(.45)}
.avg-surf-img{display:block;width:96px;pointer-events:none;transition:transform .25s cubic-bezier(.3,1.5,.5,1)}
.avg-sw{animation:avg-bobY 1.2s linear infinite}
.avg-surf-img.is-c{animation:avg-carve 2.4s ease-in-out infinite}
.avg-surf-img.is-l{transform:rotate(-10deg)}
.avg-surf-img.is-r{transform:rotate(10deg)}
.avg-surf-img.is-boost{transform:scale(1.1)}
.avg-trail{position:absolute;bottom:-6px;width:3px;height:34px;border-radius:2px;background:rgba(96,165,250,.5);animation:avg-trail .75s linear infinite}
.avg-shadow2{position:absolute;bottom:-2px;left:14%;width:72%;height:12px;border-radius:50%;background:rgba(30,40,90,.14);filter:blur(3px)}
.avg-spray{position:absolute;bottom:4px;left:46%;width:9px;height:9px;border-radius:99px;background:#fff;box-shadow:0 0 6px rgba(96,165,250,.6);animation:avg-spray calc(.7s + var(--i) * .1s) ease-out infinite;animation-delay:calc(var(--i) * .12s)}
.avg-spray.is-b{display:none;animation-duration:calc(.45s + var(--i) * .1s)}
.avg-surf.is-boost .avg-spray.is-b{display:block}

/* impact fx */
.avg-flash{position:absolute;inset:0;background:#fff;z-index:32;opacity:0}
.avg-burst{position:absolute;top:52%;z-index:31;width:10px;height:10px;border-radius:99px;background:#fff;box-shadow:0 0 8px rgba(96,165,250,.7);opacity:0}
.avg-burst.is-sp{width:18px;height:5px;border-radius:2px;background:#5B9DF7;box-shadow:none}

/* answer zones */
.avg-zones{position:absolute;inset:0;z-index:24;pointer-events:none}
.avg-mid{position:absolute;left:50%;top:175px;bottom:86px;border-left:2px dashed rgba(15,11,49,.1)}
.avg-zone{position:absolute;top:160px;bottom:0;width:50%;cursor:pointer;pointer-events:auto;touch-action:manipulation}
.avg-zone.is-neg{left:0}.avg-zone.is-pos{right:0}
.avg-ze{position:absolute;top:32%;left:50%;font-size:40px;opacity:.38;transform:translateX(-50%) rotate(8deg)}
.is-neg .avg-ze{transform:translateX(-50%) rotate(-8deg)}
.avg-zl{position:absolute;top:47%;left:50%;font-weight:900;font-size:23px;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap;transform:translateX(-50%) rotate(8deg);color:rgba(22,163,74,.26)}
.is-neg .avg-zl{transform:translateX(-50%) rotate(-8deg);color:rgba(220,38,38,.26)}
.avg-zone:active{transform:scale(.97)}
.avg-hand{position:absolute;top:64%;left:50%;font-size:36px;z-index:26;pointer-events:none;filter:drop-shadow(0 4px 8px rgba(15,11,49,.3));animation:avg-hand 2.6s ease-in-out infinite}

/* overlays */
.avg-overlay{position:absolute;inset:0;z-index:36;display:flex;flex-direction:column;align-items:center;pointer-events:auto}
.avg-overlay:empty{display:none}
.avg-overlay.is-ready{justify-content:center;padding:22px;background:rgba(20,19,46,.5);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}
.avg-overlay.is-end{justify-content:flex-end;padding:22px;background:rgba(20,19,46,.72)}
.avg-ready{background:#fff;border-radius:24px;padding:22px 20px;width:100%;text-align:center}
.avg-ready h3{margin:10px 0 6px;font-size:25px;font-weight:900;letter-spacing:-.02em}
.avg-ready p{margin:0 0 16px;font-size:14px;line-height:1.5;color:#5A6178}
.avg-ready-hero{display:flex;justify-content:center;align-items:flex-end;gap:6px;height:100px}
.avg-ready-hero img{height:100px;width:100px;object-fit:contain;animation:avg-bob 1.2s ease-in-out infinite}
.avg-ready-hero .avg-ready-m{animation-delay:-.6s}
.avg-btn{width:100%;border:none;border-radius:16px;background:#2563EB;color:#fff;font-weight:900;font-size:20px;padding:15px;cursor:pointer;box-shadow:0 5px 0 #1D4ED8;touch-action:manipulation}
.avg-btn:active{transform:translateY(3px);box-shadow:0 2px 0 #1D4ED8}
.avg-btn.is-ghost{background:#EEF2FF;color:#2563EB;box-shadow:none;margin-top:10px;font-size:16px;padding:12px}
.avg-end{background:#fff;border-radius:20px;padding:16px;width:100%;text-align:center}
.avg-hero{position:relative;height:136px;border-radius:14px;overflow:hidden;margin-bottom:12px;background:linear-gradient(180deg,#BFDBFE 0%,#E8F3FE 52%,#fff 100%)}
.avg-h-eat{position:absolute;bottom:2px;left:50%;margin-left:-52px;width:104px;animation:avg-pop .5s cubic-bezier(.2,1.4,.4,1) both .1s}
.avg-h-sad{position:absolute;bottom:2px;left:18px;width:84px;animation:avg-rise .5s cubic-bezier(.2,1.4,.4,1) both .2s}
.avg-h-win{position:absolute;bottom:2px;right:16px;width:106px;animation:avg-bob 1.1s ease-in-out infinite .35s}
.avg-tear{position:absolute;bottom:58px;left:72px;font-size:13px;opacity:0;animation:avg-tear 1.25s ease-in infinite .6s}
.avg-conf{position:absolute;top:0;width:6px;height:9px;border-radius:2px;opacity:.85;animation:avg-conf 2s linear infinite}
.avg-end-t{font-size:21px;font-weight:850;margin:0 0 6px}
.avg-end-s{font-size:13px;color:#5A6178;margin:0 0 6px}
.avg-end-p{font-size:13px;font-weight:700;color:#2563EB;margin:0 0 6px;line-height:1.6}
.avg-end-c{font-weight:900;color:#8a5a00;margin:0 0 14px;display:flex;align-items:center;justify-content:center;gap:6px}

/* keyframes */
@keyframes avg-slope{from{background-position-y:-240px}to{background-position-y:0}}
@keyframes avg-fall{from{transform:translateY(-60px)}to{transform:translateY(660px)}}
@keyframes avg-line{from{transform:translateY(700px);opacity:0}50%{opacity:.55}to{transform:translateY(-90px);opacity:0}}
@keyframes avg-pulse{50%{transform:scale(1.15)}}
@keyframes avg-blink{50%{opacity:.35}}
@keyframes avg-shake{0%{transform:none}10%{transform:translateX(-9px)}20%{transform:translateX(9px)}30%{transform:translateX(-7px)}40%{transform:translateX(7px)}50%{transform:translateX(-3px) scale(1.08)}60%{transform:translateX(3px) scale(1.08)}100%{transform:scale(1.03)}}
@keyframes avg-pounce{from{transform:scale(1.85)}to{transform:scale(1.38)}}
@keyframes avg-wob{0%,100%{transform:rotate(0)}25%{transform:rotate(-6deg)}75%{transform:rotate(6deg)}}
@keyframes avg-trip{0%{transform:rotate(0)}25%{transform:rotate(-8deg)}50%{transform:rotate(8deg)}75%{transform:rotate(-4deg)}100%{transform:rotate(0)}}
@keyframes avg-carve{0%,100%{transform:translateX(-12px) rotate(-6deg)}50%{transform:translateX(12px) rotate(6deg)}}
@keyframes avg-bobY{0%,50%,100%{transform:translateY(0)}25%,75%{transform:translateY(-3px)}}
@keyframes avg-trail{from{transform:translateY(0);opacity:.55}to{transform:translateY(46px);opacity:0}}
@keyframes avg-spray{from{transform:translate(calc((var(--i) - 1) * 8px),8px) scale(.7);opacity:.9}to{transform:translate(calc((var(--i) - 1) * 22px),calc(42px + var(--i) * 8px)) scale(1.5);opacity:0}}
@keyframes avg-hand{0%{opacity:0;transform:translate(-64px,8px)}12%{opacity:1;transform:translate(-64px,-6px)}26%{opacity:1;transform:translate(-64px,8px)}55%{opacity:1;transform:translate(64px,8px)}68%{opacity:1;transform:translate(64px,-6px)}100%{opacity:1;transform:translate(64px,8px)}}
@keyframes avg-bob{50%{transform:translateY(-7px)}}
@keyframes avg-pop{from{transform:scale(.5);opacity:0}to{transform:none;opacity:1}}
@keyframes avg-rise{from{transform:translateY(46px);opacity:0}to{transform:none;opacity:1}}
@keyframes avg-tear{0%{transform:translateY(0);opacity:0}50%{opacity:1}100%{transform:translateY(24px);opacity:0}}
@keyframes avg-conf{from{transform:translateY(-12px) rotate(0)}to{transform:translateY(148px) rotate(200deg)}}

@media (prefers-reduced-motion:reduce){
  .avg-root *{animation:none!important}
  .avg-root .avg-mon,.avg-root .avg-surf{transition-duration:.01s!important}
}
.avg-reduce *{animation:none!important}