/* TESTER · Cloud Climb: full orange sky, clouds drifting, drag (or tap a cloud) to climb; past Cloud 9 it keeps going */
.cl{position:relative;height:100vh;height:100svh;min-height:560px;background:var(--red,#fe4102);color:#fff6ea;overflow:hidden;user-select:none;-webkit-user-select:none}
.cl::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:5;opacity:.28;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.cl-head{position:absolute;left:16px;right:16px;top:calc(var(--hh,53px) + 14px);display:flex;justify-content:space-between;align-items:baseline;border-top:1px solid rgba(255,246,234,.75);padding-top:10px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;z-index:6;pointer-events:none}
.cl-head b{font-weight:400}
.cl-reset{pointer-events:auto;font:inherit;letter-spacing:inherit;text-transform:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.cl-reset[hidden]{display:none}
.cl-btns{display:flex;gap:16px;align-items:baseline;white-space:nowrap}
.cl-head > div{white-space:nowrap}
.cl-snd{pointer-events:auto;font:inherit;letter-spacing:inherit;text-transform:inherit;color:var(--red,#fe4102);background:#fff6ea;border:1px solid #fff6ea;padding:7px 12px 6px;cursor:pointer;line-height:1}
.cl-snd:hover{background:#fff;border-color:#fff}
.cl-snd[aria-pressed="true"]{background:transparent;color:#fff6ea}

/* the big counter */
.cl-hud{position:absolute;left:16px;top:calc(var(--hh,53px) + 44px);z-index:6;pointer-events:none;line-height:.9}
.cl-n{display:block;font-size:clamp(56px,11vw,150px);letter-spacing:-.04em;font-weight:500;font-stretch:75%}
.cl-msg{display:block;margin-top:10px;font-size:12px;letter-spacing:.1em;text-transform:uppercase;max-width:22em;line-height:1.5;min-height:3em}
.cl-cap{position:absolute;left:16px;right:16px;bottom:18px;z-index:6;margin:0;font-size:11px;letter-spacing:.08em;text-transform:uppercase;text-align:center;pointer-events:none;opacity:.9}

/* the sky: the world moves under a camera */
.cl-sky{position:absolute;inset:0;z-index:2;touch-action:pan-y;
  /* clouds dissolve into the top of the sky, under the counter */
  -webkit-mask-image:linear-gradient(to bottom,transparent calc(var(--hh,53px) + 40px),#000 calc(var(--hh,53px) + 230px));mask-image:linear-gradient(to bottom,transparent calc(var(--hh,53px) + 40px),#000 calc(var(--hh,53px) + 230px))}
.cl-world{position:absolute;left:0;top:0;width:100%;height:0;will-change:transform}
.cl-cloud{position:absolute;left:0;top:0;margin:0;padding:0;border:0;background:none;pointer-events:none;will-change:transform;-webkit-tap-highlight-color:transparent}
.cl-cloud img{display:block;width:100%;height:auto;pointer-events:none;-webkit-user-drag:none;filter:drop-shadow(0 10px 18px rgba(120,30,0,.18))}
.cl-cloud span{position:absolute;left:50%;bottom:-6px;transform:translate(-50%,100%);font-size:10px;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;color:#fff6ea;opacity:.85}
.cl-cloud.is-on span{opacity:1}
.cl-cloud.is-nine span{font-weight:700}

/* him */
.cl-me{position:absolute;left:0;top:0;z-index:3;width:var(--mw,120px);transform-origin:50% 62%;pointer-events:none;will-change:transform}
.cl-me img{display:block;width:100%;height:auto;pointer-events:none;-webkit-user-drag:none}
.cl-me.is-air img{filter:drop-shadow(0 22px 16px rgba(110,25,0,.28))}

/* Cloud X: rocket, flame, smoke */
.cl-cloud.is-deco{pointer-events:none}
.cl-cloud.is-xx span{font-size:12px;font-weight:700;letter-spacing:.2em}
.cl-rocket{position:absolute;left:0;top:0;z-index:2;pointer-events:none;will-change:transform}
.cl-rocket img{display:block;width:100%;height:auto;-webkit-user-drag:none;filter:drop-shadow(0 14px 22px rgba(90,20,0,.25))}
.cl-flame{position:absolute;left:50%;top:96%;width:30%;height:70%;transform:translateX(-50%) scaleY(var(--f,0));transform-origin:50% 0;opacity:min(1,calc(var(--f,0) * 3))}
.cl-flame i{position:absolute;left:0;right:0;top:0;bottom:0;border-radius:50% 50% 50% 50% / 20% 20% 80% 80%;background:radial-gradient(ellipse at 50% 10%,#fffbe6 0 18%,#ffd36b 32%,#ff8a1f 55%,rgba(254,65,2,0) 75%);animation:clFlick .09s infinite alternate}
.cl-flame i + i{left:20%;right:20%;bottom:30%;background:radial-gradient(ellipse at 50% 8%,#fff 0 30%,#fff3c2 50%,rgba(255,211,107,0) 80%);animation-duration:.07s}
@keyframes clFlick{to{transform:scaleY(.86) scaleX(1.06)}}
.cl-smoke{position:absolute;left:0;top:0;width:300px;z-index:3;pointer-events:none;will-change:transform,opacity}
.cl-me[hidden]{display:none}
.cl.is-launch .cl-sky{-webkit-mask-image:none;mask-image:none}