:root{
  --bg:#f5f0e8;--surface:rgba(255,255,255,0.75);--surface2:#fff;
  --text:#2c231a;--text2:#7a6a58;--text3:#9a8878;--text4:#b8a898;
  --border:#e8e0d0;--border2:#e8e0d4;--border3:#ede7dc;
  --amber:#b8895a;--amber-light:#f5ede0;--amber-border:#e0cca8;
  --ring-bg:#ede7dc;--ring-focus:#b8895a;--ring-break:#8a9e78;
  --drawer-bg:#fff;--modal-bg:#fff;
  --noise:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
}
/* Dark mode and all colour palettes are generated at runtime from PALETTES in
   script.js and injected as html[data-palette="…"][data-mode="dark"] rules. */
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden}
body{font-family:'Inter',sans-serif;background:var(--bg);color:var(--text);min-height:100vh;transition:background .4s,color .4s;}
body::before{content:'';position:fixed;inset:0;z-index:0;pointer-events:none;background-image:var(--noise);}

/* TOP BAR ICONS */
.top-bar{position:fixed;top:18px;left:20px;z-index:15;display:flex;gap:8px;}
.icon-btn{
  width:36px;height:36px;border-radius:50%;
  background:var(--surface);border:1px solid var(--border2);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:all .3s;
  box-shadow:0 1px 8px rgba(0,0,0,0.06);
  color:var(--text3);
}
.icon-btn:hover{border-color:var(--amber);color:var(--amber);}
.icon-btn svg{width:15px;height:15px;}

/* USER AVATAR */
.user-avatar{
  width:36px;height:36px;border-radius:50%;
  background:var(--surface);border:1px solid var(--border2);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:all .3s;overflow:hidden;
  box-shadow:0 1px 8px rgba(0,0,0,0.06);
  font-size:.7rem;font-weight:600;color:var(--text3);
  position:relative;
}
.user-avatar img{width:100%;height:100%;object-fit:cover;}
.user-avatar:hover{border-color:var(--amber);}

/* USER MENU */
.user-menu{
  position:fixed;top:62px;left:20px;z-index:50;
  background:var(--modal-bg);border:1px solid var(--border2);
  border-radius:14px;padding:8px;min-width:200px;
  box-shadow:0 8px 32px rgba(0,0,0,0.15);
  opacity:0;pointer-events:none;
  transform:translateY(-6px);
  transition:opacity .2s,transform .2s;
}
.user-menu.open{opacity:1;pointer-events:all;transform:translateY(0);}
.user-menu-name{padding:8px 10px 4px;font-size:.72rem;color:var(--text3);font-family:'Lora',serif;font-style:italic;}
.user-menu-email{padding:0 10px 8px;font-size:.68rem;color:var(--text4);border-bottom:1px solid var(--border3);margin-bottom:4px;}
.user-menu-item{
  display:flex;align-items:center;gap:8px;padding:8px 10px;
  border-radius:8px;font-size:.75rem;color:var(--text2);
  cursor:pointer;transition:background .2s;border:none;background:none;width:100%;text-align:left; font-family: inherit;
}
.user-menu-item:hover{background:var(--amber-light);color:var(--amber);}
.user-menu-item svg{width:13px;height:13px;flex-shrink:0;}

/* CENTER LAYOUT */
.centre{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;z-index:10;pointer-events:none;transition:transform .4s cubic-bezier(.4,0,.2,1);}
body.drawer-open .centre{transform:translateX(-170px);}

.inner{pointer-events:all;display:flex;flex-direction:column;align-items:center;padding:20px;margin-bottom:4%;}

.shop-name{font-family:'Playfair Display',serif;font-style:italic;font-size:2.4rem;font-weight:400;color:var(--text);letter-spacing:.02em;margin-bottom:3px;text-align:center;transition:color .6s;}
.shop-name.patron{color:var(--amber);}
.shop-tagline{font-size:.7rem;color:var(--text3);letter-spacing:.18em;text-transform:uppercase;margin-bottom:18px;}
.patron-badge{display:none;align-items:center;gap:4px;font-size:.62rem;color:var(--amber);font-weight:500;letter-spacing:.04em;padding-left:10px;margin-left:4px;border-left:1px solid var(--amber-border);}
.patron-badge.show{display:flex;}

