.demo-penalty{position:absolute;z-index:320;transform:translate(-50%,-50%);font-family:Londrina,sans-serif;font-weight:900;font-size:1.6rem;color:#e5484d;text-shadow:0 2px 0 #fff,0 0 8px rgba(255,255,255,.9);pointer-events:none;animation:demo-penalty 1s ease-out forwards}@keyframes demo-penalty{0%{transform:translate(-50%,-30%) scale(.6);opacity:0}20%{transform:translate(-50%,-60%) scale(1.1);opacity:1}to{transform:translate(-50%,-140%) scale(1);opacity:0}}.demo-board .demo-pile .demo-oopsie:after{content:"";position:absolute;inset:-6%;border-radius:26%;pointer-events:none;opacity:0;transition:opacity .2s}.demo-board .demo-pile .demo-oopsie.is-selected:after{opacity:1;border:4px solid #FFC531;box-shadow:0 0 0 3px #ffffffe6,0 0 18px #ffc531cc}.demo-board .demo-pile .demo-oopsie.is-member:after{opacity:1;border:4px solid #2ECC71;box-shadow:0 0 0 3px #ffffffe6}.demo-board .demo-pile .demo-oopsie.is-member{z-index:150!important;animation:demo-member .6s cubic-bezier(.2,1.6,.4,1)}@keyframes demo-member{0%{transform:rotate(var(--rot)) scale(1)}50%{transform:rotate(0) scale(1.3)}to{transform:rotate(var(--rot)) scale(1)}}.demo-board .demo-pile .demo-oopsie.is-hint:after{border:4px solid #fff;animation:demo-hint 1.2s ease-in-out infinite}@keyframes demo-hint{0%,to{opacity:.2;box-shadow:0 0 #ffc531b3}50%{opacity:1;box-shadow:0 0 22px 6px #ffc531e6}}.demo-board .demo-pile .demo-oopsie.is-greyed img{filter:grayscale(1) opacity(.55)}.demo-start-goal{margin:8px 0 4px}.demo-goal-frame{width:clamp(96px,16vw,150px);aspect-ratio:1;padding:10px;border-radius:24px;background:#fff;box-shadow:0 10px 24px #00000026;animation:demo-goal-bob 2.4s ease-in-out infinite}@keyframes demo-goal-bob{0%,to{transform:rotate(-4deg) translateY(0)}50%{transform:rotate(4deg) translateY(-6px)}}.demo-goal-frame img,.demo-goal-frame .demo-silhouette{display:block;width:100%;height:100%;object-fit:contain}.demo-goal-frame.is-screen,.demo-hud-frame.is-screen{background:#f6e7c8}.demo-hud-frame{display:block;width:40px;height:40px;padding:3px;border-radius:10px;background:#fff}.demo-hud-frame .demo-silhouette{display:block;width:100%;height:100%}.demo-silhouette{background:#2b2140;-webkit-mask:var(--shape) center / contain no-repeat;mask:var(--shape) center / contain no-repeat}.demo-mystery{display:inline-flex;gap:8px}.demo-mystery-card{display:grid;place-items:center;width:2.2em;aspect-ratio:3 / 4;border-radius:.4em;background:#fff;color:currentColor;font-family:Londrina,sans-serif;font-weight:900;box-shadow:0 4px 10px #00000026}.demo-goal-mystery,.demo-goal-family{display:flex;flex-direction:column;align-items:center;gap:12px;font-size:clamp(1.8rem,5vw,2.6rem)}.demo-goal-mystery .demo-mystery-card:nth-child(odd){transform:rotate(-6deg)}.demo-goal-mystery .demo-mystery-card:nth-child(2n){transform:rotate(6deg)}.demo-goal-family .demo-mystery{font-size:.75em}.demo-hud-mystery{font-size:1.1rem}.demo-hud-mystery .demo-mystery-card{box-shadow:0 0 0 2px #0000001a}.demo-trait{display:block;width:44px;height:auto;aspect-ratio:40 / 24}.demo-trait.is-big{width:clamp(90px,14vw,130px);padding:14px 18px;box-sizing:content-box;border-radius:22px;background:#fff;box-shadow:0 10px 24px #00000026}.demo-hud-family{display:inline-flex;align-items:center;gap:8px;padding:4px 8px;border-radius:10px;background:#fff;box-shadow:0 0 0 2px #00000014}.demo-hud-count{font-family:Open Sans,sans-serif;font-weight:800;font-variant-numeric:tabular-nums}.demo-flicker{position:absolute;inset:0;background:#05030c;opacity:0;animation:demo-flicker .7s steps(1) forwards}@keyframes demo-flicker{0%{opacity:.96}15%{opacity:.2}30%{opacity:.9}55%{opacity:0}70%{opacity:.85}85%,to{opacity:0}}.demo-board .demo-pile .demo-oopsie.is-shadow{background:#2b2140;-webkit-mask:var(--shape) center / contain no-repeat;mask:var(--shape) center / contain no-repeat}.demo-board .demo-pile .demo-oopsie.is-shadow img{opacity:0}.demo-peephole{--zoom: 1.5;position:relative;display:block;overflow:hidden;border-radius:50%;background:#fff}.demo-peephole img{position:absolute;width:calc(var(--zoom) * 100%);height:calc(var(--zoom) * 100%);max-width:none;left:calc((.5 - var(--px) * var(--zoom)) * 100%);top:calc((.5 - var(--py) * var(--zoom)) * 100%);transition:width .5s ease,height .5s ease,left .5s ease,top .5s ease}.demo-peephole.is-big{width:clamp(120px,20vw,180px);aspect-ratio:1;border:8px solid #E0B54A;box-shadow:0 10px 24px #0000002e,inset 0 0 0 4px #fff9}.demo-peephole.is-small{width:42px;height:42px;border:3px solid #E0B54A}.demo-glass{position:absolute;inset:0;transition:opacity .6s ease}.demo-glass:after{content:"";position:absolute;inset:0;background:radial-gradient(circle,rgba(255,255,255,.85) 0 1.5px,transparent 2px) 0 0 / 31px 31px,radial-gradient(circle,rgba(255,255,255,.6) 0 1px,transparent 1.5px) 6px 10px / 23px 23px;opacity:.6}.demo-glass.is-clear{opacity:0}.demo-fog{display:block;width:100%;height:100%}.demo-board .demo-pile .demo-oopsie.is-windy{transition:left .95s cubic-bezier(.5,0,.3,1),top .95s cubic-bezier(.5,0,.3,1),transform .15s ease-out}.demo-board .demo-pile .demo-oopsie.is-windy.is-booped{transition:transform .7s cubic-bezier(.5,-.4,.8,.6) var(--delay),opacity .5s ease var(--delay)}.demo-board .demo-pile .demo-oopsie.is-flying{animation:demo-fly .95s ease-in-out}.demo-board .demo-pile .demo-oopsie.is-flying.is-spinning{animation:demo-fly .95s ease-in-out,demo-spin .95s ease-in-out}@keyframes demo-fly{50%{translate:0 -22%;scale:1.08}}@keyframes demo-spin{0%{rotate:0deg}to{rotate:var(--spin, 360deg)}}.demo-gauge{position:absolute;left:50%;bottom:8px;transform:translate(-50%);display:flex;align-items:center;gap:8px;width:min(60%,320px);padding:4px 12px 4px 8px;border-radius:999px;background:#ffffffd9;box-shadow:0 4px 12px #5641b02e}.demo-gauge-icon{font-size:1rem;line-height:1}.demo-gauge-track{position:relative;flex:1;height:10px;border-radius:999px;background:#dcd4f7;overflow:hidden}.demo-gauge-fill{position:absolute;inset:0;border-radius:inherit;background:linear-gradient(90deg,#8f7cf0,#5641b0);transform-origin:left;transform:scaleX(var(--wind, 0))}.demo-swirl{position:absolute;left:-30%;width:26%;height:.9rem;border-top:3px solid rgba(86,65,176,.45);border-radius:50%;animation:demo-swirl .9s ease-in forwards}.demo-swirl.is-left{animation-name:demo-swirl-left}@keyframes demo-swirl{0%{transform:translate(0);opacity:0}20%{opacity:1}to{transform:translate(560%);opacity:0}}@keyframes demo-swirl-left{0%{transform:translate(560%);opacity:0}20%{opacity:1}to{transform:translate(0);opacity:0}}.demo-board .demo-pile .demo-oopsie.demo-bubbled{border-radius:50%;transform:none;transition:none;will-change:translate}.demo-board .demo-pile .demo-oopsie.demo-bubbled img{position:absolute;inset:16%;width:68%;height:68%}.demo-board .demo-pile .demo-oopsie.demo-bubbled.is-booped{transition:opacity .4s ease}.demo-bubble-film{position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 50% 50%,#a0d7f500 60%,#a0d7f58c);border:2px solid rgba(255,255,255,.85);box-shadow:inset 0 0 12px #fff9;transition:transform .25s ease-out,opacity .25s ease-out}.demo-bubble-film:before,.demo-empty-bubble:before{content:"";position:absolute;left:18%;top:14%;width:28%;height:16%;border-radius:50%;background:#ffffffd9;transform:rotate(-30deg)}.demo-oopsie.is-popped .demo-bubble-film{transform:scale(1.5);opacity:0}.demo-board .demo-pile .demo-oopsie.is-falling{pointer-events:none}.demo-board .demo-pile .demo-oopsie.is-falling img{animation:demo-fall .8s ease-in forwards;filter:grayscale(1) opacity(.6)}@keyframes demo-fall{to{transform:translateY(320%) rotate(160deg);opacity:0}}.demo-empty-bubble{position:absolute;left:0;top:0;aspect-ratio:1;padding:0;border-radius:50%;border:2px solid rgba(255,255,255,.85);background:radial-gradient(circle,#a0d7f500 55%,#a0d7f580);cursor:pointer;z-index:0;transition:transform .25s ease-out,opacity .25s ease-out;-webkit-tap-highlight-color:transparent}.demo-empty-bubble.is-popped{transform:scale(1.6);opacity:0}@media(prefers-reduced-motion:reduce){.demo-goal-frame{animation:none}}