/* juice.css — visual polish layer (see js/juice.js) */
/* #4 run over */
.ribbon.jz-warm{background:linear-gradient(#ffb15c,#ff8a3d 55%,#f06a2a);box-shadow:inset 0 2px 0 rgba(255,255,255,.45),0 6px 0 #b9521c,0 16px 24px -10px rgba(180,80,20,.55)}
.ribbon.jz-warm::before,.ribbon.jz-warm::after{background:#c95e22}
.jz-over .stars3{display:none}
.jz-hero{display:flex;align-items:center;justify-content:center;gap:16px;margin:2px auto 10px}
.jz-score{display:flex;flex-direction:column;align-items:center;line-height:1}
.jz-score small{font-size:13px;color:var(--ink2,#6b6f86);letter-spacing:.04em;text-transform:uppercase}
.jz-num{font-size:52px;color:#ff7a1a;text-shadow:0 3px 0 #fff,0 5px 0 rgba(180,80,20,.25);margin:4px 0}
.jz-vans{font-size:13px;color:var(--ink2,#6b6f86)}
.jz-mvw{display:flex;flex-direction:column;align-items:center;gap:4px}
.jz-mvw small{font-size:11px;color:var(--ink2,#6b6f86)}
.jz-mini{display:block;border-radius:7px;box-shadow:0 4px 0 rgba(0,0,0,.18),0 8px 16px -8px rgba(0,0,0,.4)}
.jz-beat{margin:0 auto 6px;width:max-content;padding:6px 14px;border-radius:99px;background:#fff1e0;color:#e0671a;font-size:16px;box-shadow:inset 0 0 0 2px #ffc690;animation:jzBeat 1.6s ease-in-out infinite}
.jz-primary{animation:jzPulse 1.4s ease-in-out infinite}
@keyframes jzPulse{0%,100%{filter:brightness(1) drop-shadow(0 0 0 rgba(34,184,167,0))}50%{filter:brightness(1.08) drop-shadow(0 0 10px rgba(34,184,167,.9))}}
@keyframes jzBeat{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}
/* #5 revive */
.jz-rv .jz-mvw.rv{margin:4px auto 8px}
.jz-rvh{display:block;font-size:19px;color:#e0671a;margin-bottom:4px}
.jz-rv .rv-txt span{font-size:14px;color:var(--ink2,#6b6f86)}
#rv-ad,#rv-coin{position:relative}
.jz-ring{position:absolute;right:-10px;top:-10px;width:30px;height:30px;transform:rotate(-90deg);filter:drop-shadow(0 2px 2px rgba(0,0,0,.25))}
.jz-ring circle{fill:#fff;stroke:#ff7a1a;stroke-width:5;stroke-dasharray:100.5;stroke-dashoffset:0;animation:jzRing 5s linear forwards}
@keyframes jzRing{to{stroke-dashoffset:100.5}}
body.jz-ending #streak{display:none!important}
/* #9 home */
#btn-play{position:relative;overflow:hidden;animation:jzIdle 2.6s ease-in-out 3}
#btn-play::after{content:'';position:absolute;top:-20%;bottom:-20%;width:40%;left:-60%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-18deg);animation:jzShine 4s ease-in-out 1s infinite;pointer-events:none}
@keyframes jzIdle{0%,100%{filter:brightness(1) drop-shadow(0 0 0 rgba(255,190,80,0))}50%{filter:brightness(1.07) drop-shadow(0 0 12px rgba(255,190,80,.8))}}
@keyframes jzShine{0%,70%{left:-60%}100%{left:130%}}
@keyframes jzBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}
.jz-dot{position:relative}
.jz-dot::before{content:'';position:absolute;top:4px;right:4px;width:12px;height:12px;border-radius:50%;background:#ff4b4b;border:2px solid #fff;box-shadow:0 2px 3px rgba(0,0,0,.25);z-index:2;animation:jzDot 1.8s ease-in-out infinite}
@keyframes jzDot{0%,100%{transform:scale(1)}50%{transform:scale(1.18)}}
/* #10 shop */
#shop-items.jz-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;align-content:start}
#shop-items.jz-grid>.shop-own{grid-column:1/-1}
#shop-items.jz-grid>.shop-item{flex-direction:column;text-align:center;align-items:center;margin:0;position:relative;overflow:hidden}
#shop-items.jz-grid>.shop-item .si-ic{width:56px;height:56px}
#shop-items.jz-grid>.shop-item .si-txt{font-size:12px}
#shop-items.jz-grid>.shop-item .btn{margin-top:auto}
.shop-item.jz-feat{grid-column:1/-1;flex-direction:row!important;text-align:left!important;background:linear-gradient(135deg,#fff6d8,#ffe0a8);box-shadow:inset 0 0 0 2px #ffc24a,0 6px 16px -8px rgba(200,120,0,.5);padding-top:22px}
.jz-tag{position:absolute;top:0;left:0;padding:3px 12px 4px;border-radius:0 0 12px 0;background:linear-gradient(#ff8a72,#e9503f);color:#fff;font-size:12px;z-index:1}
.jz-rays{position:absolute;left:8px;top:50%;width:120px;height:120px;margin-top:-50px;background:repeating-conic-gradient(rgba(255,200,60,.35) 0 12deg,transparent 12deg 30deg);border-radius:50%;animation:jzSpin 9s linear infinite;pointer-events:none;-webkit-mask:radial-gradient(circle,#000 30%,transparent 70%);mask:radial-gradient(circle,#000 30%,transparent 70%)}
.jz-feat>*:not(.jz-rays):not(.jz-tag){position:relative}
@keyframes jzSpin{to{transform:rotate(360deg)}}
.shop-item.jz-can .si-ic{animation:jzWig 3s ease-in-out infinite}
@keyframes jzWig{0%,90%,100%{transform:rotate(0)}93%{transform:rotate(-8deg)}96%{transform:rotate(8deg)}}
.shop-item.jz-cant .btn{filter:grayscale(.75);opacity:.75}
.jz-need{display:block;color:#e2475b;font-size:11px;margin-top:2px}
/* #11 first move sticker */
.jz-sticker{position:absolute;left:50%;top:28%;transform:translate(-50%,0) rotate(-6deg);padding:8px 18px;border-radius:14px;background:#fff;color:#22b8a7;font:24px 'Lilita One',system-ui,sans-serif;box-shadow:0 0 0 3px #22b8a7,0 8px 20px -6px rgba(0,0,0,.35);pointer-events:none;z-index:5;animation:jzStk 1.8s ease-out forwards}
@keyframes jzStk{0%{transform:translate(-50%,0) rotate(-6deg) scale(0)}15%{transform:translate(-50%,0) rotate(-6deg) scale(1.15)}25%,80%{transform:translate(-50%,0) rotate(-6deg) scale(1);opacity:1}100%{transform:translate(-50%,-20px) rotate(-6deg) scale(1);opacity:0}}
@media (prefers-reduced-motion:reduce){#btn-play,#btn-play::after,.jz-dot::before,.jz-primary,.jz-beat,.jz-rays,.shop-item.jz-can .si-ic,.jz-ring circle{animation:none!important}.jz-sticker{animation:none;opacity:1}}

/* iPhone fixes (Oct 26) */
/* shop: on short portrait screens the panel pushed the wizard (and his bubble) up under the top bar. Let the wizard shrink instead. */
@media (max-aspect-ratio:1/1){
  #scr-shop .shop-stage{overflow:hidden}
  #scr-shop .keeper{flex:0 1 min(30vh,320px);height:auto;min-height:110px;margin-top:8px}
  #scr-shop .shop-items{max-height:min(48vh,calc(100dvh - 330px))}
  #scr-shop .bubble{top:4%;max-width:min(190px,46vw)}
}
/* full-bleed on iOS: fill the whole screen (under the notch / home bar / Safari's floating toolbar) */
html{height:100%;min-height:100dvh;background:#7cc8f2}
body{min-height:100dvh;height:100dvh}
#app{height:100%;min-height:100%}
/* game screen declutter: no Drive! button (the van auto-drives when all loaded / nothing fits); kept only while the first-job tutorial asks for it */
#btn-drive{display:none}
body:has(#tut:not(.hidden):not(.jit)) #btn-drive{display:flex}
/* just-in-time tip: smaller card; push the combo badge below it so they never overlap */
@media (max-width:600px){
  #tut.jit{top:6px;left:10px;right:10px;font-size:13px;line-height:1.25;padding:6px 6px 6px 8px;gap:8px;border-radius:16px}
  #tut.jit .tnum,#tut.jit .tip-ic{width:24px;height:24px}
  #tut.jit .tip-x{width:28px;height:28px}
  #board-wrap:has(#tut.jit:not(.hidden)) #combo{top:66px}
}
/* results card on phones: stars + coins + buttons first; breakdown becomes small chips, extras become one-liners */
@media (max-width:600px){
  .pay-card .stars3{height:70px;margin:0 0 4px}.pay-card .stars3 .slot{width:56px;height:56px}
  .pay-card .pay-client{display:none}
  .pay-card .pay{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin:4px 0}
  .pay-card .pay li{margin:0;padding:4px 10px;gap:5px;font-size:13px;border-radius:99px;box-shadow:none;background:rgba(255,255,255,.7)}
  .pay-card .pay li img{width:18px;height:18px}.pay-card .pay li .ic{width:16px;height:16px}
  .pay-card .pay li span:nth-last-child(2){flex:none}
  .pay-card .total{font-size:32px;padding:4px 18px 4px 8px;margin-top:4px}
  .pay-card .ws-road{margin:6px 0 0}.pay-card .ws-road .ws-track{transform:scale(.8);transform-origin:center}
  .pay-card .ws-road small,.pay-card .keep-found,.pay-card .nu-got{font-size:12px;line-height:1.25;margin:4px 0}
  .pay-card .nu-pay{margin:6px auto 0}.pay-card .nu-pay .nu-pic{width:40px;height:36px}.pay-card .nu-pay .nu-pic img{max-width:36px;max-height:32px}
  .pay-card .nu-pay .nu-txt em{display:none}
}
/* game screen declutter (Career/Daily/Quick only; Endless untouched): no Drive! button, the van leaves by itself when it's full / nothing fits */
body.jz-nodrive:not(.wide) #scr-game #btn-drive{display:none}
/* a just-in-time tip and the combo badge share the top of the board: the combo wins while it's showing */
#board-wrap:has(#combo.on) #tut.jit{opacity:0;transition:opacity .2s;pointer-events:none}
/* the placeholder "Pack it tight!" pill (shown when a job has no real requests) adds noise on phones */
body.jz-nodrive:not(.wide) #g-requests:has(> .req:only-child img[src*="bigbox"]){display:none}
/* results card, phones, non-Endless: stars + coins + one button row; the breakdown folds behind the coin total, extras shrink to one line each */
@media (max-width:520px){
  body.jz-nodrive #modal-card .pay-client{display:none}
  body.jz-nodrive #modal-card .stars3{transform:scale(.8);margin:-8px 0 -10px}
  body.jz-nodrive #modal-card ul.pay{display:none}
  body.jz-nodrive #modal-card.jz-open ul.pay{display:block;font-size:14px}
  body.jz-nodrive #modal-card.jz-open ul.pay li{padding-top:5px;padding-bottom:5px;margin-bottom:4px}
  body.jz-nodrive #modal-card .total{cursor:pointer;position:relative}
  body.jz-nodrive #modal-card .total::after{content:'tap for details';position:absolute;left:50%;top:100%;transform:translateX(-50%);margin-top:2px;font-size:11px;color:#8a8ea3;white-space:nowrap;letter-spacing:0}
  body.jz-nodrive #modal-card.jz-open .total::after{content:'hide details'}
  body.jz-nodrive #modal-card .total{margin-bottom:18px}
  body.jz-nodrive #modal-card .so-close{padding:6px 10px;font-size:13px}
  body.jz-nodrive #modal-card .so-close small,body.jz-nodrive #modal-card .ws-road small,body.jz-nodrive #modal-card .nu-txt em{display:none}
  body.jz-nodrive #modal-card .ws-road{transform:scale(.82);margin:-6px 0}
  body.jz-nodrive #modal-card .nu-card{padding:6px 10px}
  body.jz-nodrive #modal-card .nu-pic{width:42px;height:42px}
}

/* ---------- desktop scaling (Oct 26) ----------
   Desktop/landscape (body.wide, set by game.js setWide) was drawn at phone pixel sizes, so on a 1440x810 laptop the UI looked tiny.
   --ui-scale grows with viewport height; phones never get body.wide so they stay at 1 and look unchanged.
   game.js fitAll reads --ui-scale as the max zoom for popups, and lets the title menu zoom up to fill the height (marked "desktop-scale hook").
   The board canvas is NOT zoomed (it already sizes itself to its area), so drag maths are untouched. */
body{--ui-scale:1}
@media (min-height:680px){body.wide{--ui-scale:1.12}}
@media (min-height:760px){body.wide{--ui-scale:1.25}}
@media (min-height:860px){body.wide{--ui-scale:1.38}}
@media (min-height:960px){body.wide{--ui-scale:1.5}}
@media (min-height:1060px){body.wide{--ui-scale:1.62}}
@media (min-height:1200px){body.wide{--ui-scale:1.8}}
@media (min-height:1400px){body.wide{--ui-scale:2.05}}
/* home top pills, shop / map / slide top bars */
body.wide .title-top,body.wide .screen>.topbar,body.wide #scr-map>.topbar{zoom:var(--ui-scale)}
/* shop: item list panel (the shopkeeper art already scales with vh) */
body.wide #scr-shop .shop-panel{zoom:var(--ui-scale);width:min(440px,calc(46vw / var(--ui-scale)))}
/* game: wider sidebar, contents zoomed (fitAll still shrinks #g-side as a whole if it would overflow) */
body.wide #scr-game.active{grid-template-columns:min(36vw,calc(clamp(300px,24vw,400px) * var(--ui-scale))) 1fr}
body.wide #g-side>*{zoom:var(--ui-scale)}
body.wide #toast,body.wide #client-say{zoom:var(--ui-scale)}
/* map: bottom-right dock */
body.wide #scr-map .map-dock{zoom:var(--ui-scale)}
/* the zoomed dock is ~230px*scale wide (+28px inset), so the Next up panel reserves that much on its right instead of centring under it */
body.wide #nextup{align-self:stretch;width:auto;margin-left:20px;margin-right:calc(230px * var(--ui-scale) + 44px)}
/* home: use the phone proportions (logo/van were drawn extra-large on desktop, which forced fitAll to zoom the whole column down
   and left the buttons tiny); fitAll then zooms this column up until it fills the height */
body.wide #logo-img{width:400px}
body.wide #title-truck{width:380px;height:190px}
body.wide .menu{width:320px}
/* leaderboard / profile / invite sheets (social.js), not zoomed by fitAll */
body.wide .so-card{zoom:var(--ui-scale);max-height:calc((100vh - 36px) / var(--ui-scale))}
/* home on wide screens: logo + van on the left, name card + buttons on the right, so the menu is not squeezed by a
   tall single column; fitAll zooms the whole thing to fill the height (≈1.3–1.5x on laptops) */
body.wide .title-wrap{display:grid;grid-template-columns:auto 320px;grid-auto-rows:auto;column-gap:48px;row-gap:12px;align-items:center;justify-items:center;align-content:center}
body.wide .title-wrap>.logo{grid-column:1;grid-row:1 / span 3;align-self:center}
body.wide .title-wrap>#title-truck{grid-column:1;grid-row:4;align-self:start}
body.wide .title-wrap>*:not(.logo):not(#title-truck){grid-column:2}
body.wide .title-wrap>.namebox{grid-row:1;align-self:end}
body.wide .title-wrap>.so-pb{grid-row:2}
body.wide .title-wrap>.menu{grid-row:3 / span 2;align-self:center}

/* ---------- home declutter (Oct 26) ----------
   juice.js declutter(): modes move to #scr-modes, settings/help go to a bottom-right corner, invite is a small bottom-left pill,
   the personal-best card is the single leaderboard entry, tagline removed. */
.hd-ic{width:26px;height:26px;object-fit:contain;flex:none;pointer-events:none}
.logo-sub{display:none!important}
.menu .hd-more{display:flex;align-items:center;justify-content:center;gap:8px;padding:10px 14px;font-size:19px}
.menu .hd-more .hd-ic:last-child{width:20px;height:20px;opacity:.85}
.menu .small-row{justify-content:center}
.hd-corner{position:absolute;right:max(14px,env(safe-area-inset-right));bottom:max(14px,env(safe-area-inset-bottom));display:flex;gap:10px;z-index:3}
.hd-corner .btn.round{width:46px;height:46px;min-width:0;padding:0;border-radius:50%}
.hd-corner .btn.round .ic{width:24px;height:24px}
.hd-inv{position:absolute;left:max(14px,env(safe-area-inset-left));bottom:max(14px,env(safe-area-inset-bottom));z-index:3;display:flex;align-items:center;gap:5px;padding:6px 14px 6px 8px;height:46px;border-radius:99px;font-size:16px}
.hd-inv .hd-ic{width:30px;height:30px}
body.wide .hd-corner,body.wide .hd-inv{zoom:var(--ui-scale)}
/* modes page */
#scr-modes{flex-direction:column;align-items:center}
#scr-modes .topbar{width:100%}
#scr-modes .hd-sp{width:46px}
#scr-modes .hd-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;width:min(560px,calc(100% - 28px));margin:auto;padding:84px 0 24px;align-content:center}
#scr-modes .hd-card{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:170px;padding:18px 10px;font-size:22px;border-radius:26px;text-align:center;white-space:normal}
#scr-modes .hd-card>.ic,#scr-modes .hd-card>svg{width:52px;height:52px}
#scr-modes .hd-card .rl{display:block}
#scr-modes .hd-desc{display:block;font-size:13px;line-height:1.2;opacity:.9;letter-spacing:0;max-width:20ch}
#scr-modes .hd-card.jz-dot::before{top:10px;right:10px;width:16px;height:16px}
#scr-modes #btn-rush .rush-badge{top:10px;left:10px;right:auto;font-size:14px}
body.wide #scr-modes .hd-grid{grid-template-columns:repeat(4,1fr);width:min(1100px,calc(100% - 60px));zoom:var(--ui-scale);width:min(1000px,calc((100% - 60px) / var(--ui-scale)))}
body.wide #scr-modes .hd-card{min-height:230px}