.leaf-count{display:flex;align-items:center;gap:7px;background:var(--surface);border:1px solid var(--border);border-radius:30px;padding:7px 18px;font-size:.78rem;font-weight:500;color:var(--text2);margin-bottom:35px;box-shadow:0 1px 8px rgba(0,0,0,0.04);transition:background .4s,border-color .4s;}

/* TIMER SIZED TO 320PX */
.ring-wrap{position:relative;width:320px;height:320px;margin-bottom:10px; margin-top: 0px;}
.ring-wrap svg{position:absolute;inset:0;width:100%;height:100%;}
.rb{fill:none;stroke:var(--ring-bg);stroke-width:4;}
.rp{fill:none;stroke:var(--ring-focus);stroke-width:4;stroke-linecap:round;stroke-dasharray:534;stroke-dashoffset:534;transform:rotate(-90deg);transform-origin:50% 50%;transition:stroke-dashoffset .98s linear,stroke .6s;}
.rp.brk{stroke:var(--ring-break);}
.r-inner{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;}
.timer-num{font-family:'Lora',serif;font-size:5rem;font-weight:400;color:var(--text);letter-spacing:-2px;line-height:1;}
.timer-phase{font-size:.83rem;letter-spacing:.16em;text-transform:uppercase;color:var(--text4);}
.round-label{font-family:'Lora',serif;font-style:italic;font-size:.79rem;color:var(--text4);margin-bottom:22px;letter-spacing:.04em;}

.controls{display:flex;gap:8px;margin-bottom:16px;margin-top: 25px;}
.btn{padding:12px 28px;border-radius:30px;font-family:'Inter',sans-serif;font-size:.82rem;font-weight:500;cursor:pointer;transition:all .25s;letter-spacing:.02em;border:1px solid var(--border);background:var(--surface);color:var(--text2);}
.btn:hover{border-color:var(--amber);color:var(--amber);}
.btn:active{transform:scale(.98);}
.btn:disabled{opacity:.4;cursor:default;pointer-events:none;}
.btn-main{background:var(--text);color:var(--bg);border-color:var(--text);padding:12px 36px;}
.btn-main:hover{opacity:.85;color:var(--bg);}

.bmc{position:fixed;bottom:3.5%;left:50%;transform:translateX(-50%);z-index:15;font-size:0.85rem;color:var(--text4);text-decoration:none;font-family:'Lora',serif;font-style:italic;transition:all .4s cubic-bezier(.4,0,.2,1);letter-spacing:.02em;white-space:nowrap;}
.bmc:hover{color:var(--amber);}
body.drawer-open .bmc{left:calc(50% - 170px);}

/* --- STACKED TABS (LARGE) --- */
.tab-stack {
  position: fixed; right: 0; top: 50%; transform: translateY(-50%);
  display: flex; flex-direction: column; gap: 12px; z-index: 20;
}
.side-tab {
  background: var(--surface); border: 1px solid var(--border2); border-right: none;
  border-radius: 14px 0 0 14px; padding: 24px 12px; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  transition: all .3s; backdrop-filter: blur(8px); box-shadow: -2px 0 12px rgba(0,0,0,0.05);
}
.side-tab:hover { border-color: var(--amber); }
.side-tab-text {
  writing-mode: vertical-rl; font-family: 'Lora', serif; font-style: italic; 
  font-size: 0.9rem; color: var(--text3); letter-spacing: .08em;
}

/* --- UNIVERSAL DRAWER --- */
.side-drawer {
  position: fixed; top: 0; right: -440px; width: 420px; height: 100vh; z-index: 30;
  background: var(--drawer-bg); border-left: 1px solid var(--border2);
  display: flex; flex-direction: column; transition: right .4s cubic-bezier(.4,0,.2,1), background .4s;
  box-shadow: -8px 0 40px rgba(0,0,0,0.08);
}
.side-drawer.open { right: 0; }

.drawer-close {
  position: absolute; top: 14px; right: 16px; width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center; background: none; border: none;
  font-size: 1.1rem; color: var(--text4); cursor: pointer; transition: color .2s; z-index: 50; border-radius: 50%;
}
.drawer-close:hover { color: var(--text); background: rgba(0,0,0,0.04); }

