* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #8fd8ff; font-family: 'Fredoka', 'Trebuchet MS', sans-serif; color: #1d3557; }
canvas { display: block; }
.panel { position: fixed; background: rgba(255,255,255,0.88); border-radius: 14px; padding: 10px 14px; box-shadow: 0 4px 14px rgba(0,0,0,0.15); pointer-events: none; }
#hud-left { top: 12px; left: 68px; min-width: 190px; } /* (room for the 🏠 at the top left) */
#hud-right { top: 12px; right: 12px; text-align: right; min-width: 170px; }
.big { font-size: 26px; font-weight: 700; }
.muted { color: #5c6f82; font-size: 14px; }
.grade { display: inline-block; width: 38px; height: 38px; line-height: 38px; text-align: center; border-radius: 10px; background: #2ec4b6; color: white; font-weight: 700; font-size: 24px; vertical-align: middle; }
#hint { bottom: 14px; left: 50%; transform: translateX(-50%); font-size: 14px; white-space: nowrap; }
#crosshair { position: fixed; top: 50%; left: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border: 2px solid white; border-radius: 50%; box-shadow: 0 0 3px rgba(0,0,0,0.5); pointer-events: none; }
#crosshair.target { border-color: #ffb703; background: rgba(255,183,3,0.4); }
#catalog { top: 140px; right: 12px; width: 270px; display: none; max-height: calc(100vh - 300px); overflow-y: auto; overscroll-behavior: contain; }
.cat-item { padding: 3px 8px; border-radius: 8px; margin: 2px 0; font-size: 15px; }
.cat-item small { font-size: 12px; }
.cat-item.sel { background: #2ec4b6; color: white; }
.cat-item small { display: block; opacity: 0.8; }
#card { top: 132px; left: 12px; width: 250px; display: none; }
.bar { height: 8px; background: #e3eaf0; border-radius: 4px; margin: 2px 0 6px; overflow: hidden; }
.bar > div { height: 100%; border-radius: 4px; }
.thought { font-size: 14px; padding: 3px 0; border-bottom: 1px dashed #d0dbe4; }
#toasts { position: fixed; top: 12px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; gap: 6px; align-items: center; pointer-events: none; }
.toast { background: rgba(29,53,87,0.9); color: white; padding: 7px 14px; border-radius: 10px; font-size: 15px; animation: fade 4.5s forwards; }
@keyframes fade { 0% { opacity: 0; transform: translateY(-6px); } 8% { opacity: 1; transform: none; } 80% { opacity: 1; } 100% { opacity: 0; } }
body.photo .panel, body.photo #crosshair, body.photo #toasts { display: none !important; }
/* (photo mode: Stats, Build and Ride / Fix do nothing there, so they step aside; the stick, Jump, Dive, 💾 and 📷 stay.
   The hint keeps clear of the 🏠 and 🔊 buttons on the left: on an upright phone it ran under 🔊. 2026-10-23) */
body.photo #tbtns [data-k="Tab"], body.photo #tbtns [data-k="KeyB"], body.photo #tbtns [data-k="KeyE"] { display: none; }
#photohint { position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%); white-space: nowrap; color: white; font-size: 15px; text-shadow: 0 1px 4px rgba(0,0,0,0.7); pointer-events: none; transition: opacity 1s; opacity: 0; }
body.touch-device #photohint { bottom: auto; top: 70px; white-space: normal; width: max-content; max-width: calc(100vw - 140px); text-align: center; } /* (clear of the touch buttons) */
#touchui { position: fixed; inset: 0; pointer-events: none; display: none; }
#touchui button { pointer-events: auto; font-size: 15px; padding: 12px 14px; border-radius: 14px; background: rgba(255,255,255,0.85); color: #1d3557; box-shadow: 0 2px 8px rgba(0,0,0,0.2); margin: 4px; touch-action: none; user-select: none; -webkit-user-select: none; }
#touchui button:active { background: #2ec4b6; color: white; }
#joy { position: absolute; left: 24px; bottom: 90px; width: 130px; height: 130px; border-radius: 50%; background: rgba(255,255,255,0.35); border: 3px solid rgba(255,255,255,0.8); pointer-events: auto; touch-action: none; }
#joyknob { position: absolute; left: 40px; top: 40px; width: 50px; height: 50px; border-radius: 50%; background: rgba(255,255,255,0.95); box-shadow: 0 2px 6px rgba(0,0,0,0.25); }
#tbtns, #tbuild { position: absolute; right: 12px; bottom: 80px; display: flex; flex-wrap: wrap; justify-content: flex-end; max-width: 300px; }
#tpause { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); }
#tsave { position: absolute; top: 12px; right: 12px; display: none; } body.photo #tsave { display: block; } /* (photo mode only: the top right is clear then, the HUD is hidden) */
#catalog.touch { pointer-events: auto; }
#catalog.touch .cat-item, #catalog.touch [data-tab] { cursor: pointer; }
/* (a tip waits while a guest's card is open, and comes back when it closes: on a phone both sat on the left, the tip
   over the card: UAT, 2026-10-23) */
body.touch:has(#card[style*="display: block"]) #tutorial { display: none !important; }
@media (max-width: 700px) {
  #card { max-height: calc(100vh - 360px); max-height: calc(100dvh - 360px); overflow-y: auto; -webkit-overflow-scrolling: touch; } /* (above ⏸ Menu and the joystick) */
  .big { font-size: 20px; } #hud-left, #hud-right { min-width: 0; padding: 6px 10px; font-size: 13px; }
  #catalog { width: 190px; font-size: 13px; } #card { width: 210px; top: 122px; } #hint { white-space: normal; width: max-content; max-width: calc(100vw - 32px); font-size: 12px; text-align: center; }
  #joy { left: 14px; bottom: 24px; } #tbtns, #tbuild { bottom: 16px; right: 8px; max-width: 190px; }
  #touchui button { font-size: 13px; padding: 10px 10px; margin: 3px; }
  #tpause { top: auto; bottom: 170px; left: 14px; transform: none; }
}
#water-tint { position: fixed; inset: 0; background: rgba(0,120,200,0.35); pointer-events: none; display: none; }
#dash { top: 50%; left: 50%; transform: translate(-50%,-50%); width: 760px; max-width: calc(100vw - 32px); display: none; max-height: 80vh; overflow-y: auto; -webkit-overflow-scrolling: touch; }
#menu { position: fixed; inset: 0; background: linear-gradient(90deg, rgba(20,60,100,0.45), rgba(20,60,100,0) 70%); display: flex; align-items: flex-start; justify-content: flex-start; padding: 16px 16px 16px max(16px, 5vw); overflow-y: auto; }
#menu .box { margin: auto 0; background: white; border-radius: 20px; padding: 26px 32px; width: 460px; max-width: calc(100vw - 32px); box-shadow: 0 10px 40px rgba(0,0,0,0.3); }
#menu h1 { margin: 0 0 4px; font-size: 38px; color: #0096c7; }
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; }
button.alt { background: #e3eaf0; color: #1d3557; }
button.small { padding: 4px 10px; font-size: 15px; }
.row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 6px 0; }
.keys { font-size: 13px; color: #5c6f82; line-height: 1.6; margin-top: 10px; }
kbd { background: #e3eaf0; border-radius: 4px; padding: 0 5px; font-family: inherit; }
#flash { position: fixed; inset: 0; background: white; opacity: 0; pointer-events: none; transition: opacity 0.6s; }
#polaroid { position: fixed; right: 24px; top: 140px; width: 250px; background: white; padding: 10px 10px 34px; box-shadow: 0 8px 26px rgba(0,0,0,0.35); transform: rotate(4deg) translateX(340px); transition: transform 0.6s; pointer-events: none; }
#polaroid.show { transform: rotate(4deg) translateX(0); }
#polaroid img { width: 100%; display: block; aspect-ratio: 4 / 3; object-fit: cover; background: #ddd; }
#polaroid .cap { position: absolute; left: 0; right: 0; bottom: 8px; text-align: center; font-size: 15px; color: #1d3557; }
.album { display: flex; gap: 6px; flex-wrap: wrap; margin: 6px 0; }
.album img { width: 64px; height: 48px; object-fit: cover; border: 3px solid white; box-shadow: 0 1px 4px rgba(0,0,0,0.3); }
body.touch #hint, body.touch-device #hint { display: none; }
.swatch { width: 26px; height: 26px; padding: 0; margin: 2px; border-radius: 50%; border: 3px solid white; box-shadow: 0 0 0 1px #c5d0db; vertical-align: middle; }
.swatch.on { box-shadow: 0 0 0 3px #1d3557; }
#tutorial { bottom: 70px; left: 50%; transform: translateX(-50%); width: max-content; max-width: min(540px, calc(100vw - 32px)); text-align: center; border: 3px solid #2ec4b6; display: none; font-size: 16px; }
#tutorial .step { font-size: 12px; color: #2ec4b6; font-weight: 700; letter-spacing: 0.04em; }
body.touch #tutorial { pointer-events: auto; bottom: auto; top: 150px; max-width: min(480px, calc(100vw - 32px)); } /* (480: clear of the build list on an iPad) */
/* the stats window is open: the tip and the messages would show through it and over its title */
body:has(#dash[style*="display: block"]) :is(#tutorial, #toasts) { visibility: hidden; }
/* the stats window: two columns (stats, then map and history), stacked on narrow screens; on touch screens the game
   controls and corner panels step aside while it's open (it shows the same numbers), and ✕ closes it */
#dash { pointer-events: auto; overscroll-behavior: contain; } /* (panels ignore touches, but this one scrolls and has ✕) */
.dash-cols { display: flex; gap: 16px; }
.dash-side canvas { max-width: 100%; height: auto; }
.dash-x { position: sticky; top: 0; float: right; z-index: 1; margin: 0 0 4px 8px; }
@media (max-width: 700px) { .dash-cols { flex-direction: column; } .dash-side { align-self: center; } }
body.touch:has(#dash[style*="display: block"]) :is(#touchui, #hud-left, #hud-right, #minimap, #catalog) { visibility: hidden; }
/* touch screens: messages go under the ⏸ Menu button (it sits at the top middle), above the tip; on narrow screens
   (where the button moves down and the money/rating panels fill the top) they go in the open sky below the panels */
body.touch #toasts { top: 64px; max-width: calc(100vw - 32px); }
body.touch .toast { text-align: center; }
@media (max-width: 700px) { body.touch #toasts { top: 34%; } body.touch .toast { font-size: 14px; padding: 6px 12px; } }
/* build panel: tab buttons and roomier rows */
#catalog .tabs { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; margin-bottom: 6px; }
.tabbtn { font-family: inherit; font-size: 14px; font-weight: 600; padding: 4px 10px; margin: 0; border-radius: 999px; background: #e3eaf0; color: #1d3557; }
.tabbtn.on { background: #1d3557; color: white; }
.cat-note { font-size: 12px; margin-bottom: 4px; }
/* iPad / touch: bigger text and buttons, list stops above the button panel */
body.touch #catalog { width: min(330px, 46vw); top: 116px; max-height: calc(100vh - 116px - 210px); padding: 12px 14px; }
body.touch .tabbtn { font-size: 16px; padding: 9px 14px; }
body.touch .cat-note { font-size: 14px; margin: 4px 0 6px; }
body.touch .cat-item { font-size: 17px; padding: 10px 12px; margin: 6px 0; border-radius: 12px; background: rgba(227, 234, 240, 0.55); }
body.touch .cat-item.sel { background: #2ec4b6; color: white; }
body.touch .cat-item small { font-size: 13px; margin-top: 2px; }
body.touch #touchui button { font-size: 17px; padding: 14px 18px; border-radius: 16px; margin: 0; }
body.touch #tbtns, body.touch #tbuild { right: 16px; bottom: 24px; max-width: 390px; gap: 10px; }
body.touch #joy { left: 32px; bottom: 40px; }
/* (on a touch screen the guest card stops above the joystick and scrolls: a guest with six thoughts ran its last line
   under it at iPad size, UAT 2026-10-25; the phone sizes have their own limits below) */
@media (min-width: 701px) and (min-height: 501px) { body.touch #card { max-height: calc(100vh - 320px); max-height: calc(100dvh - 320px); overflow-y: auto; -webkit-overflow-scrolling: touch; } }
#touchui #tplace { background: #2ec4b6; color: white; font-weight: 700; }
@media (max-width: 700px) {
  body.touch #catalog { width: 58vw; max-height: calc(100vh - 116px - 250px); }
  body.touch #touchui button { font-size: 14px; padding: 10px 12px; }
  body.touch #tbtns, body.touch #tbuild { max-width: 210px; bottom: 16px; right: 8px; gap: 6px; }
  body.touch #joy { left: 14px; bottom: 24px; }
  body.touch .tabbtn { font-size: 14px; padding: 7px 10px; }
  body.touch .cat-item { font-size: 15px; }
}
/* phones, upright: the money box stops before the guest box (they overlapped), and while a tip shows the build list
   starts below it, so the tabs aren't hidden behind the tip */
@media (max-width: 500px) {
  #hud-left { max-width: calc(100vw - 262px); }
  body.touch:has(#tutorial[style*="display: block"]) #catalog { top: 290px; max-height: calc(100vh - 290px - 250px); }
}
/* phones, sideways (short screens): the build buttons go in one row and the build list fills the space above them
   (it was about one line tall), tips sit on the left, clear of the list, and below the messages */
@media (max-height: 500px) {
  body.touch #tbuild { max-width: 560px; }
  body.touch #catalog { top: 116px; max-height: calc(100vh - 116px - 96px); }
  body.touch #tutorial { left: 12px; transform: none; top: 122px; max-width: calc(100vw - min(330px, 46vw) - 52px); font-size: 14px; }
  /* (two messages stacked reach down over the tip: the tip moves down below them while there are two. Showing only the
     newest hid "Day 1 done!" as soon as the next day's news came) */
  body.touch:has(#toasts .toast + .toast) #tutorial { top: 172px; }
  /* (a guest's card: it scrolls inside itself instead of running off the bottom, just right of the joystick, which
     covered its bars: UAT, 2026-10-23) */
  #card { max-height: calc(100vh - 140px); max-height: calc(100dvh - 140px); overflow-y: auto; -webkit-overflow-scrolling: touch; }
  body.touch #card { left: 168px; }
}

/* park level card in the stats screen */
.lvl-card { background: #f3f8fc; border-radius: 12px; padding: 8px 10px; margin: 6px 0; }
.lvl-need { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; margin-top: 4px; }
.lvl-bar { height: 7px; border-radius: 4px; background: #dde6ee; overflow: hidden; margin: 2px 0 2px; }
.lvl-bar i { display: block; height: 100%; border-radius: 4px; }
.lvl-unlocks { font-size: 13px; margin-top: 6px; }
.lvl-all { margin-top: 6px; font-size: 13px; }
.lvl-all summary { cursor: pointer; color: #0077b6; font-weight: 600; padding: 4px 0; }
.lvl-row { padding: 5px 0; border-top: 1px solid #e3eaf0; opacity: 0.75; }
.lvl-row.on { opacity: 1; }
.lvl-row small { display: block; color: #5c6b7a; }

/* guests talking out loud: a speech bubble over their head */
.gtalk { position: fixed; transform: translate(-50%, -100%); background: #fff; color: #1d3557; border-radius: 14px; padding: 5px 11px; font-size: 14px; font-weight: 600;
  max-width: 220px; text-align: center; box-shadow: 0 3px 10px rgba(0,0,0,0.2); pointer-events: none; z-index: 2; }
.gtalk::after { content: ''; position: absolute; left: 50%; bottom: -7px; margin-left: -7px; border: 7px solid transparent; border-bottom: 0; border-top-color: #fff; }

/* 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); }
#menu { padding-left: max(70px, 5vw); } #menu .box { max-width: calc(100vw - 86px); } /* (the menu starts clear of the 🏠 and 🔊) */
@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); }
  #hud-left { left: 122px; }
  #menu { padding-top: 66px; }
}