/* Jell-O Cup Factory UI kit — shared/ui/ui.css (additive; opt in with class names prefixed ui-) */
@font-face{font-family:"Lilita One";src:url("fonts/LilitaOne-Regular.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Nunito";src:url("fonts/Nunito-Variable.woff2") format("woff2");font-weight:200 1000;font-display:swap}
:root{
 /* palette */
 --ui-red:#D2232A;--ui-red-hi:#F0444A;--ui-red-lo:#A8161D;--ui-red-deep:#7A1015;
 --ui-berry:#E8344E;--ui-orange:#FF8A1F;--ui-lemon:#FFD23F;--ui-lime:#3DBE5A;--ui-sky:#1EA7F0;--ui-blue:#0568B3;--ui-grape:#6A2E5C;
 --ui-cream:#FFF8EE;--ui-cream-2:#F6E9D6;--ui-ink:#2B1B17;--ui-ink-2:#5A4640;--ui-white:#fff;
 /* type */
 --ui-display:"Lilita One","Fredoka",system-ui,sans-serif;--ui-body:"Nunito","Fredoka",system-ui,sans-serif;
 --ui-fs-xs:12px;--ui-fs-sm:14px;--ui-fs-md:16px;--ui-fs-lg:20px;--ui-fs-xl:28px;--ui-fs-2xl:40px;--ui-fs-3xl:56px;
 /* spacing (4pt) */
 --ui-s1:4px;--ui-s2:8px;--ui-s3:12px;--ui-s4:16px;--ui-s5:24px;--ui-s6:32px;--ui-s7:48px;
 /* radii */
 --ui-r-sm:10px;--ui-r-md:16px;--ui-r-lg:24px;--ui-r-pill:999px;
 /* layered shadows */
 --ui-sh-1:0 1px 0 rgba(255,255,255,.6) inset,0 2px 4px rgba(43,27,23,.12);
 --ui-sh-2:0 2px 0 rgba(255,255,255,.7) inset,0 6px 14px rgba(43,27,23,.16),0 2px 3px rgba(43,27,23,.12);
 --ui-sh-3:0 3px 0 rgba(255,255,255,.8) inset,0 18px 40px rgba(43,27,23,.28),0 4px 8px rgba(43,27,23,.16);
 --ui-tap:48px;
}
.ui-bg{background:radial-gradient(120% 70% at 50% 0%,#FF5A5F 0%,var(--ui-red) 45%,var(--ui-red-deep) 100%);position:relative}
.ui-bg::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.10;background-image:radial-gradient(circle at 25% 25%,#fff 0 3px,transparent 4px),radial-gradient(circle at 75% 75%,#fff 0 3px,transparent 4px);background-size:44px 44px}
.ui-bg-sky{background:radial-gradient(120% 70% at 50% 0%,#8FDcff 0%,var(--ui-sky) 50%,#0A6DB8 100%)}
.ui-title{font:400 var(--ui-fs-3xl)/1 var(--ui-display);color:#fff;letter-spacing:.5px;-webkit-text-stroke:0;text-shadow:0 4px 0 var(--ui-red-lo),0 8px 18px rgba(0,0,0,.25)}
.ui-h{font:400 var(--ui-fs-xl)/1.1 var(--ui-display);color:var(--ui-ink)}
.ui-text{font:600 var(--ui-fs-md)/1.4 var(--ui-body);color:var(--ui-ink-2)}
.ui-btn{--c:var(--ui-red);--hi:var(--ui-red-hi);--lo:var(--ui-red-lo);position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:var(--ui-tap);min-width:var(--ui-tap);padding:0 24px;border:0;border-radius:var(--ui-r-pill);
 font:400 var(--ui-fs-lg)/1 var(--ui-display);letter-spacing:.4px;color:#fff;cursor:pointer;text-shadow:0 2px 0 rgba(0,0,0,.18);
 background:linear-gradient(180deg,var(--hi) 0%,var(--c) 55%,var(--c) 100%);box-shadow:0 5px 0 var(--lo),0 8px 16px rgba(43,27,23,.25),inset 0 -3px 0 rgba(0,0,0,.08);transition:transform .08s,box-shadow .08s}
.ui-btn::after{content:"";position:absolute;left:10%;right:10%;top:4px;height:40%;border-radius:999px;background:linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,0));pointer-events:none}
.ui-btn:active,.ui-btn.is-pressed{transform:translateY(4px);box-shadow:0 1px 0 var(--lo),0 3px 6px rgba(43,27,23,.2)}
.ui-btn:focus-visible{outline:3px solid var(--ui-lemon);outline-offset:3px}
.ui-btn--lg{min-height:64px;font-size:var(--ui-fs-xl);padding:0 36px}
.ui-btn--blue{--c:var(--ui-blue);--hi:#1A7FCC;--lo:#033B66}.ui-btn--green{--c:#22A04B;--hi:#4CCB6E;--lo:#16733A}
.ui-btn--yellow{--c:#FFC21A;--hi:#FFE45C;--lo:#C98A00;color:var(--ui-red-deep);text-shadow:none}
.ui-btn--light{--c:#fff;--hi:#fff;--lo:#E5D3BD;color:var(--ui-red-lo);text-shadow:none}
.ui-btn--icon{padding:0;width:var(--ui-tap)}
.ui-ic{width:1.1em;height:1.1em;fill:currentColor;flex:none}
.ui-pill{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 14px;border-radius:var(--ui-r-pill);background:rgba(255,255,255,.95);color:var(--ui-ink);font:800 var(--ui-fs-sm)/1 var(--ui-body);box-shadow:var(--ui-sh-1)}
.ui-card{background:linear-gradient(180deg,#fff 0%,var(--ui-cream) 100%);border-radius:var(--ui-r-lg);box-shadow:var(--ui-sh-2);padding:var(--ui-s5);position:relative}
.ui-card::before{content:"";position:absolute;inset:2px 2px auto 2px;height:40%;border-radius:22px 22px 60% 60%/22px 22px 20px 20px;background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(255,255,255,0));pointer-events:none}
.ui-modal-scrim{position:fixed;inset:0;background:rgba(43,27,23,.55);backdrop-filter:blur(3px);display:grid;place-items:center;z-index:50}
.ui-modal{width:min(420px,calc(100% - 32px));background:var(--ui-cream);border-radius:28px;box-shadow:var(--ui-sh-3);overflow:hidden}
.ui-modal__head{background:linear-gradient(180deg,var(--ui-red-hi),var(--ui-red));color:#fff;font:400 var(--ui-fs-xl)/1 var(--ui-display);text-align:center;padding:18px 16px 16px;text-shadow:0 2px 0 var(--ui-red-lo)}
.ui-modal__body{padding:var(--ui-s5)}
.ui-sheet{position:fixed;left:0;right:0;bottom:0;background:var(--ui-cream);border-radius:28px 28px 0 0;box-shadow:var(--ui-sh-3);padding:12px 16px calc(16px + env(safe-area-inset-bottom))}
.ui-chip{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 12px 0 6px;border-radius:var(--ui-r-pill);background:rgba(43,27,23,.55);color:#fff;font:400 var(--ui-fs-md)/1 var(--ui-display);box-shadow:inset 0 1px 0 rgba(255,255,255,.25)}
.ui-chip .ui-ic{width:24px;height:24px;padding:4px;border-radius:50%;background:#fff;fill:var(--ui-red)}
.ui-progress{height:12px;border-radius:999px;background:rgba(43,27,23,.18);box-shadow:inset 0 2px 2px rgba(0,0,0,.15);overflow:hidden}
.ui-progress>i{display:block;height:100%;border-radius:inherit;background:linear-gradient(180deg,#FFE45C,#FFC21A);box-shadow:inset 0 -2px 0 rgba(0,0,0,.12),inset 0 2px 0 rgba(255,255,255,.6)}
.ui-stars{display:inline-flex;gap:6px}.ui-stars .ui-ic{width:36px;height:36px;fill:#E5D8CC}.ui-stars .on{fill:#FFC21A;filter:drop-shadow(0 2px 0 #C98A00)}
.ui-tabs{display:flex;gap:4px;padding:4px;border-radius:var(--ui-r-pill);background:rgba(43,27,23,.12)}
.ui-tab{flex:1;min-height:40px;border:0;border-radius:var(--ui-r-pill);background:transparent;font:800 var(--ui-fs-sm)/1 var(--ui-body);color:var(--ui-ink-2)}
.ui-tab[aria-selected=true]{background:#fff;color:var(--ui-red);box-shadow:var(--ui-sh-1)}
@media (prefers-reduced-motion:reduce){.ui-btn{transition:none}}