/* Cumilla's Cake · loop.css: cake reels, Cake Match, "picked for you" (same tokens and type as the rest of the site) */
html.rl-open,html.rl-open body{overflow:hidden}
/* ---------- entry points ---------- */
.loop-bar{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px;margin:0 0 18px}
.loop-bar .qz-launch{margin:0}
.loop-bar .qz-launch svg{width:16px;height:16px}
.loop-found{font:500 14px/1.3 var(--sans);color:var(--ink-3)}
.picked{margin:0 0 clamp(20px,3vw,30px)}
.pk-head{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;margin-bottom:10px}
.pk-h{margin:0;font:600 clamp(20px,2.2vw,26px)/1.15 var(--display);color:var(--espresso)}
.pk-p{margin:2px 0 0;font:400 14px/1.4 var(--sans);color:var(--ink-3)}
.pk-row{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x proximity;margin:0 calc(-1 * var(--gut));padding:4px var(--gut) 12px;scrollbar-width:none}
.pk-row::-webkit-scrollbar{display:none}
.pk-card{position:relative;flex:none;width:clamp(128px,22vw,170px);aspect-ratio:3/4;border:0;padding:0;border-radius:var(--r-md);overflow:hidden;background:var(--c);scroll-snap-align:start;cursor:pointer;
  box-shadow:var(--sh-1);transition:transform .4s var(--ease),box-shadow .4s var(--ease)}
