@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&display=swap');*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#0d141a;color:#fff3d6;font-family:'DM Sans',sans-serif}#world{width:100%;height:100%;display:block;cursor:pointer}#vignette{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 50% 44%,transparent 35%,#060d1680 100%)}button{font:inherit;color:inherit;cursor:pointer}button:focus-visible{outline:2px solid #ffc151;outline-offset:6px}[hidden]{display:none!important}#chapter{position:absolute;top:35px;left:40px;font-size:10px;letter-spacing:3px;text-shadow:0 2px 8px #000}#chapter span{display:block;font-size:9px;opacity:.5;margin-top:10px}#sound{position:absolute;right:35px;top:32px;background:none;border:1px solid #fff3;padding:9px 12px;border-radius:20px;font-size:9px;letter-spacing:2px}#story{position:absolute;bottom:6%;left:0;width:100%;text-align:center;transition:opacity .6s}#line{font-family:Georgia,serif;font-size:clamp(20px,2.4vw,32px);text-shadow:0 2px 12px #000;margin:0 0 22px}#action{border:1px solid #e0b66d;background:#14271ed9;border-radius:3px;padding:14px 28px;font-size:13px;box-shadow:0 4px 30px #0005}#action span{display:block;font-size:8px;letter-spacing:3px;color:#efb455;margin-top:7px}#hint{display:block;font-size:9px;letter-spacing:1px;opacity:.5;margin-top:13px}#dialogue{position:absolute;bottom:6%;left:50%;transform:translateX(-50%);width:min(550px,88%);padding:24px 30px;background:#0b231ee8;border:1px solid #c2b47a55;border-radius:4px;backdrop-filter:blur(12px)}#dialogue>span{font-size:9px;letter-spacing:3px;color:#ffc05b}#dialogue p{font-family:Georgia,serif;font-size:23px;line-height:1.3;margin:12px 0 20px}#next{background:none;border:0;border-bottom:1px solid #ffc05b;color:#ffc05b;padding:0 0 5px;font-size:12px}#choices{position:absolute;right:7%;top:30%;background:#072c25ed;padding:30px;border:1px solid #d4a34a80;max-width:310px}#choices p{font-size:10px;letter-spacing:2px}#choices button{display:block;width:100%;margin:15px 0;padding:16px;border:1px solid #f8b748;background:#f8b748;color:#073829;text-align:left}#choices small{font-size:10px;opacity:.6}#restart{position:absolute;bottom:20px;left:25px;background:none;border:0;font-size:10px;opacity:.7}#loading{position:absolute;inset:0;display:grid;place-items:center;background:#10231c;letter-spacing:2px;font-size:13px}@media(max-width:600px){#chapter{top:22px;left:20px;font-size:8px;letter-spacing:2px}#sound{top:20px;right:15px}#story{bottom:8%}#dialogue{bottom:7%;padding:20px}#dialogue p{font-size:19px}#choices{right:5%;top:23%;max-width:240px;padding:18px}}

