:root{--pink:#FBA9C7;--blush:#FCD6D8;--tint:#FFF1F6;--red:#C90216;--leaf:#68A64B;--ink:#02060B;--white:#fff;--grey:#B8B8B8;--r:18px;--shadow:0 4px 0 var(--ink)}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth}
body{font-family:'DM Sans',system-ui,sans-serif;color:var(--ink);background:var(--white);font-size:16px;line-height:1.5;-webkit-text-size-adjust:100%}
img{max-width:100%;display:block}
h1,h2,h3{font-family:'Caprasimo',Georgia,serif;font-weight:400;line-height:1.1}
a{color:var(--red)}
.wrap{width:100%;max-width:1100px;margin:0 auto;padding:0 16px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:10px 20px;border:3px solid var(--ink);border-radius:14px;font:700 1rem 'DM Sans',sans-serif;background:var(--white);color:var(--ink);text-decoration:none;cursor:pointer;box-shadow:var(--shadow);transition:transform .08s,box-shadow .08s}
.btn:active{transform:translateY(3px);box-shadow:0 1px 0 var(--ink)}
.btn.red{background:var(--red);color:#fff}
.btn.pink{background:var(--pink)}
.btn.small{min-height:40px;padding:6px 14px;font-size:.9rem}
.btn.ghost{box-shadow:none}
.btn:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--red);outline-offset:3px}
.chip{display:inline-block;padding:3px 12px;border:2px solid var(--ink);border-radius:99px;font-size:.78rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;background:var(--white)}
.chip.open{background:var(--leaf);color:#fff;animation:pulse 1.6s infinite}
.chip.soon{background:var(--pink)}
.chip.off{background:var(--grey)}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(104,166,75,.6)}50%{box-shadow:0 0 0 8px rgba(104,166,75,0)}}

/* top bar */
.bar{position:sticky;top:0;z-index:20;background:var(--pink);border-bottom:3px solid var(--ink)}
.bar .wrap{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:60px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);font-family:'Caprasimo',serif;font-size:1.25rem}
.brand img{width:44px;height:44px;object-fit:contain}
.nav{display:none;gap:6px}
.nav a{padding:8px 14px;border-radius:99px;text-decoration:none;color:var(--ink);font-weight:700}
.nav a:hover{background:var(--white)}
.bar .btn{min-height:40px;padding:6px 14px;font-size:.9rem}
@media(min-width:760px){.nav{display:flex}}