.menu-head{padding:24px 28px 14px;border-bottom:1px solid var(--border3);text-align:center;position:relative;}
.menu-title{font-family:'Playfair Display',serif;font-style:italic;font-size:1.5rem;color:var(--text);margin-bottom:2px;}
.menu-sub{font-size:.7rem;color:var(--text4);letter-spacing:.12em;text-transform:uppercase;}
.rule{display:flex;align-items:center;gap:10px;padding:0 28px;margin-top:10px;}
.rule-line{flex:1;height:1px;background:linear-gradient(to right,transparent,var(--border),transparent);}
.rule-dot{width:4px;height:4px;border-radius:50%;background:var(--amber-border);}
.menu-body{flex:1;overflow-y:auto;padding:0 0 16px;scrollbar-width:thin;scrollbar-color:var(--border) transparent;}
.menu-section{padding:14px 28px 0;}
.section-heading{font-family:'Playfair Display',serif;font-style:italic;font-size:.95rem;color:var(--text3);margin-bottom:8px;display:flex;align-items:center;gap:10px;}
.section-heading::after{content:'';flex:1;height:1px;background:linear-gradient(to right,var(--border2),transparent);}
.item{display:flex;align-items:flex-start;gap:11px;padding:9px 0;border-bottom:1px solid var(--border3);transition:all .35s;}
.item:last-child{border-bottom:none;}
.item-icon{width:32px;height:32px;flex-shrink:0;border-radius:8px;background:var(--bg);border:1px solid var(--border3);display:flex;align-items:center;justify-content:center;font-size:.95rem;}
.item.unlocked .item-icon{background:var(--amber-light);border-color:var(--amber-border);}
.item-body{flex:1;min-width:0;}
.item-tag{display:inline-block;font-size:.58rem;letter-spacing:.1em;text-transform:uppercase;color:var(--amber);border:1px solid var(--amber-border);border-radius:5px;padding:1px 5px;margin-bottom:2px;}
.item-name{font-family:'Lora',serif;font-size:.86rem;font-weight:500;color:var(--text);margin-bottom:1px;}
.item-desc{font-size:.7rem;color:var(--text3);line-height:1.4;}
.item.locked .item-name{color:var(--border);filter:blur(3px);user-select:none;}
.item.locked .item-desc{color:var(--border2);filter:blur(2.5px);user-select:none;}
.item.locked .item-icon{opacity:.35;}
.unlock-btn{flex-shrink:0;background:transparent;border:1px solid var(--border);color:var(--text3);border-radius:20px;padding:5px 10px;font-size:.66rem;font-weight:500;cursor:pointer;transition:all .25s;white-space:nowrap;display:flex;align-items:center;gap:3px;}
.unlock-btn.can{border-color:var(--amber);color:var(--amber);background:var(--amber-light);}
.unlock-btn:hover{border-color:var(--amber);color:var(--amber);}

.pass-card{margin:14px 28px 0;background:var(--amber-light);border:1px solid var(--amber-border);border-radius:16px;padding:16px 18px;display:flex;gap:13px;align-items:flex-start;}
.pass-card.redeemed{background:var(--surface);border-color:var(--border2);}
.pass-icon{width:34px;height:34px;border-radius:9px;background:rgba(184,137,90,0.12);border:1px solid var(--amber-border);display:flex;align-items:center;justify-content:center;font-size:.95rem;flex-shrink:0;}
.pass-body{flex:1;}
.pass-name{font-family:'Lora',serif;font-size:.88rem;font-weight:500;color:var(--amber);margin-bottom:3px;}
.pass-desc{font-size:.7rem;color:var(--text3);line-height:1.45;margin-bottom:10px;}
.pass-redeemed-label{font-size:.7rem;color:var(--amber);font-style:italic;font-family:'Lora',serif;}
.pass-actions{display:flex;gap:8px;flex-wrap:wrap;}
.pass-btn{background:var(--text);color:var(--bg);border:none;border-radius:20px;padding:7px 16px;font-size:.72rem;font-weight:500;cursor:pointer;transition:all .25s;}
.pass-btn:hover{opacity:.8;}
.pass-link{display:inline-flex;align-items:center;padding:7px 14px;border-radius:20px;font-size:.72rem;color:var(--text3);border:1px solid var(--border2);text-decoration:none;transition:all .25s;}
.pass-link:hover{border-color:var(--amber);color:var(--amber);}

/* --- AMBIANCE MENU (SOUNDS) --- */
.sound-item {
  display: flex; align-items: flex-start; gap: 11px; padding: 9px 0; 
  border-bottom: 1px solid var(--border3); cursor: pointer; transition: all .35s;
}
.sound-item:last-child { border-bottom: none; }