.pk-card:hover{transform:translateY(-3px);box-shadow:var(--sh-2)}
.pk-card img{width:100%;height:100%;object-fit:cover;display:block}
.pk-card::after{content:"";position:absolute;inset:auto 0 0;height:45%;background:linear-gradient(180deg,transparent,rgba(42,29,26,.55))}
.pk-name{position:absolute;left:10px;right:10px;bottom:9px;z-index:1;font:600 13px/1.25 var(--sans);color:#fff;text-align:left;text-shadow:0 1px 3px rgba(0,0,0,.35)}
.pk-today{position:absolute;left:8px;top:8px;z-index:1;padding:3px 9px;border-radius:99px;background:var(--pearl);color:var(--rose-ink);font:700 11px/1.4 var(--sans);letter-spacing:.04em;box-shadow:var(--sh-1)}
/* ---------- reels ---------- */
.reels{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;background:#120c0b;color:#fff;overflow:hidden}
.reels::backdrop{background:#120c0b}
.reels[open]{display:flex;justify-content:center}
.rl-col{position:relative;width:min(100%,480px);height:100%;height:100dvh}
.rl-top{position:absolute;z-index:5;inset:0 0 auto;display:flex;align-items:center;gap:12px;padding:max(12px,env(safe-area-inset-top)) 14px 10px;background:linear-gradient(180deg,rgba(0,0,0,.45),transparent);pointer-events:none}
.rl-top>*{pointer-events:auto}
.rl-top b{font:600 17px/1 var(--display);letter-spacing:.01em}
.rl-found{margin-left:auto;padding:5px 10px;border-radius:99px;background:rgba(255,255,255,.16);font:600 12px/1.2 var(--sans);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.rl-x{display:grid;place-items:center;width:38px;height:38px;border:0;border-radius:50%;background:rgba(255,255,255,.16);color:#fff;cursor:pointer;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.rl-x svg{width:20px;height:20px}
.rl-track{height:100%;overflow-y:auto;scroll-snap-type:y mandatory;overscroll-behavior:contain;scrollbar-width:none;outline:none}
.rl-track::-webkit-scrollbar{display:none}
.rl-item{position:relative;height:100%;height:100dvh;scroll-snap-align:start;scroll-snap-stop:always;overflow:hidden;background:var(--c,#2a1d1a)}
.rl-media{position:absolute;inset:0;touch-action:pan-y}
.rl-media img{width:100%;height:100%;object-fit:cover;display:block;opacity:0;transition:opacity .5s var(--ease)}
.rl-item.ld .rl-media img,.rl-card .rl-media img{opacity:1}
.rl-item.on .rl-media img{animation:rlKen 9s ease-out both}
@keyframes rlKen{from{transform:scale(1.02)}to{transform:scale(1.13) translate(-1.5%,-2%)}}
.rl-item::after{content:"";position:absolute;inset:auto 0 0;height:46%;background:linear-gradient(180deg,transparent,rgba(18,12,11,.78));pointer-events:none}
.rl-info{position:absolute;z-index:2;left:16px;right:84px;bottom:calc(26px + env(safe-area-inset-bottom))}
.rl-chip{display:inline-block;padding:5px 11px;border-radius:99px;background:rgba(255,255,255,.18);color:#fff;font:600 12.5px/1.2 var(--sans);text-decoration:none;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.rl-code{margin:10px 0 4px;font:600 22px/1.15 var(--display)}
.rl-desc{margin:0;font:400 14.5px/1.45 var(--sans);color:rgba(255,255,255,.88);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.rl-rail{position:absolute;z-index:3;right:10px;bottom:calc(30px + env(safe-area-inset-bottom));display:grid;gap:16px;justify-items:center}
.rl-b{display:grid;justify-items:center;gap:4px;border:0;background:none;color:#fff;cursor:pointer;padding:0;font:600 11px/1.1 var(--sans);text-shadow:0 1px 3px rgba(0,0,0,.45)}
.rl-b svg{width:30px;height:30px;fill:none;stroke:#fff;stroke-width:1.9;stroke-linejoin:round;filter:drop-shadow(0 1px 3px rgba(0,0,0,.4))}
.rl-like[aria-pressed="true"] svg{fill:#ED4956;stroke:#ED4956}
.rl-save[aria-pressed="true"] svg{fill:#fff}
.rl-b.pop svg{animation:rlPop .45s cubic-bezier(.34,1.56,.64,1)}
@keyframes rlPop{40%{transform:scale(1.32)}}
.rl-burst{position:absolute;z-index:4;left:50%;top:45%;width:110px;height:110px;translate:-50% -50%;opacity:0;pointer-events:none}
.rl-burst svg{width:100%;height:100%;fill:#fff;filter:drop-shadow(0 6px 18px rgba(0,0,0,.35))}
.rl-burst.go{animation:rlBurst .9s cubic-bezier(.2,.9,.3,1.3) both}
@keyframes rlBurst{0%{opacity:0;transform:scale(.3) rotate(-14deg)}25%{opacity:1;transform:scale(1.1) rotate(4deg)}60%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1.25) translateY(-30px)}}
.rl-hint{position:absolute;z-index:4;left:0;right:0;bottom:calc(6px + env(safe-area-inset-bottom));margin:0;text-align:center;font:500 11px/1.2 var(--sans);color:rgba(255,255,255,.6);pointer-events:none;animation:rlHint 5s ease 1s both}
@keyframes rlHint{0%,80%{opacity:1}100%{opacity:0}}
/* surprise cards */
.rl-card{display:grid;place-items:center;background:radial-gradient(120% 90% at 30% 20%,color-mix(in srgb,var(--c,#D27C93) 55%,#3a2420),#1a1110)}
.rl-card .rl-media img{filter:blur(2px) brightness(.55)}
.rl-panel{position:relative;z-index:2;width:min(86%,380px);display:grid;justify-items:center;gap:10px;text-align:center;padding:26px 22px;border-radius:28px;background:rgba(255,253,251,.1);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.rl-panel h3{margin:0;font:600 clamp(24px,6vw,30px)/1.15 var(--display)}
.rl-panel p{margin:0;font:400 15px/1.5 var(--sans);color:rgba(255,255,255,.9)}
.rl-k{display:inline-flex;align-items:center;gap:6px;margin:0;font:700 11.5px/1.2 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--petal)}
.rl-k svg{width:14px;height:14px}
.rl-sub{font-size:13.5px!important;color:rgba(255,255,255,.72)!important}
.rl-quote blockquote{margin:4px 0;font:500 clamp(20px,5vw,24px)/1.4 var(--display);font-style:italic}
.rl-btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:44px;padding:0 20px;border:0;border-radius:99px;background:var(--pearl);color:var(--espresso);font:600 14.5px/1 var(--sans);text-decoration:none;cursor:pointer}
.rl-btn svg{width:16px;height:16px}
.rl-btn.ghost{background:rgba(255,255,255,.14);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.3)}
.rl-medal{display:grid;place-items:center;width:84px;height:84px;border-radius:50%;background:conic-gradient(from 210deg,#F7D58B,#E9A6B8,#C9A46B,#F7D58B);box-shadow:0 0 0 6px rgba(255,255,255,.12);color:#fff;animation:rlMedal 1.2s cubic-bezier(.34,1.56,.64,1) both}
.rl-medal svg{width:40px;height:40px}
@keyframes rlMedal{from{transform:scale(0) rotate(-40deg)}}
.rl-end .rl-panel{gap:12px}
/* ---------- Cake Match ---------- */
.cmatch{width:min(94vw,420px);max-height:94dvh;padding:0;border:0;border-radius:30px;background:var(--cream);color:var(--ink);box-shadow:var(--sh-3);overflow:auto}
.cmatch::backdrop{background:rgba(42,29,26,.55);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.cm-in{position:relative;display:grid;justify-items:center;gap:10px;padding:22px 18px 22px;text-align:center}
.cm-in .rl-k{color:var(--rose-ink)}
.cm-x{position:absolute;right:12px;top:12px;background:var(--blush);color:var(--espresso)}
.cm-p{margin:0;font:400 14.5px/1.45 var(--sans);color:var(--ink-2);max-width:30ch}
.cm-stack{position:relative;width:100%;max-width:300px;aspect-ratio:3/4;margin:6px 0}
.cm-card{position:absolute;inset:0;border-radius:24px;overflow:hidden;background:#eee;box-shadow:var(--sh-2);transform:translateY(calc(var(--d) * 10px)) scale(calc(1 - var(--d) * .04));transition:transform .3s var(--ease);touch-action:none;user-select:none;cursor:grab}
.cm-card img{width:100%;height:100%;object-fit:cover;pointer-events:none;display:block}
.cm-card p{position:absolute;left:0;right:0;bottom:0;margin:0;padding:30px 14px 12px;background:linear-gradient(180deg,transparent,rgba(0,0,0,.55));color:#fff;font:600 15px/1.2 var(--sans);text-align:left}
.cm-tag{position:absolute;top:18px;padding:6px 12px;border-radius:12px;font:800 16px/1 var(--sans);letter-spacing:.06em;text-transform:uppercase;opacity:0;transition:opacity .15s;border:3px solid}
.cm-tag.yes{left:16px;color:#2fa36b;border-color:#2fa36b;rotate:-12deg;background:rgba(255,255,255,.85)}
.cm-tag.no{right:16px;color:#e0566f;border-color:#e0566f;rotate:12deg;background:rgba(255,255,255,.85)}
.cm-card.lean-yes .cm-tag.yes,.cm-card.lean-no .cm-tag.no{opacity:1}
.cm-bar{width:100%;max-width:300px;height:5px;border-radius:99px;background:var(--blush);overflow:hidden}
.cm-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--petal),var(--rose));transition:width .35s var(--ease)}
.cm-act{display:flex;gap:26px;margin-top:4px}
.cm-act button{display:grid;place-items:center;width:62px;height:62px;border:0;border-radius:50%;background:var(--pearl);box-shadow:var(--sh-2);cursor:pointer;transition:transform .2s}
.cm-act button:active{transform:scale(.9)}
.cm-act svg{width:28px;height:28px}
.cm-no svg{stroke:#e0566f;stroke-width:2.4}
.cm-yes svg{fill:#ED4956}
.cm-h{margin:0;font:600 clamp(28px,7vw,36px)/1.1 var(--display);color:var(--espresso)}
.cm-six-k{margin-top:6px}
.cm-six{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;width:100%}
.cm-six button{border:0;padding:0;border-radius:16px;overflow:hidden;aspect-ratio:1;cursor:pointer;box-shadow:var(--sh-1)}
.cm-six img{width:100%;height:100%;object-fit:cover;display:block}
.cm-res-act{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:6px}
.cm-res-act .rl-btn{background:var(--espresso);color:var(--pearl)}
.cm-res-act .rl-btn.ghost{background:var(--pearl);color:var(--espresso);box-shadow:inset 0 0 0 1px var(--line-2)}
@media (min-width:700px){.rl-col{box-shadow:0 0 0 1px rgba(255,255,255,.06)}}
@media (prefers-reduced-motion:reduce){.rl-item.on .rl-media img,.rl-burst.go,.rl-medal,.rl-hint{animation:none}.rl-hint{opacity:0}}
/* today's cake: the photo stays sharp, the note sits at the bottom */
.rl-today{place-items:end center}
.rl-today .rl-media img{filter:none}
.rl-today .rl-panel{margin-bottom:calc(46px + env(safe-area-inset-bottom));background:rgba(18,12,11,.42)}
/* ---------- Cake Detective ---------- */
.cd-pic{width:100%;max-width:300px;aspect-ratio:1;border-radius:24px;overflow:hidden;box-shadow:var(--sh-2);background:var(--blush)}
.cd-pic img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .7s var(--ease)}
.cd-say{margin:0;min-height:1.3em;font:600 15px/1.3 var(--sans);color:var(--rose-ink)}
.cd-opts{display:grid;gap:8px;width:100%;max-width:300px}
.cd-opts .rl-btn{width:100%}
.cmatch .cd-opts .rl-btn.ghost{background:var(--pearl);color:var(--espresso);box-shadow:inset 0 0 0 1.5px var(--line-2)}
.cmatch .cd-opts .rl-btn.ok{background:#2fa36b;color:#fff;box-shadow:none}
.cmatch .cd-opts .rl-btn.no{opacity:.45;text-decoration:line-through}
/* ---------- share picks ---------- */
.cm-six span{display:block;border-radius:16px;overflow:hidden;aspect-ratio:1}
.cm-six span img{width:100%;height:100%;object-fit:cover;display:block}
.pk-name-f{display:grid;gap:6px;width:100%;max-width:300px;text-align:left;font:600 13px/1.3 var(--sans);color:var(--ink-2)}
.pk-name-f input{min-height:46px;padding:0 14px;border-radius:14px;border:1.5px solid var(--line-2);background:#fff;font:400 16px var(--sans);color:var(--ink)}
.pk-in-h{font-size:clamp(22px,6vw,28px)!important}
.pk-choose button{position:relative}
.pk-choose button i{position:absolute;right:6px;top:6px;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:rgba(255,255,255,.85);opacity:0;transform:scale(.6);transition:all .25s var(--ease)}
.pk-choose button i svg{width:16px;height:16px;fill:#ED4956}
.pk-choose button.fav{box-shadow:0 0 0 3px var(--rose-ink),var(--sh-1)}
.pk-choose button.fav i{opacity:1;transform:none}
.cm-res-act .rl-btn[disabled]{opacity:.45}
#ccPicksBtn{margin:4px 0 10px;width:100%;justify-content:center}
#ccPicksBtn svg{width:16px;height:16px;fill:none;stroke:currentColor}
/* ---------- welcome back ---------- */
.wb-pill{position:fixed;z-index:110;left:50%;bottom:calc(max(14px,env(safe-area-inset-bottom)) + 84px);display:flex;align-items:center;gap:10px;max-width:calc(100vw - 24px);padding:8px 8px 8px 16px;border-radius:99px;
  background:var(--espresso);color:var(--pearl);box-shadow:var(--sh-3);font:500 14px/1.3 var(--sans);translate:-50% 20px;opacity:0;transition:translate .5s cubic-bezier(.34,1.56,.64,1),opacity .35s}
.wb-pill.in{translate:-50% 0;opacity:1}
.wb-pill button{flex:none;min-height:36px;padding:0 14px;border:0;border-radius:99px;background:var(--pearl);color:var(--espresso);font:600 13.5px/1 var(--sans);cursor:pointer}
.wb-pill .wb-x{display:grid;place-items:center;width:32px;min-height:32px;padding:0;background:rgba(255,255,255,.14);color:#fff}
.wb-pill .wb-x svg{width:16px;height:16px}
@media (min-width:861px){.wb-pill{bottom:28px}}