/* Homepage hero: the reel wall (game genres spin, stop on .io, open the DEVORA arena). Built from _options/. */

.hz-kt { display: inline-flex; align-items: center; height: 28px; padding: 0 10px; border-radius: 7px; background: rgba(31,190,212,.14); color: #1fbed4; font: 800 .62rem Inter, sans-serif; letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; }
.hz { position: relative; z-index: 1; margin: 0; width: 100%; max-width: 720px; justify-self: center; aspect-ratio: 1; container-type: inline-size; }
.hz * { box-sizing: border-box; }
.hz .pel { position: absolute; inset: 0; }
.hz .pel i { position: absolute; left: var(--x); top: var(--y); width: 1.3cqw; height: 1.3cqw; min-width: 5px; min-height: 5px; border-radius: 50%; background: var(--c); box-shadow: 0 0 1.6cqw var(--c); opacity: .85; animation: hz-bob 7s ease-in-out infinite; animation-delay: var(--d); }
.hz .cell { position: absolute; left: var(--x); top: var(--y); width: var(--s); aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; background: #111; box-shadow: 0 0 0 max(2px, .75cqw) var(--c), 0 0 4cqw color-mix(in srgb, var(--c) 55%, transparent), 0 2cqw 5cqw rgba(0,0,0,.55); animation: hz-float 9s ease-in-out infinite; animation-delay: var(--d, 0s); }
.hz .cell img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }
.hz .cell b { position: absolute; left: 50%; bottom: 14%; translate: -50% 0; padding: .25em .55em; border-radius: 99px; background: rgba(8,9,11,.78); color: #fff; font: 800 max(9px, calc(var(--s) * .1))/1 Orbitron, sans-serif; letter-spacing: .02em; white-space: nowrap; backdrop-filter: blur(4px); }
.hz .note { position: absolute; display: inline-flex; align-items: center; gap: .5em; padding: .55em .9em; border-radius: 10px; background: #fff; color: #0e0f11; font: 700 max(12px, 2.25cqw)/1.1 Inter, sans-serif; white-space: nowrap; box-shadow: 0 1.5cqw 4cqw rgba(0,0,0,.45); z-index: 6; animation: hz-float 8s ease-in-out infinite; }
.hz .note small { display: block; color: #6b6e76; font-weight: 600; font-size: .78em; margin-top: .2em; }
.hz .note .n { display: grid; place-items: center; width: 1.9em; height: 1.9em; border-radius: 7px; background: #0e0f11; color: var(--c, #1fbed4); font: 800 .78em Orbitron, sans-serif; }
.hz .coin { position: absolute; width: var(--s); filter: drop-shadow(0 1.5cqw 3cqw rgba(0,0,0,.5)) drop-shadow(0 0 3cqw rgba(31,190,212,.45)); animation: hz-coin 6s ease-in-out infinite; z-index: 5; }
@keyframes hz-bob { 50% { transform: translate(.6cqw, -1cqw); } }
@keyframes hz-float { 50% { transform: translateY(-1.1cqw); } }
@keyframes hz-coin { 0%, 100% { transform: translateY(0) rotate(-8deg); } 50% { transform: translateY(-1.6cqw) rotate(6deg); } }
@keyframes hz-spin { to { rotate: 1turn; } }
@media (prefers-reduced-motion: reduce) { .hz *, .hz *::before, .hz *::after { animation: none !important; } }
@media (max-width: 900px) { .hz { max-width: 560px; margin-top: 8px; } }
/* ---------- Left side: a bigger headline, one spacing rhythm, a calmer definition card ---------- */
@media (min-width: 901px) {
  #top.screen { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2.5rem, 4.5vw, 4.5rem); }
  #top .copy { max-width: 620px; }
}
/* Headline at 92% of the column (8% smaller than before); the definition card below takes the same width, so their edges line up */
#top .hx-title .hx-l1 { font-size: calc(min(100cqw, 620px) * .12422) !important; }
#top .hx-title .hx-l2 { font-size: calc(min(100cqw, 620px) * .16694) !important; }
@media (min-width: 901px) {
  #top .hx-title .hx-l1 { font-size: calc(min(100cqw, 620px) * .92 * .12422) !important; }
  #top .hx-title .hx-l2 { font-size: calc(min(100cqw, 620px) * .92 * .16694) !important; }
  #top .copy > .hx-def { width: calc(min(100cqw, 620px) * .92); }
}
.investor-build #top .title.hx-title { margin-top: 30px !important; gap: .1em; line-height: .9; }
#top .hx-def { width: 100%; margin-top: 34px; gap: 0; padding: 0; border-radius: 16px; background: rgba(255,255,255,.035); box-shadow: inset 0 0 0 1px rgba(255,255,255,.07); }
#top .hx-def::before { width: 3px; }
#top .hx-def-head { gap: 6px 12px; padding: 22px 26px 0 28px; }
#top .hx-def-head b { color: #fff; font-size: 1.15rem; letter-spacing: .08em; }
#top .hx-def-head span { font-size: .92rem; }
.investor-build #top .copy .hx-def-text { margin: 12px 0 0; padding: 0 26px 22px 28px; color: var(--text-2); font-size: clamp(1.08rem, 1.3vw, 1.22rem); line-height: 1.55; text-wrap: pretty; }
#top .hx-def-foot { margin: 0; gap: 12px; padding: 14px 18px 14px 28px; border-top: 1px solid rgba(255,255,255,.07); background: rgba(0,0,0,.18); font: 700 .66rem Inter, sans-serif; letter-spacing: .16em; text-transform: uppercase; }
#top .hx-def-foot img { height: 22px; }
#top .hx-def-tag { margin-left: auto; height: 26px; padding: 0 11px; }
#top .copy > .actions { margin-top: 34px; gap: 12px; }
#top .actions .cr-cta, #top .actions .cr-cta2 { height: 56px; }
@media (max-width: 560px) {
  .investor-build #top .title.hx-title { margin-top: 20px !important; }
  #top .hx-def { margin-top: 24px; border-radius: 14px; }
  #top .hx-def-head { padding: 16px 16px 0 18px; }
  #top .hx-def-head b { font-size: 1rem; }
  .investor-build #top .copy .hx-def-text { margin-top: 8px; padding: 0 16px 16px 18px; font-size: 1rem; }
  #top .hx-def-foot { padding: 11px 12px 11px 18px; gap: 8px; font-size: .58rem; }
  #top .hx-def-foot img { height: 18px; }
  #top .hx-def-foot > span:first-child { display: none; }
  #top .hx-def-tag { height: 22px; padding: 0 8px; font-size: .56rem; }
  #top .copy > .actions { margin-top: 24px; }
  #top .actions .cr-cta, #top .actions .cr-cta2 { height: 52px; }
}
.hk3 { display: inline-flex; align-items: center; gap: 12px; margin: 0; padding: 5px 16px 5px 5px; border-radius: 99px; background: linear-gradient(90deg, rgba(31,190,212,.14), rgba(139,107,255,.08)); box-shadow: inset 0 0 0 1px rgba(31,190,212,.25); }
.hk3-av { display: flex; }
.hk3-av img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px #0e0f11; background: #222; }
.hk3-av img + img { margin-left: -9px; }
.hk3 b { color: #fff; font: 700 .9rem Inter, sans-serif; white-space: nowrap; }
.hk3 b span { color: #1fbed4; }
@media (max-width: 480px) { .hk3 b { font-size: .8rem; } .hk3-av img { width: 26px; height: 26px; } }
#top.screen { isolation: isolate; }
#top > .copy, #top > .hz { position: relative; z-index: 2; }
.hzbg { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.hzbg > * { position: absolute; }
.hzbg .dots { inset: 0; }
.hzbg .dots i { position: absolute; left: var(--x); top: var(--y); width: var(--z); height: var(--z); border-radius: 50%; background: var(--c); box-shadow: 0 0 12px var(--c); opacity: .55; animation: hz-bob 9s ease-in-out infinite; animation-delay: var(--d); }
/* Readability: the copy side always sits on near-black. */
.hzbg .shade { inset: 0; background: linear-gradient(90deg, #0e0f11 0%, rgba(14,15,17,.92) 30%, rgba(14,15,17,.35) 55%, transparent 75%), linear-gradient(180deg, transparent 75%, #0e0f11); }
@media (max-width: 900px) { .hzbg .shade { background: linear-gradient(180deg, #0e0f11 0%, rgba(14,15,17,.88) 45%, rgba(14,15,17,.3) 70%, rgba(14,15,17,.6) 100%); } }
@media (prefers-reduced-motion: reduce) { .hzbg *, .hzbg *::before { animation: none !important; } }
.hzbg3 { background: #0e0f11; }
.hzbg3 .art { inset: -40px; width: calc(100% + 80px); height: calc(100% + 80px); object-fit: cover; object-position: 70% 50%; filter: blur(14px) saturate(1.35); opacity: .8; animation: hzbg3-pan 30s ease-in-out infinite alternate; }
@keyframes hzbg3-pan { to { transform: scale(1.08) translateX(-20px); } }
.hzbg3 .tint { inset: 0; background: radial-gradient(circle at 75% 45%, transparent, rgba(14,15,17,.55) 60%), linear-gradient(180deg, rgba(139,107,255,.12), rgba(31,190,212,.08)); }.hzbg1 { background: #0b1013; }
.hzbg1 .grid { inset: 0; background: linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px) 0 0 / 46px 46px, linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px) 0 0 / 46px 46px; }
.hzbg1 .glow { inset: 0; background: radial-gradient(circle at 74% 50%, rgba(31,190,212,.22), transparent 45%); }
.hzbg1 .bc { left: var(--x); top: var(--y); width: var(--s); height: var(--s); translate: -50% -50%; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 8px var(--c), 0 0 80px var(--c); filter: blur(6px); opacity: .35; }
.hzbg1 .bc img { width: 100%; height: 100%; object-fit: cover; }
.w16-bgarena { position: absolute; inset: 0; z-index: 1; pointer-events: none; animation: w16-bg 18s infinite both; }
@keyframes w16-bg { 0%, 35% { opacity: 0; } 41%, 81% { opacity: 1; } 87%, 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .w16-bgarena { animation: none; opacity: 1; } }
.hk { margin: 0; } @media (prefers-reduced-motion: reduce) { .hk *, .hk::before { animation: none !important; } }

.hz1 .a1-glow { position: absolute; inset: 6%; border-radius: 50%; background: radial-gradient(closest-side, rgba(31,190,212,.35), rgba(139,107,255,.18) 60%, transparent); filter: blur(30px); }
.hz1 .a1-ring { position: absolute; inset: 3%; border-radius: 50%; background: conic-gradient(from 0deg, #1fbed4, #8b6bff, #ff4fd8, #ffb020, #2ee07f, #1fbed4); -webkit-mask: radial-gradient(closest-side, transparent calc(100% - 3px), #000 calc(100% - 2px)); mask: radial-gradient(closest-side, transparent calc(100% - 3px), #000 calc(100% - 2px)); opacity: .9; animation: hz-spin 18s linear infinite; }
.hz1 .a1-arena { position: absolute; inset: 5%; border-radius: 50%; overflow: hidden; background: radial-gradient(circle at 45% 55%, rgba(31,190,212,.16), transparent 60%), #0b1013; box-shadow: inset 0 0 8cqw rgba(0,0,0,.8), 0 0 0 1px rgba(255,255,255,.06); }
.hz1 .a1-grid { position: absolute; inset: 0; background: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px) 0 0 / 5.2cqw 5.2cqw, linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px) 0 0 / 5.2cqw 5.2cqw; }
.hz1 .a1-path { position: absolute; inset: 0; width: 100%; height: 100%; }
.hz1 .a1-path path { fill: none; stroke: #1fbed4; stroke-width: .5; stroke-dasharray: 1.4 1.4; opacity: .8; animation: a1-dash 1.4s linear infinite; }
@keyframes a1-dash { to { stroke-dashoffset: -2.8; } }
.hz1 .a1-me { z-index: 2; animation-duration: 7s; }
.hz1 .a1-me b { font-size: max(12px, calc(var(--s) * .085)); }
.hz1 .a1-hud { position: absolute; left: 50%; bottom: 1%; translate: -50% 0; z-index: 6; display: flex; align-items: center; gap: 1.6cqw; padding: 1.2cqw 1.6cqw 1.2cqw 1.2cqw; border-radius: 14px; background: rgba(18,19,22,.92); backdrop-filter: blur(8px); box-shadow: 0 0 0 1px rgba(46,224,127,.35), 0 2cqw 5cqw rgba(0,0,0,.55), 0 0 5cqw rgba(46,224,127,.18); white-space: nowrap; }
.hz1 .a1-hold { width: max(30px, 6cqw); aspect-ratio: 1; }
.hz1 .a1-hold svg { width: 100%; height: 100%; rotate: -90deg; }
.hz1 .a1-hold circle { fill: none; stroke: rgba(255,255,255,.1); stroke-width: 3.5; }
.hz1 .a1-hold circle.p { stroke: #2ee07f; stroke-linecap: round; stroke-dasharray: 94.2; stroke-dashoffset: 94.2; animation: a1-hold 3.2s ease-in-out infinite; }
@keyframes a1-hold { 70%, 100% { stroke-dashoffset: 0; } }
.hz1 .a1-hud small { display: block; color: var(--muted); font: 700 max(9px, 1.45cqw) Inter, sans-serif; letter-spacing: .12em; text-transform: uppercase; }
.hz1 .a1-hud b { color: #fff; font: 800 max(15px, 3.1cqw)/1.1 Orbitron, sans-serif; }
.hz1 .a1-hud em { padding: .45em .7em; border-radius: 8px; background: rgba(46,224,127,.14); color: #2ee07f; font: 800 max(11px, 1.9cqw) Orbitron, sans-serif; font-style: normal; }

.hz3 { overflow: visible; }
.hz3 .g3-glow { position: absolute; inset: 10%; border-radius: 50%; background: radial-gradient(closest-side, rgba(139,107,255,.32), rgba(31,190,212,.2) 55%, transparent); filter: blur(30px); }
.hz3 .g3-wall { position: absolute; inset: -2% -6% -2% 2%; display: grid; grid-template-columns: 1fr 1.5fr 1fr; gap: 2.4cqw; transform: perspective(1400px) rotateY(-12deg) rotateX(5deg) rotateZ(-6deg); -webkit-mask: radial-gradient(ellipse 62% 60% at 50% 50%, #000 55%, transparent 100%); mask: radial-gradient(ellipse 62% 60% at 50% 50%, #000 55%, transparent 100%); }
.hz3 .g3-col { display: grid; align-content: start; gap: 2.4cqw; translate: 0 var(--o); animation: g3-drift 14s ease-in-out infinite alternate; }
.hz3 .g3-col:nth-child(2) { animation-delay: -5s; } .hz3 .g3-col:nth-child(3) { animation-delay: -9s; }
@keyframes g3-drift { to { transform: translateY(3cqw); } }
.hz3 .g3-t { position: relative; aspect-ratio: 1; border-radius: 2.4cqw; overflow: hidden; background: #17181c; box-shadow: 0 0 0 1px rgba(255,255,255,.07); }
.hz3 .g3-t.art img { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(1.05) brightness(.82); }
.hz3 .g3-t.soon { display: grid; place-content: center; justify-items: center; gap: .5cqw; text-align: center; background: linear-gradient(160deg, #1b1c21, #131417); }
.hz3 .g3-ico { display: grid; place-items: center; width: 7cqw; aspect-ratio: 1; margin-bottom: .6cqw; border-radius: 1.6cqw; background: rgba(255,255,255,.06); }
.hz3 .g3-ico svg { width: 55%; fill: none; stroke: #8a8d95; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.hz3 .g3-t.soon b { color: #c9cbd0; font: 700 max(10px, 2.1cqw) Inter, sans-serif; }
.hz3 .g3-t.soon small { color: #6c6f77; font: 800 max(7px, 1.1cqw) Inter, sans-serif; letter-spacing: .14em; text-transform: uppercase; }
.hz3 .g3-hero { aspect-ratio: 1.05; display: block; box-shadow: 0 0 0 .5cqw #1fbed4, 0 0 9cqw rgba(31,190,212,.55), 0 3cqw 6cqw rgba(0,0,0,.6); z-index: 2; }
.hz3 .g3-hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; scale: 1.02; }
.hz3 .g3-live { position: absolute; left: 6%; top: 5%; display: inline-flex; align-items: center; gap: .5em; padding: .5em .8em; border-radius: 99px; background: rgba(8,9,11,.8); color: #2ee07f; font: 800 max(8px, 1.3cqw) Inter, sans-serif; letter-spacing: .14em; text-transform: uppercase; }
.hz3 .g3-live i { width: .6em; height: .6em; border-radius: 50%; background: #2ee07f; box-shadow: 0 0 8px #2ee07f; }
.hz3 .g3-play { position: absolute; left: 50%; bottom: 6%; translate: -50% 0; display: inline-flex; align-items: center; gap: .5em; padding: .7em 1.1em; border-radius: 10px; background: #1fbed4; color: #0e0f11; font: 800 max(10px, 1.8cqw) Inter, sans-serif; white-space: nowrap; }
.hz3 .g3-play svg { width: 1em; fill: currentColor; }

/* ---------- 16 · Reel wall — one 18s loop:
   0–28 reels spin · 28–35 .io locks · 35–42 dive into the game · 42–80 the arena, labels 01→02→03 ·
   80–90 back out of the game into .io · 90–100 the wall settles, ready to spin again ---------- */
.hz16 { --T: 18s; overflow: visible; }
.hz16 .w16-wallwrap, .hz16 .w16-game { position: absolute; inset: 0; }
.hz16 .w16-wallwrap { transform-origin: 50% 50%; animation: w16-wall var(--T) infinite both; }
@keyframes w16-wall { 0%, 35% { opacity: 1; transform: scale(1); } 41%, 82% { opacity: 0; transform: scale(2.4); } 89%, 100% { opacity: 1; transform: scale(1); } }
.hz16 .g3-col.w16-reel { translate: none; animation-duration: var(--T) !important; animation-iteration-count: infinite !important; animation-direction: normal !important; animation-delay: 0s !important; animation-fill-mode: both !important; }
.hz16 .w16-mid .g3-t { aspect-ratio: 1; }
@keyframes w16-r1 { 0% { transform: translateY(var(--from)); animation-timing-function: cubic-bezier(.55,0,.2,1); } 3% { filter: blur(1.5px); } 17% { filter: none; } 19%, 100% { transform: translateY(var(--to)); filter: none; } }
@keyframes w16-r2 { 0% { transform: translateY(var(--from)); animation-timing-function: cubic-bezier(.55,0,.15,1); } 3% { filter: blur(2px); } 25% { filter: none; } 27%, 100% { transform: translateY(var(--to)); filter: none; } }
@keyframes w16-r3 { 0% { transform: translateY(var(--from)); animation-timing-function: cubic-bezier(.55,0,.2,1); } 3% { filter: blur(1.5px); } 20% { filter: none; } 22%, 100% { transform: translateY(var(--to)); filter: none; } }
/* Label numbers: plain bold digits in a circle of the label's colour */
.hz16 .note .n { width: 1.75em; height: 1.75em; border-radius: 50%; background: var(--c, #1fbed4); color: #0e0f11; font: 800 .82em/1 Inter, sans-serif; letter-spacing: 0; box-shadow: 0 0 0 3px color-mix(in srgb, var(--c, #1fbed4) 22%, transparent); }
/* The middle reel sits above its neighbours, so .io stays on top when it grows */
.hz16 .w16-mid { position: relative; z-index: 3; }
/* The arena's own player cell gets a thicker rim */
.hz16 .a1-me { box-shadow: 0 0 0 max(3px, 1cqw) var(--c), 0 0 6cqw color-mix(in srgb, var(--c) 60%, transparent), 0 2cqw 5cqw rgba(0,0,0,.55); }
/* .io: the one live card */
.hz16 .w16-io { position: relative; background: linear-gradient(160deg, #10313a, #12161b); box-shadow: 0 0 0 .5cqw #1fbed4, 0 0 8cqw rgba(31,190,212,.5); z-index: 2; animation: w16-io var(--T) infinite both; }
.hz16 .w16-io .g3-ico { width: 11cqw; background: rgba(31,190,212,.18); }
.hz16 .w16-io .g3-ico svg { stroke: #1fbed4; }
.hz16 .w16-io b { color: #fff !important; font: 900 max(16px, 4.6cqw) Orbitron, sans-serif !important; }
.hz16 .w16-io .live { display: inline-flex; align-items: center; gap: .5em; color: #2ee07f !important; }
.hz16 .w16-io .live i { width: .7em; height: .7em; border-radius: 50%; background: #2ee07f; box-shadow: 0 0 8px #2ee07f; }
@keyframes w16-io { 0%, 27% { transform: scale(1); } 30% { transform: scale(1.12); box-shadow: 0 0 0 .7cqw #fff, 0 0 14cqw rgba(31,190,212,.95); } 33%, 86% { transform: scale(1.06); box-shadow: 0 0 0 .6cqw #1fbed4, 0 0 12cqw rgba(31,190,212,.85); } 89% { transform: scale(1.1); box-shadow: 0 0 0 .7cqw #2ee07f, 0 0 14cqw rgba(46,224,127,.8); } 98%, 100% { transform: scale(1); box-shadow: 0 0 0 .5cqw #1fbed4, 0 0 8cqw rgba(31,190,212,.5); } }
.hz16 .w16-cash { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: .3em; border-radius: inherit; background: linear-gradient(160deg, #0f3a26, #10161a); color: #2ee07f; font: 900 max(18px, 5.4cqw) Orbitron, sans-serif; text-shadow: 0 0 3cqw rgba(46,224,127,.6); opacity: 0; animation: w16-cash var(--T) infinite both; }
.hz16 .w16-cash small { color: #c9f5dc; font: 800 max(9px, 1.4cqw) Inter, sans-serif; letter-spacing: .16em; text-transform: uppercase; text-shadow: none; }
@keyframes w16-cash { 0%, 84% { opacity: 0; transform: scale(.9); } 87%, 94% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; } }
.hz16 .w16-wallwrap .g3-t:not(.w16-io) { animation: w16-dim var(--T) infinite both; }
@keyframes w16-dim { 0%, 27% { filter: none; } 31%, 88% { filter: brightness(.35) saturate(.5); } 96%, 100% { filter: none; } }
/* Wall labels: an icon (not a step number), set in the wall's faded corners, sliding in while the reels spin */
.hz16 .w16-wg { left: -2%; top: 5%; --kn: w16-wg; }
.hz16 .w16-wa { right: -2%; bottom: 7%; --kn: w16-wa; }
.hz16 .w16-wn { gap: .7em; padding: .6em 1em .6em .6em; animation: var(--kn) var(--T) infinite both; }
.hz16 .w16-wi { display: grid; place-items: center; width: 2.3em; height: 2.3em; border-radius: 9px; background: color-mix(in srgb, var(--c) 16%, #fff); flex: none; }
.hz16 .w16-wi svg { width: 58%; fill: none; stroke: color-mix(in srgb, var(--c) 80%, #000); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
@keyframes w16-wg { 0%, 3% { opacity: 0; transform: translateY(-2cqw) scale(.94); } 7%, 25% { opacity: 1; transform: none; } 29%, 100% { opacity: 0; transform: translateY(-1cqw) scale(.96); } }
@keyframes w16-wa { 0%, 3% { opacity: 0; transform: translateY(2cqw) scale(.94); } 7%, 25% { opacity: 1; transform: none; } 29%, 100% { opacity: 0; transform: translateY(1cqw) scale(.96); } }
/* The game opens out of .io and folds back into it; inside, it is variant 1 as is */
.hz16 .w16-game { animation: w16-game var(--T) infinite both; }
@keyframes w16-game { 0%, 35% { opacity: 0; transform: scale(.35); } 42%, 80% { opacity: 1; transform: scale(1); } 87%, 100% { opacity: 0; transform: scale(.35); } }
/* Devour, Grow, Cash out arrive one by one, then leave together on the way out */
.hz16 .w16-k { opacity: 0; animation: var(--kn) var(--T) infinite both; }
.hz16 .w16-k1 { --kn: w16-k1; } .hz16 .w16-k2 { --kn: w16-k2; } .hz16 .w16-k3 { --kn: w16-k3; }
@keyframes w16-k1 { 0%, 45% { opacity: 0; transform: translateX(3cqw) scale(.92); } 48%, 79% { opacity: 1; transform: none; } 82%, 100% { opacity: 0; transform: scale(.92); } }
@keyframes w16-k2 { 0%, 54% { opacity: 0; transform: translateX(-3cqw) scale(.92); } 57%, 79% { opacity: 1; transform: none; } 82%, 100% { opacity: 0; transform: scale(.92); } }
@keyframes w16-k3 { 0%, 63% { opacity: 0; transform: translateX(-3cqw) scale(.92); } 66%, 79% { opacity: 1; transform: none; } 82%, 100% { opacity: 0; transform: scale(.92); } }
#top > .copy { z-index: 3; }
@media (max-width: 900px) { .hz16 { margin-top: 28px; } .hz16 .w16-wn { font-size: 11px; } .hz16 .w16-wg { left: 0; top: 3%; } .hz16 .w16-wa { right: 0; bottom: 5%; } .hz16 .w16-k { font-size: 11px; padding: .5em .75em; } .hz16 .w16-k1 { right: -2% !important; top: 15% !important; } .hz16 .w16-k2 { left: -2% !important; top: 40% !important; } .hz16 .w16-k3 { left: -1% !important; top: 74% !important; } }
@media (prefers-reduced-motion: reduce) { .hz16 .w16-wallwrap { display: none; } .hz16 .w16-game, .hz16 .w16-k { opacity: 1 !important; transform: none !important; } }
@media (max-width:700px){}