.sound-item .item-icon { transition: all .3s; }
.sound-item:hover .item-icon { border-color: var(--amber); }

.sound-toggle {
  flex-shrink: 0; background: transparent; color: var(--text3); 
  font-size: .66rem; font-weight: 500; padding-top: 8px;
  transition: all .25s; text-transform: uppercase; letter-spacing: .05em;
}
.sound-item:hover .sound-toggle { color: var(--amber); }

.sound-item.on .item-icon { background: var(--amber-light); border-color: var(--amber-border); }
.sound-item.on .sound-toggle { color: var(--amber); }

.vol-box {
  display: flex; align-items: center; gap: 14px; background: var(--surface); 
  border: 1px solid var(--border2); border-radius: 16px; padding: 14px 18px; width: 100%;
}
.vol-icon { width: 18px; height: 18px; color: var(--amber); opacity: 0.9; }

input[type=range] { flex: 1; -webkit-appearance: none; height: 4px; background: rgba(184, 137, 90, 0.3); border-radius: 2px; outline: none; cursor: pointer;}
input[type=range]::-webkit-slider-thumb { 
  -webkit-appearance: none; width: 16px; height: 16px; border-radius: 50%; 
  background: var(--amber); cursor: pointer; box-shadow: 0 2px 8px rgba(184,137,90,0.4); 
  transition: transform .2s;
}
input[type=range]::-webkit-slider-thumb:hover { transform: scale(1.15); }

/* --- MODALS --- */
.modal-overlay{position:fixed;inset:0;z-index:100;background:rgba(0,0,0,0.4);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .3s;}
.modal-overlay.show{opacity:1;pointer-events:all;}
.modal{background:var(--modal-bg);border-radius:20px;padding:32px 28px;width:340px;max-width:90vw;box-shadow:0 20px 60px rgba(0,0,0,0.2);transform:translateY(12px);transition:transform .3s,background .4s;text-align:center;border:1px solid var(--border2);}
.modal-overlay.show .modal{transform:translateY(0);}
.modal-title{font-family:'Playfair Display',serif;font-style:italic;font-size:1.3rem;color:var(--text);margin-bottom:6px;}
.modal-desc{font-size:.75rem;color:var(--text3);line-height:1.55;margin-bottom:20px;}
.modal-input{width:100%;padding:11px 16px;border:1px solid var(--border2);border-radius:12px;font-family:'Lora',serif;font-size:.85rem;color:var(--text);background:var(--bg);outline:none;transition:border-color .2s,background .4s;text-align:center;letter-spacing:.06em;margin-bottom:14px;}
.modal-input:focus{border-color:var(--amber);}
.modal-input::placeholder{color:var(--text4);letter-spacing:0;}
.modal-btns{display:flex;gap:8px;}
.modal-submit{flex:2;padding:11px;background:var(--text);color:var(--bg);border:none;border-radius:12px;font-size:.82rem;font-weight:500;cursor:pointer;transition:all .25s;}
.modal-submit:hover{opacity:.8;}
.modal-cancel{flex:1;padding:11px;background:transparent;color:var(--text3);border:1px solid var(--border2);border-radius:12px;font-size:.82rem;cursor:pointer;transition:all .25s;}
.modal-cancel:hover{border-color:var(--amber);color:var(--amber);}
.modal-hint{font-size:.67rem;color:var(--text4);margin-top:10px;font-style:italic;font-family:'Lora',serif;}

/* SIGN IN MODAL */
.signin-modal{background:var(--modal-bg);border-radius:20px;padding:36px 28px;width:320px;max-width:90vw;box-shadow:0 20px 60px rgba(0,0,0,0.2);transform:translateY(12px);transition:transform .3s,background .4s;text-align:center;border:1px solid var(--border2);}
.modal-overlay.show .signin-modal{transform:translateY(0);}
.signin-icon{font-size:2rem;margin-bottom:12px;}
.signin-title{font-family:'Playfair Display',serif;font-style:italic;font-size:1.2rem;color:var(--text);margin-bottom:8px;}
.signin-desc{font-size:.75rem;color:var(--text3);line-height:1.6;margin-bottom:22px;}
.google-btn{
  display:flex;align-items:center;justify-content:center;gap:10px;
  width:100%;padding:12px;border-radius:12px;
  background:#fff;border:1px solid #e0e0e0;
  font-size:.82rem;font-weight:500;color:#3c4043;
  cursor:pointer;transition:all .25s;margin-bottom:10px;
}
.google-btn:hover{box-shadow:0 2px 8px rgba(0,0,0,0.12);}
.google-btn svg{width:18px;height:18px;flex-shrink:0;}
.signin-skip{font-size:.7rem;color:var(--text4);cursor:pointer;font-family:'Lora',serif;font-style:italic;background:none;border:none;padding:4px;}
.signin-skip:hover{color:var(--amber);}

