* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #ffe3ec; font-family: 'Fredoka', 'Trebuchet MS', sans-serif; color: #1d3557; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
canvas { display: block; touch-action: none; }
button { font-family: inherit; font-size: 17px; font-weight: 600; border: 0; border-radius: 12px; padding: 10px 16px; margin: 4px 4px 4px 0; cursor: pointer; background: #2ec4b6; color: white; touch-action: manipulation; }
button.alt { background: #e3eaf0; color: #1d3557; }
button.pink { background: #ff5d8f; }
button:disabled { opacity: 0.45; cursor: default; }
button.small { font-size: 14px; padding: 6px 10px; }
kbd { display: inline-block; background: #e3eaf0; border-radius: 6px; padding: 0 6px; font-family: inherit; font-weight: 600; font-size: 0.9em; color: #1d3557; }
.muted { color: #6b7a90; }

/* ---- HUD ---- */
.panel { position: fixed; background: rgba(255,255,255,0.92); border-radius: 14px; padding: 8px 14px; box-shadow: 0 4px 14px rgba(0,0,0,0.15); }
#stats { top: 10px; left: 68px; font-size: 15px; line-height: 1.35; min-width: 150px; } /* (room for the 🏠 at the top left) */
#stats .money { font-size: 24px; font-weight: 700; }
#stats .stars { color: #f4a100; }
#topbtns { position: fixed; top: 10px; right: 10px; display: flex; gap: 6px; }
#topbtns button { margin: 0; font-size: 20px; padding: 8px 12px; background: rgba(255,255,255,0.92); color: #1d3557; box-shadow: 0 4px 14px rgba(0,0,0,0.15); }
#topbtns button .badge { font-size: 12px; background: #ff5d8f; color: #fff; border-radius: 8px; padding: 0 5px; margin-left: 3px; vertical-align: top; }
#rail { position: fixed; top: 10px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; max-width: calc(100vw - 420px); overflow-x: auto; padding: 0 2px 6px; }
#rail:empty { display: none; }
.ticket { background: #fffdf2; border-radius: 6px 6px 12px 12px; border-top: 6px solid #ffd166; padding: 5px 10px 6px; min-width: 104px; box-shadow: 0 4px 10px rgba(0,0,0,0.18); cursor: pointer; font-size: 13px; line-height: 1.25; text-align: center; flex: none; }
.ticket .fr { font-size: 22px; letter-spacing: 1px; }
.ticket .nm { font-weight: 700; font-size: 14px; }
.ticket.sel { outline: 4px solid #2ec4b6; transform: translateY(3px); }
.ticket.ok { border-top-color: #f4a261; }
.ticket.grumpy { border-top-color: #e63946; }
.ticket .tag { font-size: 11px; color: #6b7a90; }

#hint { position: fixed; left: 50%; bottom: 76px; transform: translateX(-50%); width: max-content; background: rgba(29,53,87,0.88); color: #fff; padding: 8px 16px; border-radius: 12px; font-size: 17px; text-align: center; max-width: min(92vw, 640px); pointer-events: none; }
#hint:empty { display: none; }
#stationbar { position: fixed; left: 50%; bottom: 12px; transform: translateX(-50%); display: flex; align-items: center; gap: 6px; background: rgba(255,255,255,0.92); padding: 6px 8px; border-radius: 16px; box-shadow: 0 4px 14px rgba(0,0,0,0.15); }
#stationbar button { margin: 0; }
#stationbar .arrow { font-size: 22px; padding: 6px 16px; }
#stationbar .st { background: #e3eaf0; color: #1d3557; font-size: 15px; padding: 8px 12px; }
#stationbar .st.on { background: #ff5d8f; color: #fff; }
#stationbar .st .alert { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: #ffbe0b; margin-left: 5px; animation: blink 0.8s infinite; }
@keyframes blink { 50% { opacity: 0.2; } }

#act { position: fixed; right: 18px; bottom: 90px; min-width: 150px; min-height: 76px; font-size: 22px; border-radius: 22px; background: #ff5d8f; box-shadow: 0 6px 16px rgba(0,0,0,0.25); touch-action: none; }
#act.hidden, #trash.hidden, #endday.hidden { display: none; }
#act .k { display: block; font-size: 12px; font-weight: 400; opacity: 0.85; }
#act:active, #act.down { background: #e0446f; transform: scale(0.97); }
#trash { position: fixed; left: 18px; bottom: 90px; background: rgba(255,255,255,0.92); color: #1d3557; box-shadow: 0 4px 14px rgba(0,0,0,0.15); }
#endday { position: fixed; left: 50%; top: 110px; transform: translateX(-50%); background: #ff5d8f; }


/* labels that follow things in the 3D shop */
#labels { position: fixed; inset: 0; pointer-events: none; overflow: hidden; }
.lbl { position: absolute; transform: translate(-50%, -100%); white-space: nowrap; }
.boxlbl { background: rgba(255,255,255,0.92); border-radius: 10px; padding: 2px 8px; font-weight: 700; font-size: 15px; box-shadow: 0 2px 6px rgba(0,0,0,0.15); }
.boxlbl.low { background: #ffd166; }
.boxlbl.out { background: #e63946; color: #fff; }
.boxlbl kbd { font-size: 11px; margin-right: 3px; }
/* (an upright phone: the fruit boxes sit close together on screen, so their counts are smaller and don't crowd) */
@media (max-width: 500px) { .boxlbl { font-size: 13px; padding: 1px 5px; border-radius: 8px; } }
.bubble { background: #fff; border-radius: 16px; padding: 6px 12px; font-size: 16px; box-shadow: 0 3px 10px rgba(0,0,0,0.2); text-align: center; max-width: 240px; white-space: normal; }
.bubble::after { content: ''; position: absolute; left: 50%; bottom: -8px; margin-left: -8px; border: 8px solid transparent; border-bottom: 0; border-top-color: #fff; }
.bubble .fr { font-size: 22px; }
.mood { font-size: 26px; filter: drop-shadow(0 2px 2px rgba(0,0,0,0.25)); }
.meter { width: 150px; height: 16px; background: rgba(255,255,255,0.9); border-radius: 8px; overflow: hidden; box-shadow: 0 2px 6px rgba(0,0,0,0.2); position: relative; }
.meter .bar { height: 100%; background: #2ec4b6; width: 0; }
.vmeter { width: 26px; height: 140px; background: rgba(255,255,255,0.92); border-radius: 10px; position: relative; overflow: hidden; box-shadow: 0 2px 6px rgba(0,0,0,0.2); transform: translate(-50%, -50%); }
.vmeter .zone { position: absolute; left: 0; right: 0; bottom: 80%; height: 15%; background: #80ed99; }
/* (not only green: dark lines at its edges and a star in it, over the rising smoothie, so a color-blind player sees it too) */
.vmeter .zone::before { content: ''; position: absolute; inset: 0; border-top: 2px solid #1d3557; border-bottom: 2px solid #1d3557; z-index: 2; }
.vmeter .zone::after { content: '⭐'; position: absolute; inset: 0; display: grid; place-items: center; font-size: 12px; line-height: 1; z-index: 2; }
.vmeter .bar { position: absolute; left: 4px; right: 4px; bottom: 0; border-radius: 6px; background: #ff5d8f; }
.vmeter .top { position: absolute; left: 0; right: 0; top: 0; height: 5%; background: repeating-linear-gradient(135deg, #e63946 0 4px, #fff 4px 7px); opacity: 0.7; }

#toasts { position: fixed; top: 110px; right: 12px; display: flex; flex-direction: column; gap: 6px; align-items: flex-end; pointer-events: none; }
.toast { background: rgba(29,53,87,0.92); color: white; padding: 8px 14px; border-radius: 10px; font-size: 16px; animation: fade 4s forwards; max-width: 340px; }
.toast.good { background: rgba(46,196,182,0.95); }
.toast.bad { background: rgba(230,57,70,0.95); }
@keyframes fade { 0% { opacity: 0; transform: translateX(20px); } 8% { opacity: 1; transform: none; } 80% { opacity: 1; } 100% { opacity: 0; } }

/* ---- menus ---- */
.modal { position: fixed; inset: 0; background: rgba(60,20,50,0.35); display: none; align-items: center; justify-content: center; padding: 16px; overflow-y: auto; }
.modal.open { display: flex; }
/* (the end-of-day card's 📦 Order supplies opens this over the card: both are .modal and the card comes later in the
   page, so until 2026-10-23 the supplies window opened underneath it and the button seemed to do nothing) */
#supplies { z-index: 1; }
.box { background: #fff; border-radius: 22px; padding: 22px 26px; width: 520px; max-width: 100%; max-height: calc(100vh - 32px); overflow-y: auto; box-shadow: 0 10px 40px rgba(0,0,0,0.3); margin: auto; }
.box h1 { margin: 0 0 4px; color: #ff5d8f; font-size: 34px; }
.box h2 { margin: 0 0 8px; font-size: 26px; }
.row { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px solid #eef2f6; }
.row:last-child { border-bottom: 0; }
.row .item { display: flex; align-items: center; gap: 10px; }
.row .emoji { font-size: 28px; width: 36px; text-align: center; }
.row .sub { font-size: 13px; color: #6b7a90; }
.tabs { display: flex; gap: 6px; margin: 8px 0 10px; }
.tabs button { margin: 0; flex: 1; background: #e3eaf0; color: #1d3557; }
.tabs button.on { background: #ff5d8f; color: #fff; }
.keys { font-size: 14px; color: #6b7a90; line-height: 1.9; margin-top: 10px; }
.sum { display: grid; grid-template-columns: 1fr auto; gap: 4px 16px; font-size: 17px; margin: 10px 0; }
.sum b { text-align: right; }
.levelup { background: #fff3c4; border-radius: 12px; padding: 10px 14px; margin: 8px 0; font-weight: 600; }
.levelup.great { background: #e2f8e8; } /* (a perfect day: every review five stars) */
.review { font-size: 14px; padding: 4px 0; border-bottom: 1px solid #eef2f6; }

@media (max-width: 760px) {
  #rail { top: 70px; max-width: calc(100vw - 20px); }
  #stats { font-size: 13px; } #stats .money { font-size: 19px; }
  #stationbar .st { font-size: 13px; padding: 6px 8px; } #stationbar .arrow { padding: 6px 10px; }
  #act { min-width: 120px; min-height: 64px; font-size: 18px; right: 10px; }
  #hint { font-size: 14px; bottom: 70px; }
}
/* phones held sideways (short screens): the end-of-day card's numbers go two pairs to a row, so Start Day fits on
   the screen without scrolling down to find it */
@media (max-height: 500px) {
  #sumbox { width: 760px; padding: 14px 22px; }
  #sumbox h2 { font-size: 22px; margin-bottom: 2px; }
  #sumbox .sum { grid-template-columns: 1fr auto 1fr auto; font-size: 15px; margin: 6px 0; gap: 2px 16px; }
  #sumbox .row { padding: 4px 0; font-size: 15px; }
  #sumbox .levelup { padding: 6px 12px; margin: 4px 0; font-size: 15px; }
}
.floater { font-weight: 700; font-size: 22px; text-shadow: 0 2px 0 #fff, 0 0 6px #fff, 0 0 2px #fff; transform: translate(-50%, -100%); }
/* Paws Friends: the name tag over a friend who came in as a customer */
.ftag { background: #7b5cff; color: #fff; font-size: 13px; font-weight: 700; padding: 2px 9px; border-radius: 9px; white-space: nowrap; }

/* the round 🔊 / 🔇 button (made in index.html): under the 🏠 on phones and narrow screens, beside it on an iPad or a
   computer, where the top-left box moves over to make room */
.paws-sound { position: fixed; top: calc(max(10px, env(safe-area-inset-top)) + 52px); left: max(10px, env(safe-area-inset-left)); z-index: 60; width: 44px; height: 44px; margin: 0; padding: 0; border: 2px solid rgba(29, 53, 87, 0.15); border-radius: 50%; background: rgba(255, 255, 255, 0.94); color: #1d3557; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2); font-size: 20px; line-height: 1; display: grid; place-items: center; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.paws-sound:active { transform: scale(0.92); }
@media (min-width: 1000px) and (min-height: 501px) {
  .paws-sound { top: max(10px, env(safe-area-inset-top)); left: calc(max(10px, env(safe-area-inset-left)) + 52px); }
  #stats { left: 122px; } #rail { max-width: calc(100vw - 750px); }
}
/* (a narrow screen, like a phone held upright: windows start clear of the 🏠 and the 🔊 under it, like Splash's menu) */
@media (max-width: 660px) { .modal { padding-left: 70px; } }
/* (a phone held upright: the order cards start under the money box, not over its last line, and the hint sits above
   Start over and Pour, not across them; the tips pop up over the empty floor just above the hint, since up top they
   covered the order ticket, the first one telling you to look at it, until 2026-10-24) */
@media (orientation: portrait) and (max-width: 600px) {
  #rail { top: 98px; } #hint { bottom: 162px; }
  #toasts { top: auto; bottom: 206px; left: 12px; right: 12px; align-items: center; }
}
/* the Legend challenge (Dylan, 2026-10-25): shown for a few seconds as a Smoothie Legend's day starts (a tap closes it),
   then only the ⏰ badge at the top, which shows it again */
#legend { position: fixed; top: 92px; left: 50%; transform: translateX(-50%); z-index: 20; width: min(440px, calc(100vw - 32px)); box-sizing: border-box;
  background: #fff3c4; color: #1d3557; border: 3px solid #f4a100; border-radius: 16px; padding: 12px 16px; text-align: center; box-shadow: 0 8px 24px rgba(0,0,0,0.2);
  transition: opacity 0.35s, transform 0.35s; animation: lg-in 0.35s ease-out; cursor: pointer; }
#legend.hidden { display: none; }
#legend.off { opacity: 0; transform: translateX(-50%) translateY(-12px); }
@keyframes lg-in { from { opacity: 0; transform: translateX(-50%) translateY(-12px) scale(0.96); } }
#legend .lg-top { font-size: 14px; font-weight: 700; color: #b26b00; letter-spacing: 0.3px; }
#legend .lg-new { background: #ff5d8f; color: #fff; border-radius: 8px; padding: 0 6px; margin-left: 4px; font-size: 12px; }
#legend .lg-name { font-size: 24px; font-weight: 700; margin: 2px 0 4px; }
#legend .lg-goal { font-size: 16px; line-height: 1.3; }
#legend .lg-prize { font-size: 15px; margin-top: 6px; }
#legend .lg-sub { font-size: 13px; color: #6b7a90; margin-top: 4px; }
#b-legend.hidden { display: none; }
#topbtns #b-legend .badge { background: none; padding: 0; margin-left: 1px; font-size: 18px; vertical-align: baseline; } /* (today's challenge, not a count) */
.levelup.lg-miss { background: #eef2f6; font-weight: 500; }
.levelup .lg-count { font-size: 14px; font-weight: 500; color: #6b7a90; }
/* (a phone held sideways: on the left under the money box, so the notes that pop up on the right as the day starts
   ("Running low...") don't land on it) */
@media (max-height: 500px) { #legend { top: 108px; left: 76px; transform: none; animation-name: lg-in-side; padding: 8px 12px; width: min(400px, calc(100vw - 92px)); }
  #legend.off { transform: translateY(-12px); } #legend .lg-name { font-size: 20px; } #legend .lg-goal { font-size: 14px; } }
@keyframes lg-in-side { from { opacity: 0; transform: translateY(-12px); } }
/* (a phone held upright: the ⏰ badge goes on a row of its own under 📦 and ⏸, clear of the money box) */
@media (orientation: portrait) and (max-width: 600px) { #legend { top: 150px; }
  #topbtns { flex-wrap: wrap; justify-content: flex-end; max-width: 130px; } #topbtns #b-legend { order: 3; } }
/* (a phone held sideways, wider than 760 px: the order tickets stay between the money box and the buttons up top.
   Centered on the screen, two or more (Rush hour has up to three) spread left over the money box) */
@media (max-height: 500px) and (min-width: 761px) {
  #rail { left: 336px; right: 184px; transform: none; max-width: none; }
  #rail > :first-child { margin-left: auto; } #rail > :last-child { margin-right: auto; } /* (centered in that space, and still scrolls from the first) */
}
/* (a phone held upright: the tickets get the whole width, a little smaller, so Rush hour's three fit side by side; held
   at left: 50% the row could only be half the screen wide, and the second ticket was cut off) */
@media (orientation: portrait) and (max-width: 600px) {
  #rail { left: 10px; right: 10px; transform: none; max-width: none; gap: 6px; }
  #rail > :first-child { margin-left: auto; } #rail > :last-child { margin-right: auto; }
  .ticket { min-width: 0; max-width: 116px; padding: 4px 6px 5px; font-size: 11px; } .ticket .fr { font-size: 18px; } .ticket .nm { font-size: 12px; }
}