.banner{background:var(--red);color:#fff;text-align:center;padding:8px 16px;font-weight:700}

/* hero */
.hero{background:var(--pink);border-bottom:3px solid var(--ink);overflow:hidden;position:relative}
.hero .wrap{padding-top:22px;padding-bottom:0;display:grid;gap:18px}
.hero-top{display:grid;gap:12px}
.hero h1{font-size:clamp(2.1rem,9vw,4rem);color:var(--red)}
.hero .tag{font-weight:700;font-size:1.05rem}
.next{background:var(--white);border:3px solid var(--ink);border-radius:var(--r);padding:16px;box-shadow:var(--shadow);display:grid;gap:8px}
.next .where{font-family:'Caprasimo',serif;font-size:1.5rem;line-height:1.15}
.next .when{font-weight:700}
.count{display:flex;gap:8px}
.count div{flex:1;max-width:84px;background:var(--tint);border:2px solid var(--ink);border-radius:12px;text-align:center;padding:6px 0}
.count b{display:block;font:400 1.6rem 'Caprasimo',serif;color:var(--red)}
.count span{font-size:.7rem;text-transform:uppercase;letter-spacing:.08em;font-weight:700}
.next .btns{display:flex;flex-wrap:wrap;gap:10px;margin-top:4px}
.road{position:relative;height:150px;margin-top:6px}
.road .ground{position:absolute;left:-20px;right:-20px;bottom:0;height:54px;background:var(--ink)}
.road .dash{position:absolute;left:0;right:0;bottom:24px;height:6px;background:repeating-linear-gradient(90deg,#fff 0 28px,transparent 28px 56px);animation:slide 2.2s linear infinite}
@keyframes slide{to{background-position:-56px 0}}
.road .pin{position:absolute;right:6%;bottom:46px;width:56px;text-align:center;font-size:.7rem;font-weight:700}
.road .pin svg{width:44px;height:52px}
.road .truck{position:absolute;bottom:34px;width:150px;left:0;transition:left 1.4s cubic-bezier(.3,1.4,.5,1);cursor:pointer;-webkit-tap-highlight-color:transparent}
.road .truck img{width:100%;animation:bob 1.1s ease-in-out infinite}
.road.parked .truck img,.road.parked .dash{animation-play-state:paused}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
.road .berry{position:absolute;width:30px;top:10px;animation:float 5s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0) rotate(-6deg)}50%{transform:translateY(-10px) rotate(6deg)}}
.heart{position:absolute;width:26px;pointer-events:none;animation:burst 1s ease-out forwards}
@keyframes burst{0%{opacity:1;transform:translate(0,0) scale(.6)}100%{opacity:0;transform:translate(var(--dx),-90px) scale(1.2)}}
.say{position:absolute;left:50%;top:-6px;background:#fff;border:2px solid var(--ink);border-radius:14px;padding:3px 10px;font-weight:700;font-size:.85rem;white-space:nowrap;transform:translateX(-50%);opacity:0;transition:opacity .2s}
.say.show{opacity:1}
.hero-art{display:none}
@media(min-width:900px){
  .hero .wrap{grid-template-columns:1.2fr .8fr;align-items:end;gap:36px;padding-top:40px}
  .hero-art{display:block;align-self:end}
  .hero-art img{width:100%;max-width:380px;margin-left:auto;border:3px solid var(--ink);border-radius:var(--r) var(--r) 0 0;border-bottom:0}
  .road{grid-column:1/-1;height:170px}
  .road .truck{width:190px}
  .next{padding:22px}
}

/* sections */
section.block{padding:42px 0}
section.block h2{font-size:clamp(1.8rem,6vw,2.6rem);color:var(--red);margin-bottom:6px}
section.block .sub{margin-bottom:20px}
.alt{background:var(--tint);border-top:3px solid var(--ink);border-bottom:3px solid var(--ink)}
.stops{display:grid;gap:12px}
@media(min-width:760px){.stops{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.stops{grid-template-columns:repeat(3,1fr)}}
.stop{background:var(--white);border:3px solid var(--ink);border-radius:var(--r);padding:14px;display:grid;gap:6px;box-shadow:var(--shadow)}
.stop.cancelled{opacity:.6}
.stop.cancelled h3{text-decoration:line-through}
.stop .date{font-weight:700;color:var(--red)}
.stop h3{font-size:1.25rem}
.stop .btns{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px}
.menu{display:grid;gap:16px}
@media(min-width:900px){.menu{grid-template-columns:repeat(2,1fr);gap:22px}}
.msec{background:var(--white);border:3px solid var(--ink);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow)}
.msec header{background:var(--pink);border-bottom:3px solid var(--ink);padding:12px 16px}
.msec header h3{font-size:1.4rem;color:var(--red)}
.msec header p{font-size:.88rem;margin-top:2px}
.mitem{padding:12px 16px;border-top:2px dashed var(--blush);display:grid;gap:2px}
.mitem:first-of-type{border-top:0}
.mitem .row{display:flex;justify-content:space-between;gap:12px;align-items:baseline}
.mitem b{font-size:1.02rem}
.mitem .price{font-weight:700;color:var(--red);text-align:right;font-size:.95rem}
.mitem p{font-size:.88rem;color:#4a3640}
.mitem.sold b,.mitem.sold p{text-decoration:line-through;opacity:.55}
.sold-tag{font-size:.7rem;font-weight:700;text-transform:uppercase;background:var(--ink);color:#fff;padding:1px 8px;border-radius:99px;margin-left:6px}
.gallery{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
@media(min-width:760px){.gallery{grid-template-columns:repeat(4,1fr);gap:14px}}
.gallery figure{border:3px solid var(--ink);border-radius:var(--r);overflow:hidden;background:var(--white);cursor:zoom-in;aspect-ratio:1/1}
.gallery img{width:100%;height:100%;object-fit:cover}
.lightbox{position:fixed;inset:0;background:rgba(2,6,11,.88);display:none;align-items:center;justify-content:center;z-index:50;padding:16px;flex-direction:column;gap:10px}
.lightbox.on{display:flex}
.lightbox img{max-height:80vh;border:3px solid #fff;border-radius:var(--r)}
.lightbox p{color:#fff;font-weight:700}
footer{background:var(--ink);color:#fff;padding:30px 0}
footer .wrap{display:grid;gap:14px;justify-items:start}
footer img{width:70px}
footer a{color:var(--pink)}
.empty{padding:26px;text-align:center;background:var(--white);border:3px dashed var(--ink);border-radius:var(--r)}
.demo-note{background:var(--ink);color:#fff;font-size:.8rem;text-align:center;padding:5px}

/* admin */
.admin-body{background:var(--tint);padding-bottom:84px}
.card{background:var(--white);border:3px solid var(--ink);border-radius:var(--r);padding:16px;box-shadow:var(--shadow);margin-bottom:14px}
.login{max-width:420px;margin:30px auto}
.login img{width:110px;margin:0 auto 10px}
label{display:block;font-weight:700;font-size:.85rem;margin:10px 0 4px}
input,select,textarea{width:100%;min-height:46px;padding:9px 12px;border:3px solid var(--ink);border-radius:12px;font:inherit;background:#fff}
textarea{min-height:80px;resize:vertical}
.grid2{display:grid;gap:10px}
@media(min-width:640px){.grid2{grid-template-columns:1fr 1fr}}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.tabs{position:fixed;left:0;right:0;bottom:0;background:var(--pink);border-top:3px solid var(--ink);display:flex;z-index:30}
.tabs button{flex:1;min-height:64px;border:0;background:transparent;font:700 .85rem 'DM Sans',sans-serif;color:var(--ink);cursor:pointer;display:grid;gap:2px;place-items:center}
.tabs button.on{background:var(--white);box-shadow:inset 0 4px 0 var(--red)}
.tabs svg{width:26px;height:26px}
@media(min-width:900px){
  .tabs{position:static;border:3px solid var(--ink);border-radius:16px;margin:16px 0;overflow:hidden}
  .admin-body{padding-bottom:30px}
}
.toast{position:fixed;left:50%;bottom:90px;transform:translateX(-50%) translateY(20px);background:var(--ink);color:#fff;padding:10px 18px;border-radius:99px;font-weight:700;opacity:0;transition:.25s;z-index:60;max-width:90%}
.toast.on{opacity:1;transform:translateX(-50%) translateY(0)}
.toast.err{background:var(--red)}
.thumbs{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
@media(min-width:760px){.thumbs{grid-template-columns:repeat(4,1fr)}}
.thumb{border:3px solid var(--ink);border-radius:14px;overflow:hidden;background:#fff}
.thumb img{aspect-ratio:1/1;width:100%;object-fit:cover}
.thumb .t{padding:8px;display:grid;gap:6px}
.thumb.hidden{opacity:.5}
.sec-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:18px 0 8px}
.sec-head h2{font-size:1.5rem;color:var(--red)}
.mini{font-size:.82rem;color:#4a3640}
.hint{background:var(--blush);border:2px solid var(--ink);border-radius:12px;padding:10px 12px;font-size:.9rem;margin-bottom:12px}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* v2 fixes: full-bleed road, shorter hero art */
.road{width:100vw;margin-left:calc(50% - 50vw)}
.road .ground{left:0;right:0}
.road .pin{bottom:58px}
.hero-art img{height:430px;object-fit:cover;object-position:50% 12%}
@media(min-width:900px){.hero .wrap{padding-top:34px}.hero-top{align-self:center}}
.next .chip,.hero .chip{justify-self:start}

[hidden]{display:none!important}

/* ===== v3: map + real trailer ===== */
.hero .wrap.hero-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:20px;padding-top:22px;padding-bottom:10px}
.hero-left{display:grid;gap:12px;align-content:start;min-width:0}
.mapcard{position:relative;isolation:isolate;border:3px solid var(--ink);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow);background:#fff;min-width:0}
#map{height:300px;width:100%;background:#e9e1e5}
.leaflet-container{font-family:'DM Sans',sans-serif}
.maphint{position:absolute;left:10px;right:10px;bottom:22px;z-index:500;background:#fff;border:2px solid var(--ink);border-radius:12px;padding:8px 12px;font-size:.88rem;font-weight:700}
.trailer-pin{background:none!important;border:0!important}
.trailer-pin svg{width:100%;height:100%;overflow:visible;display:block;filter:drop-shadow(0 3px 0 rgba(2,6,11,.3))}
.trailer-pin.next svg{animation:bob 1.3s ease-in-out infinite}
.trailer-pin .wheel,.trailer-svg .wheel{transform-box:fill-box;transform-origin:center}
.road{width:100%;margin:0;height:210px}
.road .ground{left:0;right:0}
.road .truck{width:240px;bottom:28px;left:0}
.road .truck>svg{width:100%;height:auto;display:block;animation:bob 1.1s ease-in-out infinite;overflow:visible}
.road .truck .wheel{animation:spin .7s linear infinite}
.road.parked .truck>svg{animation-play-state:paused}
.road.parked .truck .wheel{animation-play-state:paused}
@keyframes spin{to{transform:rotate(360deg)}}
.road .deco{position:absolute;animation:float 5s ease-in-out infinite}
.road .d1{width:64px;left:12%;bottom:96px}
.road .d2{width:58px;left:44%;bottom:108px;animation-delay:-2s}
.road .d3{width:70px;left:30%;bottom:92px;animation-delay:-3.5s}
.road .pin{right:3%;bottom:54px;width:84px;font-size:.78rem}
.road .pin svg{width:56px;height:66px}
.road .pin span{display:block}
.heart{position:absolute;width:38px;height:38px;pointer-events:none;animation:burst 1.2s ease-out forwards}
.heart svg{width:100%;height:100%}
@keyframes burst{0%{opacity:1;transform:translate(0,0) scale(.5)}100%{opacity:0;transform:translate(var(--dx),-130px) scale(1.2)}}
.say{top:-14px}
.stops-wrap{display:grid;gap:24px;grid-template-columns:minmax(0,1fr)}
.stops{grid-template-columns:repeat(auto-fill,minmax(250px,1fr))!important}
.side-art{display:none}
@media(min-width:900px){
  .hero .wrap.hero-grid{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:34px;padding-top:34px;align-items:stretch}
  #map{height:100%;min-height:470px}
  .mapcard{min-height:470px}
  .road{height:250px}
  .road .truck{width:310px;bottom:34px}
  .road .d1{width:80px;bottom:120px}.road .d2{width:70px;bottom:130px}.road .d3{width:86px;bottom:112px}
  .road .pin{bottom:66px}
  .stops-wrap{grid-template-columns:minmax(0,1fr) 300px;align-items:start}
  .side-art{display:block;width:100%;height:400px;object-fit:cover;object-position:50% 12%;border:3px solid var(--ink);border-radius:var(--r);box-shadow:var(--shadow)}
}

/* pin picker */
.pintools{margin-top:10px;display:grid;gap:6px}
.modal{position:fixed;inset:0;background:rgba(2,6,11,.7);z-index:80;display:flex;align-items:center;justify-content:center;padding:12px}
.modal-card{background:#fff;border:3px solid var(--ink);border-radius:var(--r);padding:14px;width:100%;max-width:760px;max-height:100%;overflow:auto;box-shadow:var(--shadow)}
#pkmap{height:min(52vh,460px);width:100%;border:3px solid var(--ink);border-radius:14px;isolation:isolate;overflow:hidden}
.stop .chip{justify-self:start}
@media(max-width:600px){.road .d3{display:none}.brand{font-size:1.05rem}}

/* ===== Moe's games ===== */
body.noscroll{overflow:hidden}
.gamesband{background:var(--pink);border-top:3px solid var(--ink);border-bottom:3px solid var(--ink)}
.gamesband h2{color:var(--red)}
.heartmeter{display:inline-flex;align-items:center;gap:6px;background:#fff;border:2px solid var(--ink);border-radius:99px;padding:2px 12px;font-weight:700;margin-left:6px}
.gamegrid{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.gcard{background:#fff;border:3px solid var(--ink);border-radius:var(--r);padding:16px;box-shadow:var(--shadow);display:grid;gap:8px;justify-items:start;align-content:start}
.gcard h3{font-size:1.5rem;color:var(--red)}
.gcard p{font-size:.95rem}
.gico{width:92px;height:92px;background:var(--tint);border:3px solid var(--ink);border-radius:18px;padding:10px}
.gico svg{width:100%;height:100%;display:block}
.hico{display:inline-block;width:22px;height:22px;vertical-align:middle}.hico svg{width:100%;height:100%;display:block}
.arcade{position:fixed;inset:0;z-index:90;background:var(--pink);display:flex;flex-direction:column}
.arc-bar{display:flex;align-items:center;gap:12px;padding:10px max(16px,env(safe-area-inset-right,0px)) 10px max(16px,env(safe-area-inset-left,0px));padding-top:max(10px,env(safe-area-inset-top,0px));background:var(--pink);border-bottom:3px solid var(--ink)}
.arc-bar b{font-family:'Caprasimo',serif;font-weight:400;font-size:1.4rem;color:var(--red);flex:1;min-width:0}
.arc-hearts{display:inline-flex;align-items:center;gap:4px;background:#fff;border:2px solid var(--ink);border-radius:99px;padding:2px 12px;font-weight:700}
.arc-stage{flex:1;overflow:auto;padding:14px max(16px,env(safe-area-inset-right,0px)) max(24px,env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px));width:100%;max-width:560px;margin:0 auto;display:grid;gap:12px;align-content:start}
.hud{display:flex;justify-content:space-between;align-items:center;gap:10px;background:#fff;border:3px solid var(--ink);border-radius:14px;padding:8px 14px;font-weight:700}
.hud b{font-family:'Caprasimo',serif;font-weight:400;color:var(--red);font-size:1.3rem}
.lives{display:inline-flex;gap:4px}.life{width:24px;height:24px;display:inline-block}.life svg{width:100%;height:100%;display:block}.life.lost{opacity:.25;filter:grayscale(1)}
.bonus{background:var(--leaf);color:#fff;border:2px solid var(--ink);border-radius:99px;padding:1px 10px;font-size:.85rem}
.gmsg{font-weight:700;min-height:1.5em;text-align:center}
.queue{display:grid;gap:8px}
.cust{display:grid;grid-template-columns:48px 44px 1fr;grid-template-rows:auto auto;gap:2px 10px;align-items:center;text-align:left;background:#fff;border:3px solid var(--ink);border-radius:14px;padding:8px;font:inherit;cursor:pointer;min-height:68px}
.cust[aria-pressed=true]{background:var(--blush);box-shadow:var(--shadow)}
.cust .av{grid-row:1/3;width:48px;height:48px}.cust .av svg{width:100%;height:100%}
.cust .cupmini{grid-row:1/3;width:40px;height:52px}.cust .cupmini svg{width:100%;height:100%}
.cust .otxt{font-weight:700;font-size:.9rem;line-height:1.2}
.pat{height:10px;border:2px solid var(--ink);border-radius:99px;background:#fff;overflow:hidden;align-self:end}.pat i{display:block;height:100%}
.bench{display:grid;gap:10px;grid-template-columns:120px 1fr;align-items:center;background:#fff;border:3px solid var(--ink);border-radius:var(--r);padding:12px}
.mycup{width:110px;height:140px;margin:0 auto}.mycup svg{width:100%;height:100%}
.opts{display:grid;gap:8px;min-width:0}
.optrow{display:grid;gap:4px}.optlabel{font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em}
.optrow>div{display:flex;flex-wrap:wrap;gap:6px}
.opt{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:6px 12px;border:3px solid var(--ink);border-radius:12px;background:#fff;font:700 .9rem 'DM Sans',sans-serif;cursor:pointer}
.opt i{width:14px;height:14px;border-radius:50%;border:2px solid var(--ink);display:inline-block}
.opt[aria-pressed=true]{background:var(--pink);box-shadow:inset 0 0 0 2px var(--ink)}
.row2{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.btn.big{min-height:56px;font-size:1.15rem;padding:10px 28px}
.cwrap{display:flex;justify-content:center}
#cv{width:100%;max-width:400px;height:auto;aspect-ratio:360/560;border:3px solid var(--ink);border-radius:var(--r);touch-action:none;background:#fff1f6;display:block}
.mgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
@media(min-width:420px){.mgrid{grid-template-columns:repeat(4,1fr)}}
.mcard{aspect-ratio:1/1;border:3px solid var(--ink);border-radius:14px;background:var(--pink);padding:0;position:relative;cursor:pointer;overflow:hidden}
.mcard .back,.mcard .front{position:absolute;inset:0;display:grid;place-items:center;padding:10px;transition:opacity .15s}
.mcard .back svg{width:70%;height:70%}
.mcard .front{background:#fff;opacity:0}.mcard .front img{max-width:100%;max-height:100%;object-fit:contain}
.mcard.up .front{opacity:1}.mcard.up .back{opacity:0}
.mcard.done{box-shadow:inset 0 0 0 4px var(--leaf)}
.end{background:#fff;border:3px solid var(--ink);border-radius:var(--r);padding:22px 16px;text-align:center;display:grid;gap:10px;justify-items:center;box-shadow:var(--shadow)}
.end h3{font-size:1.9rem;color:var(--red)}
.bigscore{font:400 3.4rem/1 'Caprasimo',serif;color:var(--ink)}.bigscore small{font-size:1.1rem;font-family:'DM Sans',sans-serif;font-weight:700}
.earned{display:flex;gap:8px;align-items:center;justify-content:center;font-weight:700}
.empty.small{padding:14px}
@media(max-width:420px){.bench{grid-template-columns:1fr}}
.servebar{position:sticky;bottom:calc(-1 * max(24px,env(safe-area-inset-bottom,0px)));background:var(--pink);padding:10px 0;z-index:3;border-top:3px solid var(--ink);margin:0 -4px}
#cv{width:min(100%,calc(min(68dvh,560px)*360/560));height:auto}
.mycup{width:90px;height:116px}
@media(min-width:900px){.mycup{width:110px;height:140px}}

section.block{scroll-margin-top:76px}

/* ===== v4: her branded trailer, grab and drag ===== */
.road .truck{z-index:20;cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;will-change:transform}
.road .truck.grabbing{cursor:grabbing;z-index:60}
.road .truck.grabbing>img{animation:none;filter:drop-shadow(0 14px 0 rgba(2,6,11,.22))}
.road .truck>img{width:100%;height:auto;display:block;animation:bob 1.1s ease-in-out infinite;pointer-events:none;user-select:none}
.road.parked .truck>img{animation-play-state:paused}
.road .truck:focus-visible{outline:3px solid var(--red);outline-offset:4px;border-radius:12px}
.road .truck .say{pointer-events:none;top:-18px;z-index:2}
.trailer-pin img{width:100%;height:100%;display:block;filter:drop-shadow(0 3px 0 rgba(2,6,11,.3));pointer-events:none}
.trailer-pin.next img{animation:bob 1.3s ease-in-out infinite}
.hero .heart{position:absolute;z-index:70;width:38px;height:38px;pointer-events:none;animation:burst 1.2s ease-out forwards}
@keyframes burst{0%{opacity:1;transform:translate(0,0) scale(calc(var(--s,1) * .5))}100%{opacity:0;transform:translate(var(--dx),-140px) scale(var(--s,1))}}

/* ===== v5: brand first, her photo, then the locator ===== */
.hero .wrap.brandhead{display:grid;grid-template-columns:minmax(0,1fr);gap:18px;padding-top:26px;padding-bottom:6px}
.brandtext{display:grid;gap:10px;align-content:center;min-width:0}
.hero h1{font-size:clamp(3rem,15vw,5.6rem);line-height:.95;color:var(--red)}
.hero .tag{font-size:1.15rem;font-weight:700}
.where-line{font-size:.8rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.heroctas{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}
.herophoto{width:100%;height:auto;aspect-ratio:4/5;max-height:560px;object-fit:cover;object-position:50% 30%;border:3px solid var(--ink);border-radius:var(--r);box-shadow:var(--shadow);background:#fff}
.hero .wrap.locator{padding-top:34px;padding-bottom:10px;display:grid;gap:14px}
.loc-title{font-size:clamp(1.9rem,8vw,2.8rem);color:var(--red)}
.loc-grid{display:grid;gap:18px;grid-template-columns:minmax(0,1fr)}
.hero .wrap.locator .next{align-self:start}
@media(min-width:900px){
  .hero .wrap.brandhead{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:44px;padding-top:40px;align-items:center}
  .hero h1{font-size:clamp(4.4rem,8vw,7rem)}
  .herophoto{aspect-ratio:4/5;max-height:600px;justify-self:end;max-width:480px}
  .hero .wrap.locator{padding-top:46px}
  .loc-grid{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:30px;align-items:stretch}
  .mapcard,.loc-grid #map{min-height:430px}
}
.hero .wrap.locator{grid-template-columns:minmax(0,1fr);align-items:start;gap:14px}
@media(min-width:900px){.hero .wrap.locator{grid-template-columns:minmax(0,1fr);align-items:start;gap:16px;padding-top:46px}.hero .wrap.brandhead{align-items:center}}

/* ===== v6: games on their own page; promo on the front page; phone fixes ===== */
button{color:var(--ink);font-family:inherit}
.promo{display:grid;gap:18px;grid-template-columns:minmax(0,1fr);align-items:center;background:#fff;border:3px solid var(--ink);border-radius:var(--r);box-shadow:var(--shadow);padding:20px}
.promo-art{display:flex;gap:10px;align-items:flex-end;justify-content:center}
.promo-art img{height:84px;width:auto;object-fit:contain}
.promo-art img:nth-child(2){height:104px}
.promo-text{display:grid;gap:10px;justify-items:start}
.promo-text h2{margin:0;color:var(--red)}
.promo-row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
@media(min-width:760px){.promo{grid-template-columns:auto minmax(0,1fr);gap:34px;padding:26px 34px}.promo-art img{height:110px}.promo-art img:nth-child(2){height:140px}}
.gtitle{font-size:clamp(2.2rem,9vw,3.4rem);color:var(--red);margin-bottom:6px}
/* Barista Rush fits a phone */
.bench{grid-template-columns:84px minmax(0,1fr)!important;padding:10px;gap:8px}
.mycup{width:76px!important;height:100px!important}
.opt{min-height:38px;padding:4px 10px;font-size:.84rem;border-width:2.5px}
.cust{min-height:56px;padding:6px;grid-template-columns:42px 34px 1fr}
.cust .av{width:42px;height:42px}.cust .cupmini{width:32px;height:44px}
.cust .otxt{font-size:.82rem;color:var(--ink)}
.gmsg{min-height:1.4em;margin:0;font-size:.95rem}
.servebar{padding:8px 0}
.servebar .btn.big{min-height:50px}
@media(min-width:700px){.mycup{width:100px!important;height:130px!important}.bench{grid-template-columns:120px minmax(0,1fr)!important}}

/* ===== v7: why Moe's is popular + look-at-us feed ===== */
.whyband{background:var(--tint);border-top:3px solid var(--ink);border-bottom:3px solid var(--ink);overflow:hidden}
.eyebrow{font-size:.78rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--red);margin-bottom:6px}
.reasons{display:grid;gap:12px;grid-template-columns:minmax(0,1fr);margin:18px 0 30px}
@media(min-width:640px){.reasons{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1000px){.reasons{grid-template-columns:repeat(4,minmax(0,1fr))}}
.reason{background:#fff;border:3px solid var(--ink);border-radius:var(--r);padding:14px 16px;box-shadow:var(--shadow);display:grid;gap:6px;align-content:start}
.reason b{font-family:'Caprasimo',serif;font-weight:400;font-size:1.25rem;line-height:1.15;color:var(--red)}
.reason p{font-size:.95rem}
.feedtitle{font-size:clamp(1.8rem,7vw,2.6rem);color:var(--ink);margin-bottom:4px}
.feedwrap{position:relative;margin:16px calc(-1 * max(16px,env(safe-area-inset-left,0px)))}
.feed{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding:6px max(16px,env(safe-area-inset-left,0px)) 18px;scrollbar-width:thin;-webkit-overflow-scrolling:touch}
.fcard{position:relative;flex:0 0 min(68vw,270px);aspect-ratio:9/16;scroll-snap-align:center;border:3px solid var(--ink);border-radius:var(--r);overflow:hidden;background:var(--pink);box-shadow:var(--shadow);display:block}
.fcard video,.fcard .fig,.fcard .fig img{width:100%;height:100%;object-fit:cover;display:block;border:0;padding:0;background:var(--pink)}
.fcard .fig{cursor:zoom-in}
.fcap{position:absolute;left:0;right:0;bottom:0;padding:26px 12px 10px;color:#fff;font-weight:700;font-size:.9rem;line-height:1.25;background:linear-gradient(transparent,rgba(2,6,11,.78));pointer-events:none}
.sound{position:absolute;top:10px;right:10px;min-height:36px;padding:4px 12px;border:2px solid var(--ink);border-radius:99px;background:#fff;font:700 .78rem 'DM Sans',sans-serif;color:var(--ink);cursor:pointer}
.igtag{position:absolute;top:10px;left:10px;background:#fff;border:2px solid var(--ink);border-radius:99px;padding:2px 10px;font-size:.72rem;font-weight:700;color:var(--ink)}
.fcard.cta{display:grid;place-content:center;gap:12px;padding:20px;text-align:center;background:var(--pink)}
.fcard.cta b{font-family:'Caprasimo',serif;font-weight:400;font-size:1.7rem;color:var(--red);line-height:1.1}
.feednav{display:none;position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:48px;height:48px;border-radius:50%;border:3px solid var(--ink);background:#fff;font-size:2rem;line-height:1;cursor:pointer;color:var(--ink);box-shadow:var(--shadow)}
.feednav.prev{left:14px}.feednav.next{right:14px}
@media(min-width:900px){.feednav{display:block}.fcard{flex-basis:290px}}