.menu-footer{padding:12px 28px;border-top:1px solid var(--border3);display:flex;justify-content:space-between;align-items:center;}
.hours-label{font-family:'Lora',serif;font-style:italic;font-size:.72rem;color:var(--text4);}

.toast{position:fixed;top:16px;left:50%;transform:translateX(-50%);z-index:200;background:var(--text);color:var(--bg);border-radius:20px;padding:9px 22px;font-family:'Lora',serif;font-style:italic;font-size:.78rem;white-space:nowrap;opacity:0;transition:opacity .35s;pointer-events:none;box-shadow:0 4px 20px rgba(0,0,0,0.15);}
.toast.show{opacity:1;}
@keyframes reveal{0%{opacity:0;transform:translateY(5px)}100%{opacity:1;transform:translateY(0)}}
.just-unlocked{animation:reveal .5s ease forwards;}
@keyframes popIn{0%,100%{transform:scale(1)}50%{transform:scale(1.4)}}
.coin-pop{animation:popIn .3s ease;}

/* --- DRINK PALETTES (TAP A DRINK TO THEME THE CAFÉ) --- */
.menu-hint{padding:0 28px;margin:8px 0 -2px;font-family:'Lora',serif;font-style:italic;font-size:.7rem;line-height:1.5;color:var(--text4);}
.item.unlocked{cursor:pointer;}
.item.unlocked:hover .item-name{color:var(--amber);}
.item.is-active .item-name{color:var(--amber);}
.drink-swatch{flex-shrink:0;align-self:center;width:18px;height:18px;border-radius:50%;border:2px solid var(--c);position:relative;opacity:.45;transition:all .25s;}
.item.unlocked:hover .drink-swatch{opacity:.9;transform:scale(1.1);}
.drink-swatch.active{background:var(--c);opacity:1;}
.drink-swatch.active::after{content:'';position:absolute;left:5px;top:2px;width:3px;height:7px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg);}

