:root {
    --orange: #f88e36; --orange-glow: rgba(248,142,54,0.22);
    --surface: rgba(255,255,255,0.04); --border: rgba(255,255,255,0.08);
    --text-muted: rgba(255,255,255,0.5);
}
html, body { padding:0; margin:0; font-family:'Inter','Segoe UI',sans-serif; width:100%; height:100%; overflow:hidden; background:#080808; color:#fff; }
#matterport-bg { position:fixed; inset:0; z-index:1; background:#000; pointer-events:none; transform:scale(1.15); transform-origin:center; transition:all 1.2s cubic-bezier(0.25,0.8,0.25,1); }
#matterport-bg iframe { width:100%; height:100%; border:0; filter:brightness(0.4) blur(4px) saturate(0.7); }
body.zcomponent-launched #matterport-bg { opacity:0; pointer-events:none; }
#branding-splash { position:fixed; inset:0; background:radial-gradient(ellipse at center,#1a0800 0%,#080808 100%); z-index:10001; display:flex; flex-direction:column; justify-content:center; align-items:center; opacity:0; transition:opacity 1.2s ease; pointer-events:none; }
#branding-splash.visible { opacity:1; pointer-events:auto; }
#branding-splash.hidden { opacity:0; pointer-events:none; }
#branding-splash img { width:110px; height:110px; border-radius:50%; padding:14px; background:#fff; border:2px solid var(--orange); box-shadow:0 0 50px var(--orange-glow),0 20px 60px rgba(0,0,0,0.6); margin-bottom:28px; object-fit:contain; box-sizing:border-box; }
.spinner { width:34px; height:34px; border:3px solid rgba(255,255,255,0.1); border-top:3px solid var(--orange); border-radius:50%; animation:spin 0.9s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
.splash { position:fixed; inset:0; z-index:2000; display:none; align-items:center; justify-content:flex-start; flex-direction:column; text-align:center; opacity:0; transition:opacity 0.6s ease; }
.splash.visible { display:flex !important; opacity:1; }
#background-gradient { position:absolute; inset:0; background:radial-gradient(ellipse at 50% -10%,rgba(248,142,54,0.1) 0%,transparent 55%),radial-gradient(ellipse at center,rgba(0,0,0,0.2) 0%,rgba(0,0,0,0.7) 45%,rgba(0,0,0,0.96) 100%); backdrop-filter:blur(2px); z-index:1; pointer-events:none; }
.microsite-container { max-width:100%; width:100%; padding:24px 20px 48px; box-sizing:border-box; text-align:center; color:#fff; position:relative; z-index:2; height:100%; overflow-y:auto; overflow-x:hidden; overscroll-behavior-y:contain; scrollbar-width:none; }
/* Keep inner content visually centered but let the scroll container span full width */
.microsite-container > * { max-width:480px; margin-left:auto; margin-right:auto; }
.microsite-container::-webkit-scrollbar { display:none; }
.logo-wrap { position:relative; width:170px; height:170px; margin:0 auto 12px; }
.logo-ring { position:absolute; border-radius:50%; border:2px solid var(--orange); animation:ring-pulse 3s ease-in-out infinite; }
.logo-ring-1 { inset:-9px; opacity:0.5; }
.logo-ring-2 { inset:-20px; border-width:1px; border-color:rgba(248,142,54,0.2); animation-delay:1s; opacity:0.35; }
@keyframes ring-pulse { 0%,100%{transform:scale(1);opacity:0.5} 50%{transform:scale(1.05);opacity:0.15} }
.logo { width:170px; height:170px; display:block; border-radius:50%; background:#fff; border:none; box-shadow:0 0 50px var(--orange-glow),0 18px 55px rgba(0,0,0,0.65); object-fit:contain; padding:18px; box-sizing:border-box; transition:transform 0.4s ease; }
.logo:hover { transform:scale(1.05); }
.headline, .title, p { text-shadow:none; }
.headline { font-size:19px; font-weight:900; text-transform:uppercase; letter-spacing:2.5px; margin:32px auto 4px; line-height:1.2; background:linear-gradient(120deg,#f88e36,#ffc47a,#f88e36); background-size:200%; -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; animation:shimmer 6s linear infinite; filter:drop-shadow(0 0 10px rgba(248,142,54,0.25)); }
/* 10% off promo banner — sits between the address line and the ORDER PICKUP button. */
/* CTA + corner badge — wrapper hosts the absolute-positioned "Save 10%" pill so it can
   sit above the orange button without being clipped by the button's overflow:hidden. */
.cta-stack { position:relative; width:100%; max-width:360px; margin:14px auto 0; }
.cta-stack .shared-button { margin:0 auto; }
.promo-badge { position:absolute; top:-9px; left:50%; transform:translateX(-50%); z-index:2; display:inline-flex; align-items:center; gap:5px; padding:3px 9px; background:#fff; color:#e8731a; font-size:9px; font-weight:900; letter-spacing:1.4px; text-transform:uppercase; border-radius:999px; border:1px solid rgba(248,142,54,0.65); box-shadow:0 4px 12px rgba(248,142,54,0.45); white-space:nowrap; pointer-events:none; }
.promo-pulse { width:6px; height:6px; background:#f88e36; border-radius:50%; box-shadow:0 0 0 0 rgba(248,142,54,0.7); animation:promo-pulse 1.6s ease-out infinite; }
@keyframes promo-pulse { 0%{box-shadow:0 0 0 0 rgba(248,142,54,0.7);} 70%{box-shadow:0 0 0 8px rgba(248,142,54,0);} 100%{box-shadow:0 0 0 0 rgba(248,142,54,0);} }
@keyframes shimmer { 0%{background-position:0%} 100%{background-position:200%} }
.address-line { font-size:12px; color:rgba(255,255,255,0.6); margin-top:6px; font-weight:500; letter-spacing:0.8px; }
.pickup-tag { display:inline-block; background:rgba(248,142,54,0.18); color:var(--orange); border:1px solid rgba(248,142,54,0.45); padding:2px 7px; border-radius:999px; font-size:9px; font-weight:900; letter-spacing:1.4px; text-transform:uppercase; margin-right:6px; vertical-align:middle; position:relative; top:-1px; }
.separator { border:none; height:1px; background:linear-gradient(90deg,transparent,var(--orange),transparent); width:120px; margin:20px auto; }
.shared-button { display:block; width:100%; max-width:360px; margin:14px auto; padding:17px 20px; box-sizing:border-box; border-radius:50px; font-size:13px; font-weight:800; cursor:pointer; text-decoration:none; text-transform:uppercase; letter-spacing:1.5px; background:rgba(0,0,0,0.65); color:var(--orange); border:1px solid rgba(248,142,54,0.35); backdrop-filter:blur(12px); box-shadow:0 4px 20px rgba(0,0,0,0.4),inset 0 1px 0 rgba(255,255,255,0.05); transition:all 0.35s cubic-bezier(0.25,0.8,0.25,1); }
.shared-button:hover { transform:translateY(-3px); background:var(--orange); color:#fff; box-shadow:0 12px 40px rgba(248,142,54,0.45),0 4px 12px rgba(0,0,0,0.2); }
.button-ar { position:relative; overflow:hidden; background:linear-gradient(135deg,#f88e36,#e8731a,#f99a47); background-size:200%; color:#fff; border:none; box-shadow:0 8px 32px rgba(248,142,54,0.45); animation:btn-bg 3s linear infinite; }
.button-ar::after { content:''; position:absolute; top:0; left:-120%; width:55%; height:100%; background:linear-gradient(90deg,transparent,rgba(255,255,255,0.18),transparent); animation:btn-shine 2.8s ease-in-out infinite 0.8s; }
@keyframes btn-bg { 0%{background-position:0%} 100%{background-position:200%} }
@keyframes btn-shine { 0%{left:-120%} 100%{left:220%} }
.button-ar:hover { background:linear-gradient(135deg,#ff9f4a,#f88e36); box-shadow:0 12px 45px rgba(248,142,54,0.6); transform:translateY(-3px) scale(1.01); }
.icon-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin:20px auto; width:100%; max-width:320px; }
.icon-link { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; padding:16px 8px; border-radius:16px; text-decoration:none; font-size:20px; background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.08); color:var(--orange); backdrop-filter:blur(12px); box-shadow:0 4px 16px rgba(0,0,0,0.35); transition:all 0.35s cubic-bezier(0.25,0.8,0.25,1); }
.icon-link .lbl { font-size:9px; font-weight:700; letter-spacing:0.4px; text-transform:uppercase; color:rgba(255,255,255,0.6); }
.icon-link:hover { transform:translateY(-5px); background:rgba(248,142,54,0.1); border-color:rgba(248,142,54,0.35); box-shadow:0 10px 28px rgba(248,142,54,0.18); }
.section-label { font-size:10px; font-weight:800; letter-spacing:3px; text-transform:uppercase; color:rgba(255,255,255,0.5); margin:28px 0 14px; display:flex; align-items:center; gap:12px; }
.section-label::before,.section-label::after { content:''; flex:1; height:1px; background:rgba(255,255,255,0.07); }
.showcase-controls { display:flex; gap:5px; margin-bottom:0; justify-content:center !important; background:rgba(255,255,255,0.04); border-radius:50px; padding:5px; border:1px solid var(--border); backdrop-filter:blur(12px); }
.studio-btn { flex:1; background:transparent; border:none; color:rgba(255,255,255,0.4); padding:9px 10px; border-radius:40px; cursor:pointer; font-weight:700; font-size:11px; transition:all 0.28s ease; text-transform:uppercase; letter-spacing:0.8px; }
.studio-btn.active { background:var(--orange); color:#fff; box-shadow:0 4px 16px rgba(248,142,54,0.4); }
.studio-gallery { display:none; position:relative; width:100%; aspect-ratio:16/9; border-radius:16px 16px 0 0; overflow:hidden; border:1px solid var(--border); border-bottom:none; background:#111; margin-top:14px; }
.studio-gallery.active { display:block; }
.studio-gallery::after { content:''; position:absolute; inset:0; background:linear-gradient(to top,rgba(0,0,0,0.45) 0%,transparent 55%); pointer-events:none; z-index:1; }
.studio-desc { display:none; background:rgba(14,14,14,0.97); backdrop-filter:blur(20px); border-radius:0 0 16px 16px; border:1px solid var(--border); border-top:none; font-size:14px; line-height:1.7; box-shadow:0 20px 50px rgba(0,0,0,0.5); }
.studio-desc.active { display:block; animation:fadeUp 0.38s ease; }
@keyframes fadeUp { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }
.studio-desc h3 { font-size:10px; font-weight:800; letter-spacing:2.5px; text-transform:uppercase; color:var(--orange); padding:14px 20px 12px; margin:0; display:block; border-bottom:1px solid var(--border); }
/* Menu rows are now <button>s that open the bowl builder pre-selected to that size.
   Reset button defaults (background, border, font, text-align) so they read as list rows,
   then add tap affordance (cursor, hover/active background, focus ring). */
.menu-item-row { display:flex; align-items:center; justify-content:space-between; padding:13px 20px; border:none; border-bottom:1px solid var(--border); border-radius:0; gap:10px; width:100%; background:transparent; color:inherit; font:inherit; text-align:left; cursor:pointer; transition:background 0.2s ease; }
.menu-item-row:hover { background:rgba(248,142,54,0.08); }
.menu-item-row:active { background:rgba(248,142,54,0.14); }
.menu-item-row:focus-visible { outline:2px solid var(--orange); outline-offset:-2px; }
.menu-item-row:last-child { border-bottom:none; }
.menu-item-info { display:flex; flex-direction:column; align-items:flex-start; flex:1; }
.menu-item-title { font-weight:700; font-size:14px; color:#fff; display:block; }
.menu-item-title .price-tag { display:none; }
.menu-item-price { font-weight:800; font-size:15px; color:var(--orange); white-space:nowrap; flex-shrink:0; }
.menu-item-desc { font-size:12px; color:var(--text-muted); margin-top:2px; }
.menu-list-hint { display:inline-block; margin-left:8px; font-size:9px; font-weight:700; letter-spacing:1.4px; color:var(--orange); background:rgba(248,142,54,0.15); border:1px solid rgba(248,142,54,0.4); padding:2px 7px; border-radius:999px; text-transform:uppercase; vertical-align:middle; position:relative; top:-1px; }
.why-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; padding:14px 16px 16px; }
.why-card { background:rgba(255,255,255,0.04); padding:18px 14px; border-radius:16px; border:1px solid rgba(255,255,255,0.08); text-align:center; backdrop-filter:blur(10px); }
.why-icon { font-size:22px; margin-bottom:7px; }
.why-card h4 { color:#fff; margin:0 0 5px; font-size:12px; font-weight:800; letter-spacing:0.3px; }
.why-card p { margin:0; font-size:11px; color:var(--text-muted); line-height:1.5; }
.story-text { text-align:left; font-size:13.5px; color:rgba(255,255,255,0.7); line-height:1.9; padding:16px 20px 20px; margin:0; }
.gallery-image { width:100%; height:100%; object-fit:cover; position:absolute; top:0; left:0; opacity:0; transition:opacity 0.6s ease; cursor:default; border-radius:inherit; will-change:opacity; user-select:none; }
.gallery-image.visible { opacity:1; z-index:1; }
.slider-arrow { position:absolute; top:50%; transform:translateY(-50%); background:rgba(0,0,0,0.5); backdrop-filter:blur(12px); color:#fff; border:1px solid rgba(255,255,255,0.12); width:34px; height:34px; border-radius:50%; cursor:pointer; z-index:3; display:flex; align-items:center; justify-content:center; transition:all 0.2s ease; }
.slider-arrow:hover { background:rgba(248,142,54,0.8); border-color:transparent; }
.slide-dots { position:absolute; bottom:8px; left:50%; transform:translateX(-50%); display:flex; gap:6px; z-index:3; }
.slide-dot { width:7px; height:7px; border-radius:50%; background:rgba(255,255,255,0.4); border:1px solid rgba(255,255,255,0.3); cursor:pointer; transition:all 0.25s ease; }
.slide-dot.active { background:#f88e36; border-color:#f88e36; width:18px; border-radius:4px; }
#lightbox { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.96); z-index:20000; justify-content:center; align-items:center; cursor:zoom-out; opacity:0; transition:opacity 0.3s ease; backdrop-filter:blur(14px); }
#lightbox.visible { opacity:1; }
#lightbox img { max-width:95%; max-height:95%; border:1px solid rgba(248,142,54,0.3); border-radius:14px; box-shadow:0 0 80px rgba(248,142,54,0.15); }
.map-container { width:100%; max-width:440px; height:200px; border-radius:16px; overflow:hidden; margin:8px auto 20px !important; border:1px solid rgba(255,255,255,0.08); box-shadow:0 15px 50px rgba(0,0,0,0.45); }
.map-container iframe { width:100%; height:100%; display:block; border:0; margin:0; }
.map-container iframe { width:100%; height:100%; border:0; filter:brightness(0.85); }

.menu-item { display:flex; align-items:center; padding:11px 13px; cursor:pointer; border-radius:11px; font-weight:600; font-size:13px; color:rgba(255,255,255,0.75); text-decoration:none; transition:all 0.2s ease; }
.menu-item:hover { background:rgba(248,142,54,0.11); color:var(--orange); }
.menu-item i { width:26px; font-size:15px; color:var(--orange); margin-right:10px; text-align:center; }
.menu-item.hidden { display:none; }
#toggle-interaction { position:fixed; top:20px; right:20px; width:44px; height:44px; border-radius:12px; background:rgba(0,0,0,0.55); backdrop-filter:blur(20px); border:1px solid var(--border); color:var(--orange); display:flex; align-items:center; justify-content:center; font-size:20px; cursor:pointer; z-index:10000; transition:all 0.3s ease; box-shadow:0 4px 15px rgba(0,0,0,0.35); opacity:0; pointer-events:none; }
#toggle-interaction.visible { opacity:1; pointer-events:auto; }
#toggle-interaction:hover { background:rgba(248,142,54,0.14); border-color:rgba(248,142,54,0.35); transform:scale(1.06); }
/* Transitioning `transform` here can get stuck mid-flight when the splash hands
   off to the builder (bg-mode → visible). A paused transition leaves the
   container at scale(1.15), which visually pushes the builder past the
   viewport and clips the bottom action bar on mobile. Transition opacity only —
   scale changes snap instantly. */
#game-container { position:fixed; inset:0; background:#0a0a0a; z-index:15000; display:none; overflow:hidden; opacity:0; transform:scale(1.04); transition:opacity 0.55s ease; }
#game-container.active { display:block; }
#game-container.visible { opacity:1; transform:scale(1); }
#game-container.bg-mode { display:block; opacity:1; transform:scale(1.15); transform-origin:center; z-index:1; pointer-events:none; }
#game-container.bg-mode #builder-root { filter:brightness(0.4) blur(4px) saturate(0.7); transition:filter 0.6s ease; }
/* In bg-mode, hide the UI menu panel and let the 3D viewport fill the screen,
   so only the bowl is visible behind the landing splash. */
#game-container.bg-mode #builder-root > div > div:first-child { display:none !important; }
#game-container.bg-mode #builder-root > div > div:last-of-type { height:100dvh !important; flex:1 !important; }
#game-container.bg-mode #close-game-btn,
#game-container.bg-mode #builder-loading-overlay,
#game-container.bg-mode .collapse-btn { display:none !important; }
#builder-root { width:100%; height:100%; transition:filter 0.6s ease; }
/* Hidden — the React app renders its own close button inside the floating
   header so it aligns with the redo button. The HTML element is kept around
   because React calls .click() on it to trigger the existing close-flow logic
   (close-flap animation + delayed navigation back to landing). */
#close-game-btn { display:none !important; }
.press-animation:active { transform:scale(0.95) !important; }
@keyframes slideUp { from{opacity:0;transform:translateY(40px)} to{opacity:1;transform:translateY(0)} }
.modal-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.45); z-index:26000; justify-content:center; align-items:center; backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); }
.modal-overlay.active { display:flex !important; }
.build-modal-content { position:relative; background:#ffffff; border:1px solid rgba(0,0,0,0.09); border-radius:24px; padding:32px 24px 24px; width:90%; max-width:320px; text-align:center; box-shadow:0 20px 60px rgba(0,0,0,0.12), inset 0 1px 0 rgba(255,255,255,0.9); color:#1c1c1e; animation:slideUp 0.4s cubic-bezier(0.34,1.56,0.64,1) forwards; }
.build-modal-content h2 { color:#1c1c1e; font-weight:900; letter-spacing:-0.01em; }
.info-icon-wrapper { width:54px; height:54px; background:rgba(248,142,54,0.10); border:1px solid rgba(248,142,54,0.35); color:#f07820; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:22px; position:absolute; top:-27px; left:50%; transform:translateX(-50%); box-shadow:0 8px 24px rgba(248,142,54,0.18); }
.instructions-card { background:rgba(0,0,0,0.03); border-radius:16px; padding:4px 16px; margin:20px 0; border:1px solid rgba(0,0,0,0.08); text-align:left; }
.instruction-row { display:flex; align-items:center; gap:15px; padding:12px 0; border-bottom:1px solid rgba(0,0,0,0.06); font-size:14px; color:rgba(28,28,30,0.80); }
.instruction-row:last-child { border-bottom:none; }
#close-build-modal-btn { background:linear-gradient(135deg,#f88e36,#f07820); color:#fff; border:none; width:100%; padding:14px; border-radius:999px; font-size:15px; font-weight:800; cursor:pointer; letter-spacing:0.02em; box-shadow:0 10px 26px rgba(248,142,54,0.28); transition:all 0.2s ease; }
#close-build-modal-btn:hover { box-shadow:0 12px 32px rgba(248,142,54,0.4); transform:translateY(-1px); }

/* ── Static Menu Modal — White Clean Design ── */
#menu-modal { display:none; position:fixed; inset:0; z-index:27000; background:rgba(0,0,0,0.4); backdrop-filter:blur(6px); flex-direction:column; justify-content:flex-end; }
#menu-modal.active { display:flex !important; }
#menu-sheet { background:#fff; border-radius:24px 24px 0 0; max-height:92vh; display:flex; flex-direction:column; overflow:hidden; box-shadow:0 -20px 60px rgba(0,0,0,0.15); animation:sheetUp 0.38s cubic-bezier(0.34,1.3,0.64,1); }
@keyframes sheetUp { from{transform:translateY(100%)} to{transform:translateY(0)} }
#menu-sheet-header { display:flex; align-items:center; justify-content:space-between; padding:20px 22px 0; flex-shrink:0; }
#menu-sheet-header h2 { margin:0; font-size:20px; font-weight:900; color:#1a1a1a; letter-spacing:-0.5px; }
#menu-close-btn { width:36px; height:36px; border-radius:50%; background:#f5f5f5; border:none; color:#666; font-size:20px; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all 0.2s ease; }
#menu-close-btn:hover { background:#eee; color:#333; }
#menu-cat-tabs { display:flex; gap:6px; overflow-x:auto; padding:14px 22px 10px; scrollbar-width:none; flex-shrink:0; border-bottom:1px solid #f0f0f0; }
#menu-cat-tabs::-webkit-scrollbar { display:none; }
.menu-cat-btn { flex-shrink:0; padding:7px 14px; border-radius:30px; font-size:11px; font-weight:800; letter-spacing:0.8px; text-transform:uppercase; border:1.5px solid #e0e0e0; background:#fff; color:#999; cursor:pointer; transition:all 0.22s ease; }
.menu-cat-btn.active { background:#f88e36; color:#fff; border-color:#f88e36; box-shadow:0 4px 14px rgba(248,142,54,0.3); }
#menu-items-scroll { flex:1; overflow-y:auto; padding:8px 0 32px; scrollbar-width:none; }
#menu-items-scroll::-webkit-scrollbar { display:none; }
.menu-cat-section { display:none; }
.menu-cat-section.active { display:block; animation:fadeUp 0.28s ease; }
.menu-modal-row { display:flex; align-items:center; gap:8px; padding:9px 12px; border-radius:10px; border:1.5px solid #f0f0f0; background:#fff; transition:all 0.2s ease; cursor:pointer; }
.menu-modal-row:hover { border-color:#f88e36; background:#fff8f2; }
.menu-modal-row.checked { border-color:#f88e36; background:#fff3e8; box-shadow:0 2px 8px rgba(248,142,54,0.12); }
.menu-modal-check { width:22px; height:22px; border-radius:7px; border:2px solid #ddd; flex-shrink:0; display:flex; align-items:center; justify-content:center; transition:all 0.25s cubic-bezier(0.25,0.8,0.25,1); font-size:12px; color:transparent; }
.menu-modal-row.checked .menu-modal-check { border-color:#f88e36; background:#f88e36; color:#fff; transform:scale(1.1); }
.menu-modal-icon { font-size:18px; flex-shrink:0; }
.menu-modal-info { flex:1; }
.menu-modal-name { font-weight:600; font-size:13px; color:#333; display:block; }
.menu-modal-desc { font-size:11px; color:#999; margin-top:2px; display:block; }
.menu-modal-price { font-weight:800; font-size:14px; color:#f88e36; flex-shrink:0; }
.menu-order-cta { display:block; margin:20px 22px 0; padding:16px; background:#f88e36; color:#fff; font-weight:900; font-size:13px; letter-spacing:1.5px; text-transform:uppercase; border:none; border-radius:50px; cursor:pointer; box-shadow:0 8px 28px rgba(248,142,54,0.3); text-align:center; text-decoration:none; transition:all 0.3s ease; }
.menu-order-cta:hover { transform:translateY(-2px); box-shadow:0 12px 38px rgba(248,142,54,0.4); }
.menu-section-title { font-size:11px; font-weight:800; letter-spacing:2px; text-transform:uppercase; color:#f88e36; }
.menu-section-note { font-size:10px; color:#bbb; }

/* Bowl mode picker — appears when a menu item row is tapped */
.bowl-mode-picker { position:fixed; inset:0; z-index:10500; display:none; align-items:center; justify-content:center; background:rgba(0,0,0,0.55); backdrop-filter:blur(6px); padding:24px; opacity:0; transition:opacity 0.2s ease; }
.bowl-mode-picker.visible { display:flex; opacity:1; }
.bowl-mode-card { width:100%; max-width:420px; background:#1a1a1c; border:1px solid rgba(255,255,255,0.08); border-radius:24px; padding:24px 20px 22px; box-sizing:border-box; transform:scale(0.96); transition:transform 0.25s cubic-bezier(0.25,0.8,0.25,1); }
.bowl-mode-picker.visible .bowl-mode-card { transform:scale(1); }
.bowl-mode-eyebrow { font-size:10px; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:var(--orange); text-align:center; margin-bottom:6px; }
.bowl-mode-title { font-size:22px; font-weight:900; text-align:center; margin:0 0 8px; color:#fff; letter-spacing:-0.3px; }
.bowl-mode-desc { font-size:13px; color:rgba(255,255,255,0.6); text-align:center; margin:0 0 20px; line-height:1.5; }
.bowl-mode-btn { width:100%; display:flex; align-items:center; padding:14px 18px; border-radius:14px; border:1px solid rgba(255,255,255,0.1); background:rgba(255,255,255,0.04); color:#fff; cursor:pointer; margin-bottom:10px; text-align:center; font-family:inherit; transition:background 0.15s ease, border-color 0.15s ease, transform 0.15s ease; }
.bowl-mode-btn:active { transform:scale(0.98); }
.bowl-mode-btn-primary { background:linear-gradient(135deg, rgba(248,142,54,0.18), rgba(248,142,54,0.08)); border-color:rgba(248,142,54,0.5); }
.bowl-mode-btn-primary:hover { background:linear-gradient(135deg, rgba(248,142,54,0.28), rgba(248,142,54,0.14)); }
.bowl-mode-btn-secondary:hover { background:rgba(255,255,255,0.08); border-color:rgba(255,255,255,0.18); }
.bowl-mode-btn-stack { display:flex; flex-direction:column; flex:1; min-width:0; align-items:center; }
.bowl-mode-btn-title { font-size:15px; font-weight:800; color:#fff; }
.bowl-mode-btn-sub { font-size:11px; color:rgba(255,255,255,0.55); margin-top:2px; }
.bowl-mode-cancel { width:100%; padding:14px; margin-top:6px; background:transparent; border:none; color:rgba(255,255,255,0.5); font-size:13px; font-weight:600; letter-spacing:0.5px; cursor:pointer; font-family:inherit; }
.bowl-mode-cancel:hover { color:rgba(255,255,255,0.8); }