@media(min-width:800px){#dialogue{left:28px;bottom:28px;transform:none;width:320px;padding:19px 22px;background:#0b231edb}#dialogue p{font-size:19px;margin:12px 0 16px}#restart{left:auto;right:25px}}
/* Signature whiteboard (whiteboard.js) */
#world{touch-action:none}
#wallBtn{position:absolute;right:28px;bottom:64px;background:#f5f6f3;color:#17191e;border:0;border-radius:3px;padding:14px 18px 12px;font-size:13px;font-weight:700;text-align:left;box-shadow:0 6px 30px #0007;transition:transform .2s}
#wallBtn:hover{transform:rotate(-1.5deg)}
#wallBtn span{display:block;font-size:8px;letter-spacing:2px;font-weight:500;color:#1b47b5;margin-top:6px}
#signPad{position:absolute;right:28px;bottom:28px;width:230px;padding:18px;background:#0b231edb;border:1px solid #c2b47a55;border-radius:4px;backdrop-filter:blur(12px)}
#signPad p{margin:0 0 12px;font-size:9px;letter-spacing:3px;color:#ffc05b}
#signPad .inks{display:flex;gap:10px;margin-bottom:16px}
#signPad [data-ink]{width:30px;height:30px;border-radius:50%;border:3px solid #f5f6f3;background:var(--ink);padding:0}
#signPad [data-ink][aria-pressed=true]{outline:2px solid #ffc05b;outline-offset:3px}
#clearSig,#doneSig{display:inline-block;padding:10px 12px;font-size:12px;border-radius:2px;margin:0 6px 10px 0}
#clearSig{background:none;border:1px solid #fff4}
#doneSig{background:#f8b748;color:#073829;border:1px solid #f8b748;font-weight:700}
#signPad small{display:block;font-size:10px;opacity:.6;line-height:1.4}
@media(max-width:600px){#wallBtn{top:auto;bottom:calc(7% + 190px);right:15px;transform:none;padding:11px 14px 9px;font-size:12px}#wallBtn:hover{transform:none}#signPad{right:auto;left:50%;transform:translateX(-50%);top:70px;bottom:auto;width:min(330px,90%);padding:14px}#signPad small{display:none}}
/* Real Holé Molé menu panel (menu-data.js) in the brand's cream / green / orange */
#choices{right:28px;top:90px;width:min(400px,calc(100% - 56px));max-width:none;max-height:calc(100% - 240px);display:flex;flex-direction:column;padding:20px 20px 14px;background:#fffcf2f4;color:#0b5a2c;border:0;border-radius:4px;box-shadow:0 10px 50px #0008}
#choices p{margin:0 0 12px;font-size:10px;letter-spacing:3px;color:#0b5a2c;font-weight:700}
#tabs{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
#choices #tabs button{display:inline-block;width:auto;margin:0;padding:7px 10px;font-size:11px;font-weight:700;border:1px solid #0b5a2c33;background:none;color:#0b5a2c;border-radius:20px}
#choices #tabs button[aria-selected=true]{background:#0b5a2c;color:#ffe9b8;border-color:#0b5a2c}
#items{list-style:none;margin:0;padding:0 4px 0 0;overflow:auto;flex:1;min-height:0;overscroll-behavior:contain}
#choices #items button{display:grid;grid-template-columns:1fr auto;gap:2px 10px;width:100%;margin:0;padding:10px 4px;border:0;border-bottom:1px solid #0b5a2c1f;background:none;color:#0b5a2c;text-align:left;border-radius:0}
#items b{font-size:14px;text-transform:uppercase;letter-spacing:.3px}
#items span{color:#e58a00;font-weight:700;font-size:14px;white-space:nowrap}
#items small{grid-column:1/-1;font-size:11px;color:#22312a;opacity:.75;line-height:1.35}
#choices #items button:hover,#choices #items .picked{background:#f8b74833}
#items .note{font-size:10px;padding:10px 4px;color:#0b5a2c;opacity:.7}
#choices>small{margin-top:10px;font-size:10px;opacity:.6;color:#22312a}
@media(max-width:600px){#choices{right:12px;left:12px;width:auto;top:60px;max-height:calc(100% - 60px - 7% - 190px);padding:14px}body:has(#choices:not([hidden])) #wallBtn{display:none}}
/* HoleMole 2D sprite standing on the bottom-right corner of the dialogue (replaces the 3D mascot) */
#dialogue p{padding-right:64px}
#mole{position:absolute;right:-38px;bottom:-14px;height:142px;width:auto;pointer-events:none;filter:drop-shadow(0 8px 14px #0008);transform-origin:50% 100%;animation:mole-bob 2.6s ease-in-out infinite}
#mole.pop{animation:mole-pop .45s cubic-bezier(.3,1.6,.5,1),mole-bob 2.6s ease-in-out .45s infinite}
@keyframes mole-bob{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-5px) rotate(-1.5deg)}}
@keyframes mole-pop{0%{transform:scale(.82) translateY(10px)}100%{transform:scale(1) translateY(0)}}
@media(prefers-reduced-motion:reduce){#mole,#mole.pop{animation:none}}
@media(max-width:600px){#mole{right:-8px;bottom:-10px;height:118px}#dialogue p{padding-right:70px}}
/* Notch / Dynamic Island / home-indicator safe areas (iOS app and mobile Safari; zero elsewhere) */
#chapter{top:calc(35px + env(safe-area-inset-top));left:calc(40px + env(safe-area-inset-left))}
#sound{top:calc(32px + env(safe-area-inset-top));right:calc(35px + env(safe-area-inset-right))}
#restart{bottom:calc(20px + env(safe-area-inset-bottom))}
@media(min-width:800px){#dialogue{left:calc(28px + env(safe-area-inset-left));bottom:calc(28px + env(safe-area-inset-bottom))}#wallBtn{right:calc(28px + env(safe-area-inset-right))}#signPad{right:calc(28px + env(safe-area-inset-right));bottom:calc(28px + env(safe-area-inset-bottom))}#choices{right:calc(28px + env(safe-area-inset-right))}}
@media(max-width:600px){#chapter{top:calc(22px + env(safe-area-inset-top));left:20px}#sound{top:calc(20px + env(safe-area-inset-top));right:15px}#dialogue{bottom:calc(7% + env(safe-area-inset-bottom))}#choices{top:calc(60px + env(safe-area-inset-top))}#signPad{top:calc(70px + env(safe-area-inset-top))}}
@media(max-width:600px){#wallBtn{bottom:calc(7% + 205px + env(safe-area-inset-bottom))}#choices{max-height:calc(100% - 60px - env(safe-area-inset-top) - 7% - 200px - env(safe-area-inset-bottom))}}
/* ---------- Start screen (home.js) ---------- */
@font-face{font-family:'Lilita One';src:url(assets/fonts/LilitaOne-Regular.ttf) format('truetype');font-display:swap}
#home{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;padding:calc(24px + env(safe-area-inset-top)) 20px calc(24px + env(safe-area-inset-bottom));overflow:hidden;background:radial-gradient(ellipse at 50% 30%,#13693a 0,#0a4527 45%,#052615 100%);color:#fff3d6;text-align:center;transition:opacity .6s,transform .6s}
#home::before{content:'';position:absolute;inset:0;background:url(assets/logo.png) center/220px repeat;opacity:.035;filter:grayscale(1);pointer-events:none}
#home.leaving{opacity:0;transform:scale(1.06)}
.home-inner{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;width:min(460px,100%)}
.home-logo{width:132px;height:132px;border-radius:26px;box-shadow:0 18px 40px #0009,0 0 0 1px #ffffff1a;animation:home-in .7s cubic-bezier(.2,1.4,.5,1) both}
.home-logo.small{width:96px;height:96px;border-radius:20px}
.home-tag{font-family:'Lilita One','Arial Black',sans-serif;font-size:clamp(26px,7vw,40px);letter-spacing:1px;margin:14px 0 0;color:#ffb21e;text-shadow:0 3px 0 #6b3a07}
.home-sub{margin:0 0 18px;font-size:12px;letter-spacing:1.5px;opacity:.75}
.baguette{background:none;border:0;padding:0;width:min(440px,96vw);display:flex;flex-direction:column;align-items:center;transform-origin:50% 70%;animation:home-in .8s .15s cubic-bezier(.2,1.4,.5,1) both,loaf-bob 3.2s 1s ease-in-out infinite;-webkit-tap-highlight-color:transparent}
.baguette svg{width:100%;height:auto;overflow:visible;filter:drop-shadow(0 10px 18px #0007)}
.baguette span{margin-top:-4px;font-size:11px;letter-spacing:2.5px;text-transform:uppercase;color:#ffe6a6}
/* Hover only pauses the idle bob (never the entrance fade), and only on real hover devices —
   otherwise iOS "sticky hover" after a tap could freeze the button invisible. */
.baguette svg{transition:transform .25s cubic-bezier(.2,1.6,.5,1)}
@media(hover:hover){.baguette:hover{animation-play-state:running,paused}.baguette:hover svg{transform:scale(1.04) rotate(-1deg)}}
.baguette:active svg{transform:scale(.96,.92)}
.baguette:focus-visible{outline:2px solid #ffc151;outline-offset:6px;border-radius:30px}
.baguette .steam path{opacity:0;animation:steam 2.8s ease-in-out infinite}
.baguette .steam path:nth-child(2){animation-delay:.9s}.baguette .steam path:nth-child(3){animation-delay:1.8s}
.browse{margin-top:14px;padding:13px 26px;border:1.5px solid #fff3d699;border-radius:30px;background:#0003;font-size:14px;font-weight:700;letter-spacing:.5px;color:#fff3d6;animation:home-in .8s .3s both}
.browse.solid{background:#ffb21e;color:#073829;border-color:#ffb21e}
.browse:hover{background:#fff3d61a}.browse.solid:hover{background:#ffc547}
.home-mole{position:absolute;right:max(4%,calc(50% - 360px));bottom:calc(4% + env(safe-area-inset-bottom));height:clamp(110px,18vh,170px);width:auto;animation:home-in .8s .45s both,mole-bob 2.6s 1.3s ease-in-out infinite;pointer-events:none;filter:drop-shadow(0 10px 16px #0008)}
@keyframes home-in{from{opacity:0;transform:translateY(18px) scale(.94)}}
@keyframes loaf-bob{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-4px) rotate(.6deg)}}
@keyframes steam{0%{opacity:0;transform:translateY(8px)}35%{opacity:.55}100%{opacity:0;transform:translateY(-14px)}}
@media(max-width:600px){.home-mole{right:2%;height:100px}.home-logo{width:112px;height:112px}}
@media(prefers-reduced-motion:reduce){.baguette,.home-logo,.browse,.home-mole,.baguette .steam path{animation:none!important;opacity:1}}

/* ---------- Dish actions in the menu panel ---------- */
#items .acts{display:flex;gap:8px;padding:2px 4px 12px;border-bottom:1px solid #0b5a2c1f}
#choices #items .acts button{display:block;flex:1;width:auto;margin:0;padding:11px 8px;border-radius:24px;font-size:12px;font-weight:700;text-align:center;grid-template-columns:none}
#choices #items .acts [data-act=add]{background:#fff;border:1.5px solid #0b5a2c;color:#0b5a2c}
#choices #items .acts [data-act=order]{background:#f39200;border:1.5px solid #f39200;color:#fff}
#choices #items .acts button:hover{filter:brightness(1.05)}
#choices #items [aria-expanded=true]{background:#f8b74833;border-bottom-color:transparent}

/* ---------- Cart icon, highlight and coach mark (cart.js) ---------- */
#cartBtn{position:fixed;z-index:70;top:calc(24px + env(safe-area-inset-top));right:calc(24px + env(safe-area-inset-right));width:52px;height:52px;border-radius:50%;border:0;background:#fff3d6;color:#0b5a2c;display:grid;place-items:center;box-shadow:0 8px 24px #0008}
#cartBtn svg{width:26px;height:26px}
#cartBtn b{position:absolute;top:-4px;right:-4px;min-width:22px;height:22px;padding:0 6px;border-radius:11px;background:#e2231a;color:#fff;font-size:12px;line-height:22px;box-shadow:0 0 0 2px #fff3d6}
#cartBtn .halo{position:absolute;inset:-6px;border-radius:50%;border:3px solid #ffb21e;opacity:0;pointer-events:none}
#cartBtn.attention{background:#ffb21e;color:#3b2200}
#cartBtn.attention .halo{animation:halo 1.4s ease-out infinite}
#cartBtn.bump{animation:bump .55s cubic-bezier(.3,1.8,.5,1)}
@keyframes halo{0%{opacity:.9;transform:scale(.9)}100%{opacity:0;transform:scale(1.7)}}
@keyframes bump{0%{transform:scale(1)}35%{transform:scale(1.32) rotate(-8deg)}100%{transform:scale(1)}}
body.has-cart #sound{right:calc(92px + env(safe-area-inset-right))}
#cartTip{position:fixed;z-index:70;top:calc(88px + env(safe-area-inset-top));right:calc(14px + env(safe-area-inset-right));max-width:230px;padding:12px 14px;border-radius:12px;background:#ffb21e;color:#2d1a00;font-weight:700;font-size:14px;box-shadow:0 10px 30px #0008;animation:tip-in .5s cubic-bezier(.2,1.6,.5,1)}
#cartTip::before{content:'';position:absolute;top:-8px;right:28px;border:8px solid transparent;border-top:0;border-bottom-color:#ffb21e}
#cartTip small{display:block;font-weight:500;font-size:11px;margin-top:3px}
@keyframes tip-in{from{opacity:0;transform:translateY(-10px) scale(.9)}}
.cart-chip{position:fixed;z-index:90;transform:translate(0,0);translate:-50% -50%;padding:7px 12px;border-radius:16px;background:#f39200;color:#fff;font-weight:700;font-size:12px;white-space:nowrap;pointer-events:none;box-shadow:0 6px 16px #0006;transition:transform .65s cubic-bezier(.5,-.3,.6,1),opacity .65s ease-in}

/* ---------- Cart drawer, checkout and orders ---------- */
#cartScrim{position:fixed;inset:0;z-index:75;background:#0009;opacity:0;transition:opacity .25s}
body.cart-open #cartScrim{opacity:1}
#cartDrawer{position:fixed;z-index:80;top:0;right:0;bottom:0;width:min(420px,100%);display:flex;flex-direction:column;background:#fffcf2;color:#0b5a2c;box-shadow:-10px 0 40px #0008;transform:translateX(100%);transition:transform .28s cubic-bezier(.2,.8,.3,1);padding-top:env(safe-area-inset-top)}
body.cart-open #cartDrawer{transform:none}
#cartDrawer>header{display:flex;align-items:center;justify-content:space-between;padding:16px 16px 8px}
#cartDrawer nav{display:flex;gap:6px}
#cartDrawer nav button{padding:8px 13px;border-radius:20px;border:1px solid #0b5a2c33;background:none;color:#0b5a2c;font-size:13px;font-weight:700}
#cartDrawer nav [aria-current=true]{background:#0b5a2c;color:#ffe9b8;border-color:#0b5a2c}
#cartClose{width:38px;height:38px;border-radius:50%;border:0;background:#0b5a2c14;color:#0b5a2c;font-size:24px;line-height:1}
#cartBody{flex:1;overflow:auto;padding:6px 18px calc(22px + env(safe-area-inset-bottom));overscroll-behavior:contain}
#cartBody .lead{font-size:13px;line-height:1.45;color:#22312a;margin:6px 0 12px}
#cartBody .lines{list-style:none;margin:0;padding:0}
#cartBody .lines li{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:10px;padding:12px 0;border-bottom:1px solid #0b5a2c1f}
#cartBody .lines b{display:block;font-size:14px;text-transform:uppercase}
#cartBody .lines small{color:#22312a;opacity:.7;font-size:12px}
#cartBody .lines em{font-style:normal;font-weight:700;color:#e58a00;min-width:58px;text-align:right}
#cartBody .qty{display:flex;align-items:center;gap:8px}
#cartBody .qty button{width:30px;height:30px;border-radius:50%;border:1.5px solid #0b5a2c;background:none;color:#0b5a2c;font-size:17px;line-height:1}
#cartBody .total{display:flex;justify-content:space-between;font-size:16px;margin:16px 0}
#cartBody .total b{color:#e58a00;font-size:20px}
#cartBody .primary{display:block;width:100%;padding:15px;border:0;border-radius:28px;background:#0b5a2c;color:#ffe9b8;font-size:15px;font-weight:700;margin-top:6px}
#cartBody .ghost{display:block;width:100%;padding:12px;border:0;background:none;color:#0b5a2c;font-size:13px;font-weight:700;margin-top:6px;text-decoration:underline}
#cartBody form{display:flex;flex-direction:column;gap:12px;margin-top:6px}
#cartBody label{display:flex;flex-direction:column;gap:5px;font-size:12px;font-weight:700;letter-spacing:.3px}
#cartBody input:not([type=radio]),#cartBody textarea{font:inherit;font-size:16px;padding:11px 12px;border:1.5px solid #0b5a2c40;border-radius:10px;background:#fff;color:#14231c}
#cartBody fieldset{border:0;padding:0;margin:0;display:flex;gap:16px;align-items:center;font-size:13px}
#cartBody fieldset legend{font-size:12px;font-weight:700;margin-bottom:6px}
#cartBody fieldset label{flex-direction:row;align-items:center;font-weight:500;font-size:14px}
#cartBody .confirm{display:flex;flex-direction:column;gap:8px;margin:12px 0 4px}
#cartBody .confirm a{display:flex;align-items:center;justify-content:center;gap:9px;padding:14px;border-radius:28px;font-weight:700;font-size:15px;text-decoration:none}
#cartBody .confirm svg{width:20px;height:20px}
#cartBody .confirm .wa{background:#25d366;color:#053d1c}
#cartBody .confirm .call{background:#fff;border:1.5px solid #0b5a2c;color:#0b5a2c}
#cartBody .ok{margin:14px 0 4px;padding:12px 14px;border-radius:12px;background:#0b5a2c14;font-size:14px}
#cartBody .order{padding:14px;margin-bottom:12px;border-radius:14px;background:#fff;box-shadow:0 2px 10px #0b5a2c14}
#cartBody .order header{display:flex;gap:10px;align-items:baseline}
#cartBody .order header span{flex:1;font-size:12px;opacity:.65}
#cartBody .order header em{font-style:normal;font-weight:700;color:#e58a00}
#cartBody .order p{margin:6px 0;font-size:13px;color:#22312a}
#cartBody .order small{display:block;font-size:12px;opacity:.7}
#cartBody .order .state{color:#e58a00;opacity:1;font-weight:700;margin-top:4px}
#cartBody .empty{text-align:center;padding:40px 10px}
#cartBody .empty button{padding:12px 22px;border-radius:24px;border:0;background:#0b5a2c;color:#ffe9b8;font-weight:700}
@media(max-width:600px){#cartBtn{top:calc(14px + env(safe-area-inset-top));right:12px;width:48px;height:48px}body.has-cart #sound{right:72px}#cartTip{top:calc(74px + env(safe-area-inset-top));right:8px}
  #cartDrawer{top:auto;width:100%;max-height:90%;border-radius:22px 22px 0 0;transform:translateY(100%);padding-top:0}}
/* "—— ou ——" divider between the two start-screen buttons */
.home-or{display:flex;align-items:center;gap:14px;width:min(300px,80%);margin:16px 0 2px;color:#ffe6a6;font-size:12px;letter-spacing:3px;text-transform:uppercase;animation:home-in .8s .25s both}
.home-or::before,.home-or::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,transparent,#ffe6a699)}
.home-or::after{background:linear-gradient(90deg,#ffe6a699,transparent)}
.home-or+.browse{margin-top:10px}
/* ---------- Account sign-up (account.js) ---------- */
.needs-signup #home{display:none}
#signup{position:fixed;inset:0;z-index:62;display:flex;align-items:center;justify-content:center;overflow-y:auto;padding:calc(24px + env(safe-area-inset-top)) 20px calc(24px + env(safe-area-inset-bottom));background:radial-gradient(ellipse at 50% 25%,#13693a 0,#0a4527 50%,#052615 100%);color:#fff3d6}
#signup[hidden]{display:none}
#signup::before{content:'';position:fixed;inset:0;background:url(assets/logo.png) center/220px repeat;opacity:.035;pointer-events:none}
.su-card{position:relative;width:min(400px,100%);display:flex;flex-direction:column;align-items:center;text-align:center;animation:home-in .6s cubic-bezier(.2,1.4,.5,1) both}
.su-card .home-logo{width:96px;height:96px;border-radius:22px}
#signup h1{font-family:'Lilita One','Arial Black',sans-serif;font-weight:400;font-size:clamp(26px,7vw,34px);margin:18px 0 4px;color:#ffb21e;text-shadow:0 3px 0 #6b3a07}
.su-sub{margin:0 0 20px;font-size:14px;opacity:.85}
#signup form{width:100%;display:flex;flex-direction:column;gap:8px;text-align:left}
#signup label{display:flex;flex-direction:column;gap:6px;margin-top:6px}
#signup label span{font-size:12px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:#ffe6a6}
#signup input{font:inherit;font-size:17px;height:54px;padding:0 16px;border-radius:16px;border:2px solid transparent;background:#fffaf0;color:#14231c;outline:0;transition:border-color .2s,box-shadow .2s}
#signup input:focus{border-color:#ffb21e;box-shadow:0 0 0 4px #ffb21e33}
#signup input[aria-invalid=true]{border-color:#ff6b5b}
.su-err{color:#ffb4a8;font-size:12.5px;font-weight:700;margin:-2px 2px 0}
#signup button[type=submit]{margin-top:14px;height:56px;border:0;border-radius:30px;background:#fff3d633;color:#fff3d6;font-size:16px;font-weight:700;transition:background .25s,color .25s,transform .15s}
#signup button[type=submit].ready{background:#ffb21e;color:#2d1a00;box-shadow:0 10px 24px #0006}
#signup button[type=submit]:active{transform:scale(.97)}
.su-privacy{margin:14px 4px 0;font-size:11.5px;line-height:1.45;opacity:.7;text-align:center}
.su-welcome{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;background:inherit;animation:fade .3s both}
.su-welcome[hidden]{display:none}
.su-welcome img{height:170px;width:auto;animation:home-in .6s cubic-bezier(.2,1.6,.5,1) both}
.su-welcome p{font-family:'Lilita One','Arial Black',sans-serif;font-size:38px;margin:10px 0 0;color:#fff}
.su-welcome b{font-weight:400;color:#ffb21e}
.su-welcome small{opacity:.8}
.home-hello{margin:14px 0 -8px;font-size:15px;font-weight:700;color:#ffe6a6}
#cartBody .who{margin:4px 0 2px;padding:12px 14px;border-radius:12px;background:#0b5a2c0d;font-size:13.5px;line-height:1.5}
#cartBody .who button{border:0;background:none;color:#e58a00;font-weight:700;text-decoration:underline;padding:0 0 0 4px}
#cartBody .err{color:#c0291d;font-size:13px;font-weight:700;margin:0}
#cartBody .danger{color:#c0291d}
.needs-signup #cartBtn,.needs-signup #cartTip,body:has(#signup:not([hidden])) #cartBtn,body:has(#signup:not([hidden])) #cartTip{display:none}
/* ---------- Profile button + panel (profile.js) ---------- */
.avatar{position:relative;display:grid;place-items:center;width:100%;height:100%;border-radius:50%;background:var(--tint,#ffe6b8);overflow:hidden}
.avatar svg{width:74%;height:74%}
.avatar img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.avatar.has-img svg{display:none}  /* sprite loaded: hide the fallback illustration behind its transparent areas */
#profileBtn{position:absolute;z-index:20;top:calc(26px + env(safe-area-inset-top));right:calc(30px + env(safe-area-inset-right));width:54px;height:54px;padding:3px;border:0;border-radius:50%;background:var(--ring,#ffffff33);box-shadow:0 6px 20px #0007;transition:transform .2s}
#profileBtn .avatar{border:2px solid #0b231e}
#profileBtn b{position:absolute;right:-4px;bottom:-4px;min-width:22px;height:22px;padding:0 5px;border-radius:11px;background:#0b5a2c;color:#ffe9b8;font-size:11px;line-height:22px;box-shadow:0 0 0 2px #fff3d6}
#profileBtn:active{transform:scale(.92)}
body.has-cart #profileBtn{right:calc(92px + env(safe-area-inset-right))}
@media(max-width:600px){#profileBtn{top:calc(14px + env(safe-area-inset-top));right:12px;width:48px;height:48px}body.has-cart #profileBtn{right:70px}}
#profileScrim{position:fixed;inset:0;z-index:76;background:#0009;opacity:0;transition:opacity .25s}
body.profile-open #profileScrim{opacity:1}
#profileSheet{position:fixed;z-index:81;top:0;right:0;bottom:0;width:min(400px,100%);overflow-y:auto;background:#fffcf2;color:#0b5a2c;box-shadow:-10px 0 40px #0008;transform:translateX(100%);transition:transform .28s cubic-bezier(.2,.8,.3,1);padding:calc(10px + env(safe-area-inset-top)) 18px calc(26px + env(safe-area-inset-bottom));overscroll-behavior:contain}
body.profile-open #profileSheet{transform:none}
#profileSheet header{display:flex;align-items:center;justify-content:space-between;margin:6px 0 4px}
#profileSheet h2{font-family:'Lilita One','Arial Black',sans-serif;font-weight:400;font-size:24px;margin:0}
.pf-x{width:38px;height:38px;border-radius:50%;border:0;background:#0b5a2c14;color:#0b5a2c;font-size:24px;line-height:1}
.pf-id{display:flex;flex-direction:column;align-items:center;text-align:center;padding:10px 0 4px}
.pf-big{width:112px;height:112px;padding:5px;border-radius:50%;background:var(--ring)}
.pf-big .avatar{border:3px solid #fffcf2}
.pf-id h3{font-family:'Lilita One','Arial Black',sans-serif;font-weight:400;font-size:26px;margin:12px 0 0;color:#14231c}
.pf-id p{margin:2px 0 8px;font-size:13px;color:#14231c99}
.pf-level{padding:6px 12px;border-radius:16px;background:#0b5a2c;color:#ffe9b8;font-size:12px;font-weight:700;letter-spacing:.5px}
.pf-xp{margin:14px 0 4px;padding:14px;border-radius:16px;background:#fff;box-shadow:0 2px 10px #0b5a2c14}
.pf-xp-top{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font-size:12px;color:#14231c99}
.pf-xp-top b{font-family:'Lilita One',sans-serif;font-weight:400;font-size:24px;color:#e58a00}
.pf-bar{height:12px;margin-top:8px;border-radius:6px;background:#0b5a2c14;overflow:hidden}
.pf-bar i{display:block;height:100%;border-radius:6px;background:linear-gradient(90deg,#ffb21e,#f39200);transition:width .6s cubic-bezier(.2,.8,.3,1)}
#profileSheet h4{margin:18px 0 8px;font-size:11px;letter-spacing:2px;text-transform:uppercase;color:#14231c88}
.pf-avatars{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}
.pf-avatars button{aspect-ratio:1;padding:3px;border:2px solid transparent;border-radius:50%;background:none}
.pf-avatars [aria-pressed=true]{border-color:#f39200;box-shadow:0 0 0 3px #f3920033}
.pf-earn,.pf-ledger{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.pf-earn li,.pf-ledger li{display:flex;justify-content:space-between;gap:8px;padding:11px 12px;border-radius:12px;background:#fff;font-size:13.5px;color:#14231c}
.pf-earn b,.pf-ledger b{color:#e58a00;white-space:nowrap}
.pf-earn .done span::before{content:'✓ ';color:#0b5a2c;font-weight:700}
.pf-earn .done{opacity:.7}
.pf-earn .soon{background:none;border:1.5px dashed #0b5a2c33;color:#14231c88}
.pf-earn .soon b{color:#14231c66}
.pf-settings{display:grid;gap:8px}
.pf-switch{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;border-radius:12px;background:#fff;font-size:14.5px;font-weight:700;color:#14231c}
.pf-switch [role=switch]{width:52px;height:30px;border-radius:15px;border:0;background:#14231c33;padding:3px;transition:background .2s}
.pf-switch [role=switch] i{display:block;width:24px;height:24px;border-radius:50%;background:#fff;box-shadow:0 2px 6px #0004;transition:transform .2s}
.pf-switch [aria-checked=true]{background:#0b5a2c}
.pf-switch [aria-checked=true] i{transform:translateX(22px)}
.pf-link{padding:13px;border-radius:12px;border:1.5px solid #0b5a2c33;background:none;color:#0b5a2c;font-weight:700;font-size:14px}
#cartBody .xpline{margin:6px 0 0;padding:10px 12px;border-radius:12px;background:#ffb21e26;font-size:13.5px;color:#14231c}
#cartBody .xpgain{display:inline-block;margin-left:4px;padding:2px 8px;border-radius:10px;background:#ffb21e;color:#2d1a00;font-weight:700;font-size:12px}

/* ---------- XP toasts + level-up (xp.js) ---------- */
#xpToasts{position:fixed;z-index:95;left:50%;top:calc(84px + env(safe-area-inset-top));transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;pointer-events:none}
.xp-toast{display:flex;align-items:center;gap:10px;padding:10px 16px 10px 10px;border-radius:28px;background:#0b5a2c;color:#fff3d6;box-shadow:0 12px 30px #0007;font-size:13px;animation:xp-in .5s cubic-bezier(.2,1.6,.5,1) both;transition:opacity .4s,transform .4s}
.xp-toast b{padding:6px 11px;border-radius:18px;background:#ffb21e;color:#2d1a00;font-family:'Lilita One',sans-serif;font-weight:400;font-size:17px;letter-spacing:.5px}
.xp-toast.out{opacity:0;transform:translateY(-14px)}
@keyframes xp-in{from{opacity:0;transform:translateY(-20px) scale(.8)}}
.xp-levelup{position:fixed;z-index:96;left:50%;top:38%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:4px;padding:22px 30px;border-radius:26px;background:radial-gradient(circle at 50% 0,#1d8a4b,#0b5a2c 60%,#073d20);color:#fff3d6;box-shadow:0 24px 60px #000a;text-align:center;animation:lvl-in .6s cubic-bezier(.2,1.6,.5,1) both;transition:opacity .5s,transform .5s;pointer-events:none}
.xp-levelup small{letter-spacing:3px;font-size:11px;color:#ffe6a6}
.xp-levelup b{font-family:'Lilita One',sans-serif;font-weight:400;font-size:32px;color:#ffb21e}
.xp-levelup span{font-size:13px;opacity:.85}
.xp-levelup.out{opacity:0;transform:translate(-50%,-60%) scale(.95)}
@keyframes lvl-in{from{opacity:0;transform:translate(-50%,-50%) scale(.6)}}
.xp-confetti{position:fixed;z-index:97;top:38%;width:9px;height:14px;border-radius:2px;pointer-events:none;animation:confetti 1.6s cubic-bezier(.2,.7,.4,1) both}
@keyframes confetti{0%{transform:translate(0,0) rotate(0);opacity:1}70%{opacity:1}100%{transform:translate(var(--dx),calc(var(--dy) * -1.4 + 380px)) rotate(var(--r));opacity:0}}
@media(prefers-reduced-motion:reduce){.xp-toast,.xp-levelup{animation:none}}