/* --- THERMAL RECEIPT --- */
.receipt{
  width:280px; max-width:90vw; background:#faf8f3; border:none;
  font-family:'Courier New',Courier,monospace; font-size:.72rem;
  color:#2a2218; position:relative; animation:receiptSlide .5s ease;
}
@keyframes receiptSlide{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
.r-tear{height:12px;background:inherit;position:relative;overflow:hidden;}
.r-tear-top::after,.r-tear-bot::before{content:'';position:absolute;left:0;right:0;height:12px;
  background:radial-gradient(circle 6px at 12px 0,transparent 6px,#faf8f3 6px);background-size:24px 12px;}
.r-tear-top::after{top:0;}.r-tear-bot::before{bottom:0;transform:scaleY(-1);}
.r-body{padding:20px 22px;}
.r-header{text-align:center;font-family:'Courier New',Courier,monospace;font-weight:700;font-size:1.05rem;color:#1a1410;letter-spacing:.5px;}
.r-sub{text-align:center;font-size:.6rem;color:#9a8a78;margin:4px 0 0;letter-spacing:.04em;}
.r-dash{border-top:1.5px dashed #d8cfc0;margin:12px 0;}
.r-row{display:flex;justify-content:space-between;margin:5px 0;font-size:.72rem;color:#3a3020;}
.r-rec-label{text-align:center;font-size:.58rem;text-transform:uppercase;letter-spacing:.12em;color:#b8a88a;margin-bottom:6px;}
.r-rec{text-align:center;font-family:'Courier New',Courier,monospace;font-weight:bold;font-size:.82rem;color:#2a2218;}
.r-rec-desc{text-align:center;font-size:.62rem;color:#9a8a78;margin-top:5px;line-height:1.5;font-family:'Courier New',Courier,monospace;font-style:italic;}
.r-thanks{text-align:center;font-family:'Courier New',Courier,monospace;font-style:italic;font-size:.72rem;color:#3a3020;margin-top:14px;}
.r-url{text-align:center;font-family:'Courier New',Courier,monospace;font-style:italic;font-size:.6rem;color:#b8a88a;margin-top:3px;letter-spacing:.04em;}
.r-share-btn{
  display:flex;align-items:center;justify-content:center;gap:6px;
  width:100%;margin-top:16px;padding:8px;
  background:transparent;border:none;
  font-family:'Courier New',Courier,monospace;font-size:.68rem;
  color:#b8a88a;cursor:pointer;transition:color .25s;
}
.r-share-btn:hover{color:#9c7a4a;}
 
/* --- LOYAL-TEAS STAMP CARD --- */
.loyalty-card{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:14px 16px;margin-top:6px;}
.loyalty-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;}
.loyalty-title{font-family:'Lora',serif;font-style:italic;font-size:.82rem;color:var(--text);}
.loyalty-best{font-size:.6rem;color:var(--text4);letter-spacing:.04em;}
.stamp-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin-bottom:10px;}
.stamp{width:100%;aspect-ratio:1;border-radius:50%;border:1.5px dashed var(--border2);display:flex;align-items:center;justify-content:center;transition:all .3s;overflow:hidden;}
.stamp img{width:55%;height:55%;object-fit:contain;opacity:.3;filter:grayscale(1);}
.stamp.filled{border-style:solid;border-color:var(--amber);background:var(--amber-light);}
.stamp.filled img{opacity:1;filter:none;}
.stamp.milestone{border-width:2px;}
.stamp.milestone.filled{box-shadow:0 0 0 2px var(--amber-light);}
.loyalty-status{font-size:.64rem;color:var(--text3);line-height:1.5;font-family:'Lora',serif;font-style:italic;}

/* --- VISIBILITY CLASSES --- */
.mobile-only { display: none !important; }
.desktop-only { display: flex !important; }

/* =========================================
   💻 LAPTOP/DESKTOP 90% SCALING
   ========================================= */
@media (min-width: 769px) {
  .inner {
    transform: scale(0.9); 
  }
}

/* =========================================
   📱 MOBILE OPTIMISATION
   ========================================= */
@media (max-width: 768px) {
/* Hide Desktop elements, Show Mobile elements */
  .desktop-only { display: none !important; }
  .mobile-only { display: flex !important; }
  .tab-stack { display: none !important; } /* Hides desktop tabs on mobile */

  /* Keep top bar on the left */
  .top-bar { right: auto; justify-content: flex-start; }
  
/* 2. Top bar stays on the left */
  /* #main-top-bar {
    right: auto; 
    justify-content: flex-start; 
    pointer-events: none;
  } */
  .icon-btn, .user-avatar { pointer-events: all; }

  /* Push account dropdown to the right */
  .user-menu { left: auto; right: 20px; } 
  #hamburger-dropdown { left: 20px; right: auto; }

  /* 3. Shrink center UI so it isn't cramped */
  .inner { margin-top: -24vh; } 
  .shop-name { font-size: 1.95rem; margin-bottom: 5px; }
  .shop-tagline { font-size: 0.65rem; margin-bottom: 14px; }
  .leaf-count { font-size: 0.72rem; padding: 6px 15px; margin-bottom: 25px; }
  .ring-wrap { width: 250px; height: 250px; margin-bottom: 5px; }
  .timer-num { font-size: 3.8rem; }
  .timer-phase { font-size: 0.75rem; }
  .round-label { font-size: 0.75rem; margin-bottom: 18px; }
  .controls { gap: 10px; margin-top: 19px; margin-bottom: -18vh;}
  .btn { padding: 10px 24px; font-size: 0.78rem; }
  .btn-main { padding: 10px 32px; }

  /* Drawer handling */
  body.drawer-open .centre { transform: translateX(0) scale(0.95); opacity: 0.3; filter: blur(4px); }
  .side-drawer { width: 100vw; right: -100vw; border-left: none; }
  .side-drawer.open { right: 0; }
  .drawer-close { width: 44px; height: 44px; top: 10px; right: 10px; background: var(--surface); }
}

@media (max-width: 380px) {
  .ring-wrap { width: 220px; height: 220px; }
  .timer-num { font-size: 3.2rem; }
}
/* --- CAFÉ COUNTER (who else is here) --- */
.cafe-counter{font-family:'Lora',serif;font-style:italic;font-size:.7rem;color:var(--text4);letter-spacing:.03em;text-align:center;margin-bottom:8px;opacity:0;transition:opacity .6s;min-height:1em;}
.cafe-counter.visible{opacity:1;}