@font-face{font-family:Fredoka;src:url(./fredoka-latin-DM6njrJ3.woff2)format("woff2");font-weight:500 700;font-display:swap}:root{--night-900:#0b1230;--night-700:#22305a;--night-500:#3a4a80;--lime-400:#7cf05a;--lime-600:#4fc93a;--coral-400:#ff5a8a;--coral-600:#e03a6e;--sun-400:#ffc83d;--white:#fff;--mist:#a9b4dc;--space-1:4px;--space-2:8px;--space-4:16px;--space-6:24px;--radius-sm:12px;--radius-md:20px;--radius-pill:999px;--outline-ui:3px;--outline-logo:6px;--shadow-pop:0 5px 0 #0b1230;--shadow-press:0 2px 0 #0b1230;--font-display:"Fredoka", "Baloo 2", system-ui, sans-serif;--type-logo-size:64px;--type-logo-line-height:.95;--type-logo-weight:700;--type-title-size:36px;--type-title-line-height:40px;--type-title-weight:700;--type-heading-size:24px;--type-heading-line-height:28px;--type-heading-weight:700;--type-button-size:20px;--type-button-line-height:24px;--type-button-weight:700;--type-body-size:16px;--type-body-line-height:24px;--type-body-weight:500;--type-caption-size:13px;--type-caption-line-height:18px;--type-caption-weight:500}.joobo-button{box-sizing:border-box;width:100%;min-height:52px;padding:var(--space-2) var(--space-6);border:var(--outline-ui) solid var(--night-900);border-radius:var(--radius-sm);box-shadow:var(--shadow-pop);font:inherit;font-size:var(--type-button-size);line-height:var(--type-button-line-height);font-weight:var(--type-button-weight);touch-action:manipulation;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;display:block}.joobo-button:active,.joobo-icon-button:active{box-shadow:var(--shadow-press);transform:translateY(3px)}.joobo-button:disabled{opacity:.5}.joobo-button--primary{background:var(--coral-400);color:var(--white);-webkit-text-stroke:var(--outline-ui) var(--night-900);paint-order:stroke fill}.joobo-button--primary:active{background:var(--coral-600)}.joobo-button--secondary{background:var(--lime-400);color:var(--night-900)}.joobo-button--secondary:active{background:var(--lime-600)}.joobo-button--tertiary{background:var(--night-500);color:var(--white)}.joobo-icon-button{box-sizing:border-box;background:var(--night-500);border:var(--outline-ui) solid var(--night-900);border-radius:var(--radius-sm);width:48px;height:48px;box-shadow:var(--shadow-pop);-webkit-tap-highlight-color:transparent;flex:none;place-items:center;padding:0;display:grid}.joobo-icon-button svg{width:26px;height:26px}.joobo-panel{gap:var(--space-4);padding:var(--space-4);background:var(--night-500);border:var(--outline-ui) solid var(--night-900);border-radius:var(--radius-md);box-shadow:var(--shadow-pop);flex-direction:column;display:flex}.joobo-heading{font-size:var(--type-heading-size);line-height:var(--type-heading-line-height);font-weight:var(--type-heading-weight);margin:0}.joobo-overlay{z-index:10;padding:var(--space-4);background:color-mix(in srgb, var(--night-900) 75%, transparent);align-items:center;display:flex;position:fixed;inset:0}.joobo-dialog{text-align:center;width:100%;max-width:400px;margin:0 auto}.joobo-dialog p{margin:0}.joobo-screen{box-sizing:border-box;gap:var(--space-6);max-width:430px;height:100dvh;padding:calc(env(safe-area-inset-top) + var(--space-6)) var(--space-4) calc(env(safe-area-inset-bottom) + var(--space-6));flex-direction:column;margin:0 auto;display:flex;overflow-y:auto}.joobo-screen--center{text-align:center;justify-content:center;align-items:center}.joobo-screen p,.joobo-screen h1,.joobo-screen h2{margin:0}.joobo-bar{justify-content:space-between;align-items:center;gap:var(--space-4);display:flex}.joobo-title{font-size:var(--type-title-size);line-height:var(--type-title-line-height);font-weight:var(--type-title-weight);margin:0}.joobo-link{min-height:48px;padding:var(--space-2);color:var(--mist);font:inherit;-webkit-tap-highlight-color:transparent;background:0 0;border:0}.joobo-setting{justify-content:space-between;align-items:center;gap:var(--space-4);flex-direction:row}.joobo-setting__choices{gap:var(--space-2);display:flex}.joobo-choice{min-height:48px;padding:0 var(--space-4);background:var(--night-700);color:var(--white);border:var(--outline-ui) solid var(--night-900);border-radius:var(--radius-sm);font:inherit;font-weight:var(--type-button-weight);-webkit-tap-highlight-color:transparent}.joobo-choice[aria-pressed=true]{background:var(--lime-400);color:var(--night-900)}.joobo-signature{justify-content:center;align-items:center;gap:var(--space-2);font-size:30px;line-height:36px;font-weight:var(--type-title-weight);display:flex}.joobo-mascot{width:72px;height:72px}.joobo-mascot__lid{opacity:0}@media (prefers-reduced-motion:no-preference){.joobo-signature[data-wink=true] .joobo-mascot__gaze{animation:1.5s ease-in-out .85s both joobo-wink-gaze}.joobo-signature[data-wink=true] .joobo-mascot__open-eye{animation:1.5s step-end .85s both joobo-wink-open}.joobo-signature[data-wink=true] .joobo-mascot__lid{animation:1.5s step-end .85s both joobo-wink-closed}.joobo-countdown{animation:.7s ease-out joobo-pop}}@keyframes joobo-wink-gaze{0%,to{transform:translate(0)}7%,93%{transform:translate(-2px,-1px)}}@keyframes joobo-wink-open{0%{opacity:1}14%{opacity:0}72%{opacity:1}}@keyframes joobo-wink-closed{0%{opacity:0}14%{opacity:1}72%{opacity:0}}@keyframes joobo-pop{0%{transform:scale(1.5)rotate(-4deg)}to{transform:scale(1)rotate(0)}}.joobo-countdown__label{color:var(--mist)}.joobo-countdown{font-size:160px;line-height:1;font-weight:var(--type-title-weight);color:var(--lime-400);-webkit-text-stroke:var(--outline-logo) var(--night-900);paint-order:stroke fill;text-shadow:var(--shadow-pop)}.joobo-tutorial,.joobo-tutorial *{touch-action:pan-y}.joobo-tutorial__card{justify-content:center;align-items:center;gap:var(--space-6);text-align:center;flex-direction:column;flex:1;display:flex}.joobo-tutorial__card h1,.joobo-tutorial__card p{text-wrap:balance}.joobo-tutorial__illustration{align-items:center;gap:var(--space-2);flex-direction:column;width:100%;display:flex}.joobo-tutorial__dots{justify-content:center;gap:var(--space-2);display:flex}.joobo-tutorial__dots i{border-radius:var(--radius-pill);background:var(--night-500);border:2px solid var(--night-900);box-sizing:border-box;width:12px;height:12px}.joobo-tutorial__dots i[data-on=true]{background:var(--lime-400)}.joobo-delayed-actions{gap:var(--space-4);opacity:0;visibility:hidden;flex-direction:column;width:100%;transition:opacity .25s;display:flex}.joobo-delayed-actions[data-shown=true]{opacity:1;visibility:visible}@media (height<=700px){.joobo-delayed-actions{gap:var(--space-2)}}.joobo-button--danger{background:var(--night-500);color:var(--coral-400);border-color:var(--coral-400)}.joobo-button--danger:active{color:var(--coral-600);border-color:var(--coral-600)}.end__score{font-size:96px;line-height:1;font-weight:var(--type-title-weight);color:var(--sun-400);-webkit-text-stroke:var(--outline-logo) var(--night-900);paint-order:stroke fill;text-shadow:var(--shadow-pop)}.end__badge{padding:var(--space-1) var(--space-4);background:var(--sun-400);color:var(--night-900);border:var(--outline-ui) solid var(--night-900);border-radius:var(--radius-pill);font-weight:var(--type-title-weight);display:inline-block;transform:rotate(-3deg)}.end__best{box-sizing:border-box;gap:var(--space-2);width:100%}.end__caption{font-size:var(--type-caption-size);line-height:var(--type-caption-line-height)}.end__none{color:var(--mist)}.end__grow{flex:1}.end__copied{min-height:var(--type-caption-line-height);margin:calc(-1 * var(--space-4)) 0;font-size:var(--type-caption-size);line-height:var(--type-caption-line-height);color:var(--mist)}@media (height<=700px){.end{gap:var(--space-2)}.end__score{font-size:64px}}.game{box-sizing:border-box;max-width:430px;height:100dvh;padding:calc(env(safe-area-inset-top) + var(--space-4)) var(--space-4) calc(env(safe-area-inset-bottom) + var(--space-4));gap:var(--space-2);flex-direction:column;margin:0 auto;display:flex;overflow:hidden}.game__hud{align-items:center;gap:var(--space-4);display:flex}.game__time{box-sizing:border-box;background:var(--night-900);border:var(--outline-ui) solid var(--night-900);border-radius:var(--radius-pill);flex:1;height:32px;position:relative;overflow:hidden}.game__time i{width:calc(var(--fill) * 100%);background:var(--lime-400);border-radius:var(--radius-pill);position:absolute;inset:0}.game__time[data-low=true] i{background:var(--hot-3)}.game__time b{font-size:var(--type-body-size);-webkit-text-stroke:var(--outline-ui) var(--night-900);paint-order:stroke fill;place-items:center;line-height:1;display:grid;position:absolute;inset:0}.game__score{text-align:right;min-width:56px;font-size:28px;line-height:32px;font-weight:var(--type-title-weight);color:var(--sun-400)}.game__play{justify-content:space-evenly;align-items:center;gap:var(--space-1);flex-direction:column;flex:1;min-height:0;display:flex}.game__sequence{justify-content:center;align-items:center;gap:2px;display:flex}.game__order-mark{width:8px;height:12px;fill:var(--mist);stroke:var(--mist);stroke-width:1.5px;stroke-linejoin:round;flex:none}.game__tile{box-sizing:border-box;background:var(--night-500);border:var(--outline-ui) solid var(--night-900);border-radius:var(--radius-sm);width:min(56px,15.5vw);height:min(56px,15.5vw);box-shadow:var(--shadow-pop);font-size:28px;line-height:1;font-weight:var(--type-title-weight);place-items:center;display:grid}.game__tile[data-lit=true]{background:var(--lime-400);color:var(--night-900)}.game__tile[data-hidden=true]{color:var(--mist)}.game__chilis{justify-content:center;gap:var(--space-1);height:36px;display:flex}.game__chili{fill:none;stroke-linecap:round;stroke-linejoin:round;width:36px;height:36px}.game__chili-stem-ink{stroke:var(--night-900);stroke-width:6px}.game__chili-stem{stroke:var(--night-500);stroke-width:2.5px}.game__chili-body{fill:var(--night-500);stroke:var(--night-900);stroke-width:3px}.game__chili[data-lit=true] .game__chili-stem{stroke:var(--lime-600)}.game__chili[data-lit=true] .game__chili-body{fill:var(--hot-3)}.game__word{text-align:center;width:100%;font-size:min(36px, calc((min(100vw, 430px) - 2 * var(--space-4)) / (var(--letter-count) * .72)));min-height:40px;line-height:40px;font-weight:var(--type-title-weight);white-space:nowrap;margin:0}.game__feedback{min-height:var(--type-body-line-height);color:var(--white);text-align:center;margin:0}.game__feedback--points{color:var(--sun-400);font-size:28px;font-weight:var(--type-title-weight)}.game__skip{justify-content:center;display:flex}.game__skip .joobo-button{width:auto;min-height:44px;padding:0 var(--space-6);font-size:var(--type-body-size);line-height:1}.keyboard{--gap:2px;gap:var(--space-2);margin:0 calc(-1 * var(--space-4)) calc(-1 * var(--space-4));padding:0 var(--space-1) var(--space-4);touch-action:none;flex-direction:column;display:flex}.keyboard__row{justify-content:center;gap:var(--gap);display:flex}.keyboard__key{box-sizing:border-box;flex:0 0 calc((100% - 9 * var(--gap)) / 10);background:var(--night-500);height:60px;color:var(--white);border:var(--outline-ui) solid var(--night-900);border-radius:var(--radius-sm);box-shadow:var(--shadow-pop);font:inherit;font-size:24px;line-height:1;font-weight:var(--type-title-weight);touch-action:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;padding:0}@media (height<=700px){.keyboard__key{height:52px}}.keyboard__key[data-pressed=true]{box-shadow:var(--shadow-press);transform:translateY(3px)}.keyboard__key[data-kind=erase],.keyboard__key[data-kind=enter]{flex:0 0 calc(2 * (100% - 9 * var(--gap)) / 10 + var(--gap));font-size:15px}.keyboard__key[data-kind=enter]{background:var(--coral-400);color:var(--night-900)}.keyboard__key[data-kind=enter][data-pressed=true]{background:var(--coral-600)}.game__pop,.game__bump{display:inline-block}@media (prefers-reduced-motion:no-preference){.game__pop{animation:.35s cubic-bezier(.34,1.56,.64,1) game-pop}.game__bump{animation:.4s ease-out game-bump}}@keyframes game-pop{0%{opacity:0;scale:.4}to{opacity:1;scale:1}}@keyframes game-bump{30%{scale:1.35}to{scale:1}}.home__spacer{width:48px}.home__title{flex-direction:column;flex:1;justify-content:center;display:flex}.home__panel{gap:var(--space-2)}.home__panel .joobo-button{margin-top:var(--space-2)}.home__row{justify-content:space-between;align-items:center;gap:var(--space-2);display:flex}.home__panel-title{align-items:center;gap:var(--space-2);display:flex}.home__panel-title svg{flex:none;width:44px;height:44px}@media (height<=700px){.home__panel-title svg{width:34px;height:34px}}.home__reward{color:var(--sun-400);font-weight:var(--type-title-weight)}.home__caption{font-size:var(--type-caption-size);line-height:var(--type-caption-line-height)}.settings__spacer{width:48px}.joobo-tutorial em{font-style:normal;font-weight:var(--type-title-weight);color:var(--lime-400)}.joobo-tutorial em[data-cost=true]{color:var(--hot-2)}.joobo-tutorial .game__tile{width:52px;height:52px;font-size:26px}.tutorial__word{font-size:28px;line-height:32px;font-weight:var(--type-title-weight)}.tutorial__word mark{color:var(--lime-400);background:0 0}.tutorial__reward{color:var(--sun-400);font-size:var(--type-heading-size);line-height:var(--type-heading-line-height);font-weight:var(--type-heading-weight)}.tutorial__caption{color:var(--mist);font-size:var(--type-caption-size);line-height:var(--type-caption-line-height)}.tutorial__message{min-height:24px}.tutorial__score-rows{gap:var(--space-2);flex-direction:column;width:100%;max-width:320px;display:flex}.tutorial__score-row{align-items:baseline;gap:var(--space-2);grid-template-columns:1fr auto 52px;display:grid}.tutorial__score-row .tutorial__word{text-align:left}.tutorial__score-row .tutorial__reward{text-align:right}.tutorial__gauge{width:260px;display:flex}.tutorial__levels{justify-content:center;gap:var(--space-6);display:flex}.tutorial__levels>span{align-items:baseline;gap:var(--space-2);display:flex}:root{--letterpanic:#3fd8e8;--hot-1:#ffe36b;--hot-2:#ff9d3f;--hot-3:#ff5447}html,body,#root{height:100%;margin:0}body{background:var(--night-700);color:var(--white);font-family:var(--font-display);font-size:var(--type-body-size);line-height:var(--type-body-line-height);font-weight:var(--type-body-weight)}button{touch-action:manipulation;-webkit-user-select:none;user-select:none}.title{text-align:center}.title .title__logo{width:min(320px,84vw);margin:0 auto}@media (height<=700px){.title .title__logo{width:min(260px,84vw,34vh)}}.title__logo svg{width:100%;height:auto;display:block}.title .title__tagline{margin:var(--space-2) 0 0;font-size:22px;line-height:28px;font-weight:var(--type-title-weight);text-wrap:balance;color:var(--letterpanic)}@media (prefers-reduced-motion:no-preference){.title[data-motion=pop] .title__logo svg{animation:.45s cubic-bezier(.34,1.56,.64,1) backwards title-pop}.title[data-motion=pop] .title__tagline{animation:.35s ease-out .6s backwards title-pop}.title[data-motion=pop] .logo__hand{animation:1.2s steps(12,end) .5s backwards logo-tick}.title[data-motion=pop] .logo__watch{animation:.9s linear 1.7s logo-ring}.title[data-motion=float] .title__logo svg{animation:1.4s ease-in-out infinite alternate title-float}.title[data-motion=float] .logo__watch{animation:12s linear 3s infinite logo-ring-every}}@keyframes title-pop{0%{scale:0}to{scale:1}}@keyframes title-float{0%{translate:0}to{translate:0 -4px}}@keyframes logo-tick{0%{rotate:0deg}to{rotate:360deg}}@keyframes logo-ring{0%{rotate:0deg}8.33%{rotate:10.2deg}16.67%{rotate:-9.5deg}25%{rotate:8.8deg}33.33%{rotate:-8deg}41.67%{rotate:7.2deg}50%{rotate:-6.5deg}58.33%{rotate:5.8deg}66.67%{rotate:-5deg}75%{rotate:4.2deg}83.33%{rotate:-3.5deg}91.67%{rotate:2.8deg}to{rotate:0deg}}@keyframes logo-ring-every{0%{rotate:0deg}.62%{rotate:10.2deg}1.25%{rotate:-9.5deg}1.88%{rotate:8.8deg}2.5%{rotate:-8deg}3.12%{rotate:7.2deg}3.75%{rotate:-6.5deg}4.38%{rotate:5.8deg}5%{rotate:-5deg}5.62%{rotate:4.2deg}6.25%{rotate:-3.5deg}6.88%{rotate:2.8deg}7.5%,to{rotate:0deg}}.textured{position:relative;overflow:hidden}.textured>*{z-index:1;position:relative}.textured>.decor{z-index:0;pointer-events:none;opacity:.28;position:absolute;inset:0;overflow:hidden}.decor span{font-weight:var(--type-title-weight);border-radius:var(--radius-sm);background:var(--night-500);color:var(--night-700);place-items:center;display:grid;position:absolute}.decor span[data-tint=lime]{background:var(--lime-400);color:var(--night-900)}.decor span[data-tint=aqua]{background:var(--letterpanic);color:var(--night-900)}.launch{justify-content:space-between}
