:root {
  --sun: #ffb347; --sea: #1b8fa8; --leaf: #2f8f3a; --ink: #fffaf0; --shade: rgba(16, 32, 46, 0.62);
  --font: "Baloo 2", "Trebuchet MS", system-ui, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #0d2a38; color: var(--ink); font-family: var(--font); }
#game { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
[hidden] { display: none !important; }

/* HUD */
#hud { position: fixed; inset: 0; pointer-events: none; padding: max(12px, env(safe-area-inset-top)) 14px 14px; }
.panel { position: absolute; background: var(--shade); border-radius: 16px; padding: 8px 14px; backdrop-filter: blur(6px); }
.score { top: 12px; left: 14px; font-size: 34px; line-height: 1; display: flex; gap: 10px; align-items: baseline; }
.score span { font-size: 18px; color: var(--sun); }
.energy { top: 12px; right: 14px; width: min(320px, 42vw); }
.energy .label { font-size: 14px; letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.85; }
.bar { height: 14px; border-radius: 8px; background: rgba(255, 255, 255, 0.15); overflow: hidden; margin-top: 4px; }
.bar { position: relative; }
.red-zone { position: absolute; inset: 0 auto 0 0; width: 25%; background: rgba(230, 57, 70, 0.35); border-right: 2px solid #ff5a67; }
#energy-fill { position: relative; height: 100%; width: 100%; background: linear-gradient(90deg, #e63946, #ffb347 35%, #6ccf5a 60%); transition: width 0.2s; }
.feed-head { display: flex; justify-content: space-between; align-items: center; }
#lives { color: #9be38f; letter-spacing: 0.15em; font-size: 16px; }
.red-note { display: none; margin-top: 4px; color: #ff8a8a; font-weight: 800; font-size: 14px; }
#feed.red { animation: pulse 0.8s ease-in-out infinite alternate; }
#feed.red .red-note { display: block; }
@keyframes pulse { from { box-shadow: 0 0 0 0 rgba(230, 57, 70, 0); } to { box-shadow: 0 0 0 4px rgba(230, 57, 70, 0.7); } }
#veg { display: block; margin-top: 4px; color: #ffd400; font-weight: 800; }
.quest { top: 76px; left: 14px; max-width: min(340px, 70vw); font-size: 15px; }
.quest h2 { margin: 0 0 4px; font-size: 17px; color: var(--sun); }
.quest ul { margin: 0; padding: 0; list-style: none; }
.quest li { display: flex; justify-content: space-between; gap: 12px; opacity: 0.95; }
.quest li.done { color: #9be38f; }
.quest li.done::before { content: "\2713 "; }
#frenzy { margin-top: 6px; color: #ffd400; font-size: 18px; }
#toasts { position: absolute; top: 28%; left: 50%; transform: translateX(-50%); display: grid; gap: 6px; justify-items: center; width: 90vw; }
.toast { background: var(--shade); padding: 6px 16px; border-radius: 999px; font-size: 22px; font-weight: 800; animation: rise 1.8s ease-out forwards; text-align: center; }
.toast.good { color: #ffe066; } .toast.bad { color: #ff8a8a; } .toast.info { color: #bfe9ff; }
@keyframes rise { 0% { opacity: 0; transform: translateY(10px) scale(0.9); } 12% { opacity: 1; transform: none; } 75% { opacity: 1; } 100% { opacity: 0; transform: translateY(-24px); } }

/* First-visit introduction: letterbox bars and the area's name */
#intro { position: fixed; inset: 0; pointer-events: none; display: grid; place-items: center; align-content: center; text-align: center;
         background: linear-gradient(#000 0 11%, transparent 11% 89%, #000 89%); animation: introfade 7s ease-in-out forwards; }
#intro h2 { margin: 0; font-size: clamp(44px, 9vw, 96px); line-height: 1; color: #ffd166; text-shadow: 0 4px 0 #c0392b, 0 10px 30px rgba(0, 0, 0, 0.6); }
.intro-eyebrow { margin: 0; font-size: 22px; letter-spacing: 0.2em; text-transform: uppercase; color: #fffaf0; text-shadow: 0 2px 8px #000; }
#intro-place { margin: 6px 0 0; font-size: clamp(20px, 3.5vw, 32px); color: #9be38f; text-shadow: 0 2px 8px #000; }
.intro-skip { position: absolute; bottom: 3%; left: 0; right: 0; margin: 0; font-size: 14px; opacity: 0.75; }
@keyframes introfade { 0% { opacity: 0; } 12% { opacity: 1; } 85% { opacity: 1; } 100% { opacity: 0; } }
/* An area's first-visit fly-over (area-intro.js): the same letterbox and title, the title fading before the camera lands */
.area-intro { position: fixed; inset: 0; z-index: 5; pointer-events: none; display: grid; place-items: center; align-content: center; text-align: center;
              background: linear-gradient(#000 0 11%, transparent 11% 89%, #000 89%); animation: areafade 1.2s ease-out; transition: opacity 1.4s ease-in; }
.area-intro.fade { opacity: 0; }
.area-intro h2 { margin: 0; font-size: clamp(44px, 9vw, 96px); line-height: 1; color: #ffd166; text-shadow: 0 4px 0 #c0392b, 0 10px 30px rgba(0, 0, 0, 0.6); }
.area-intro-eyebrow { margin: 0; font-size: 22px; letter-spacing: 0.2em; text-transform: uppercase; color: #fffaf0; text-shadow: 0 2px 8px #000; }
.area-intro-place { margin: 6px 0 0; font-size: clamp(20px, 3.5vw, 32px); color: #9be38f; text-shadow: 0 2px 8px #000; }
@keyframes areafade { from { opacity: 0; } to { opacity: 1; } }

/* Touch controls */
#touch { position: fixed; inset: 0; pointer-events: none; }
#stick { position: absolute; width: 120px; height: 120px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.5); background: rgba(255, 255, 255, 0.12); display: none; }
/* The steering orb (input.js): always there on a touch screen, below Wally; a gold ring while a finger is on it. */
#stick.orb { display: block; pointer-events: auto; touch-action: none; left: auto; right: max(18px, env(safe-area-inset-right)); top: auto; bottom: max(20px, env(safe-area-inset-bottom)); width: 128px; height: 128px; border: 3px solid rgba(40, 90, 30, 0.7); background: radial-gradient(circle at 40% 35%, rgba(150, 230, 110, 0.75), rgba(60, 150, 50, 0.6) 60%, rgba(30, 90, 30, 0.55)); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35); transition: box-shadow 0.12s, border-color 0.12s; }
#stick.orb.active { border-color: #ffd166; box-shadow: 0 0 0 5px rgba(255, 209, 102, 0.85), 0 0 22px rgba(255, 209, 102, 0.7); }
#stick.orb #knob { left: 39px; top: 39px; width: 50px; height: 50px; background: rgba(230, 255, 210, 0.85); box-shadow: 0 2px 6px rgba(0,0,0,0.3); }
#knob { position: absolute; left: 35px; top: 35px; width: 50px; height: 50px; border-radius: 50%; background: rgba(255, 255, 255, 0.6); }
#touch button { pointer-events: auto; position: absolute; border: 0; border-radius: 50%; color: #102030; font: 800 18px var(--font); background: rgba(255, 255, 255, 0.82); }
#t-jump { right: 22px; bottom: max(26px, env(safe-area-inset-bottom)); width: 92px; height: 92px; background: #ffd166; }
#t-fours { right: 128px; bottom: max(30px, env(safe-area-inset-bottom)); width: 72px; height: 72px; }
#t-fours.on { background: #6ccf5a; }
#t-pause { right: 14px; top: 96px; width: 44px; height: 44px; font-size: 15px; }
#t-cam { right: 14px; top: 148px; width: 44px; height: 44px; font-size: 13px; }

/* Screens */
.overlay { position: fixed; inset: 0; display: grid; place-items: center; padding: 16px; background: radial-gradient(circle at 50% 30%, rgba(255, 179, 71, 0.25), rgba(8, 30, 44, 0.78)); }
.card { width: min(560px, 100%); max-height: 100%; overflow: auto; background: rgba(12, 40, 56, 0.9); border-radius: 22px; padding: 22px 26px; text-align: center; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4); border: 2px solid rgba(255, 209, 102, 0.4); }
.card h1 { margin: 0; font-size: clamp(48px, 12vw, 84px); line-height: 1; color: #ffd166; text-shadow: 0 4px 0 #c0392b, 0 8px 18px rgba(0, 0, 0, 0.4); }
.sub { margin: 4px 0 12px; font-size: 22px; color: #9be38f; }
.area { color: var(--sun); font-weight: 800; }
.big { font-size: 26px; }
.fine { font-size: 14px; opacity: 0.85; }
.fine a { color: #ffd166; }
.go { margin: 8px 0 14px; padding: 12px 44px; border: 0; border-radius: 999px; font: 800 24px var(--font); color: #102030; background: linear-gradient(#ffe08a, #ffb347); cursor: pointer; box-shadow: 0 6px 0 #c77d1a; }
.go:active { transform: translateY(3px); box-shadow: 0 3px 0 #c77d1a; }
.keys { display: flex; flex-wrap: wrap; gap: 6px 14px; justify-content: center; font-size: 15px; }
kbd { background: rgba(255, 255, 255, 0.15); border-radius: 6px; padding: 1px 6px; font-family: inherit; }
body.touch .keys.pc:not([data-device]), body:not(.touch) .keys.phone:not([data-device]) { display: none; }   /* lists with data-device are switched by device.js */
@media (max-width: 600px) { .score { font-size: 26px; } .quest { top: 64px; font-size: 13px; } .quest h2 { font-size: 15px; } .toast { font-size: 18px; } }

/* Esplanade Run and the map */
.mango-count { color: #ffcf4a; font-size: 22px; }
.pearl-count { color: #f4f0ff; font-size: 22px; margin-left: 10px; }
/* Under water the feed-o-meter becomes the air meter. */
.energy.air #energy-fill { background: linear-gradient(90deg, #e63946, #59c3ff 30%, #9ff0ff); }
.energy.air .red-zone { opacity: 0.6; }
.track { left: 50%; transform: translateX(-50%); bottom: max(14px, env(safe-area-inset-bottom)); width: min(520px, 70vw); display: flex; gap: 10px; align-items: center; font-size: 13px; }
.track-bar { position: relative; flex: 1; height: 8px; border-radius: 4px; background: rgba(255, 255, 255, 0.2); }
#track-wally { position: absolute; top: -5px; width: 18px; height: 18px; margin-left: -9px; border-radius: 50%; background: #6ccf5a; border: 2px solid #fff; }
#count { position: absolute; top: 38%; left: 0; right: 0; text-align: center; font-size: clamp(48px, 10vw, 96px); font-weight: 800; color: #ffd166; text-shadow: 0 4px 0 #c0392b; }
.stars { font-size: 44px; color: #ffd166; margin: 6px 0; letter-spacing: 0.1em; }
.result-lines { list-style: none; margin: 8px auto; padding: 0; max-width: 340px; text-align: left; }
.result-lines li { display: flex; justify-content: space-between; padding: 3px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.12); }
.result-lines li:last-child { font-size: 20px; color: #ffd166; border: 0; }
.postcard { margin: 12px auto; max-width: 400px; background: #fff6e0; color: #2b2b2b; border-radius: 10px; padding: 10px 14px; transform: rotate(-1.5deg); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35); text-align: left; }
.postcard b { color: #c0392b; }
.postcard p { margin: 4px 0 0; }
.map-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 12px 0; text-align: left; }
.map-area { border-radius: 14px; padding: 10px 12px; background: rgba(255, 255, 255, 0.08); border: 2px solid rgba(255, 209, 102, 0.35); color: inherit; font: inherit; cursor: pointer; text-align: left; }
.map-area b { display: block; font-size: 17px; }
.map-area small { display: block; opacity: 0.8; }
.map-area .goal { display: block; margin: 6px 0 4px; font-size: 13px; line-height: 1.35; opacity: 0.92; }
.map-area .s { color: #ffd166; letter-spacing: 0.08em; }
.map-area.locked { opacity: 0.45; cursor: default; }
.map-area.open:hover { background: rgba(255, 209, 102, 0.18); }
/* Adventures opened by stars: rapids, line traverse, bungee, the markets */
.map-head { font-size: 19px; margin: 14px 0 2px; }
.map-head span { color: #ffd166; font-size: 16px; }
.map-acts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; margin: 8px 0 10px; text-align: left; }
.map-act { border-radius: 12px; padding: 8px 10px; background: rgba(255, 255, 255, 0.06); border: 1px dashed rgba(255, 209, 102, 0.4); }
.map-act b { display: block; font-size: 15px; }
.map-act small { display: block; font-size: 12px; line-height: 1.3; opacity: 0.85; margin-top: 3px; }
.map-act .need { display: block; margin-top: 4px; color: #ffd166; font-size: 13px; }
.map-act.open { border-style: solid; background: rgba(255, 209, 102, 0.14); }

/* Dive and Up: shown whenever Wally is in the water, on phones and PCs alike, each
   with its keyboard key underneath. Big enough for a thumb. */
.dive-buttons { position: fixed; right: 18px; bottom: 150px; display: flex; flex-direction: column; gap: 10px; z-index: 6; }
.dive-buttons button { width: 92px; height: 74px; border-radius: 18px; border: 2px solid rgba(159, 238, 255, 0.7);
  background: rgba(10, 60, 80, 0.72); color: #e8fbff; font: 800 20px/1.1 inherit; cursor: pointer; }
.dive-buttons button small { display: block; font-size: 12px; font-weight: 600; opacity: 0.75; margin-top: 3px; }
.dive-buttons button:active, .dive-buttons button.on { background: rgba(60, 170, 210, 0.85); }
.dive-buttons button[disabled] { opacity: 0.35; cursor: default; }
body:not(.touch) .dive-buttons { bottom: 110px; }

/* The arrow at the top of the screen pointing to where to go (the reef). */
.guide-arrow { position: fixed; top: calc(max(10px, env(safe-area-inset-top)) + 96px);   /* under both rows of buttons */ left: 50%; transform: translateX(-50%); text-align: center; color: #ffe08a; z-index: 5; pointer-events: none; text-shadow: 0 2px 6px rgba(0,0,0,0.6); }
.guide-arrow .tip { display: inline-block; font-size: 44px; line-height: 1; transition: transform 0.12s linear; }
.guide-arrow small { display: block; font: 700 14px/1.2 inherit; color: #fff; }

/* The opener: Ken's title art fills the screen; Play, How to play and the credit sit along the bottom. */
.overlay.opener { padding: 0; background: #0b1d27; display: block; }
.opener-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.opener-bar { position: absolute; left: 0; right: 0; bottom: 0; padding: 18px 16px max(16px, env(safe-area-inset-bottom)); text-align: center;
  background: linear-gradient(to top, rgba(6, 22, 32, 0.85), rgba(6, 22, 32, 0.55) 60%, rgba(6, 22, 32, 0)); }
.opener-buttons { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.opener-buttons .go { margin: 0; }
.ghost { font: inherit; font-size: 18px; padding: 12px 22px; border-radius: 999px; cursor: pointer; color: #fff;
  background: rgba(255, 255, 255, 0.12); border: 2px solid rgba(255, 255, 255, 0.55); }
.ghost:hover { background: rgba(255, 255, 255, 0.22); }
.credit { margin: 10px 0 0; font-size: 15px; letter-spacing: 0.02em; color: #ffe3a3; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7); }
.how-card { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); max-height: calc(100% - 32px); }
/* Upright screens (phones): show the whole picture, with a soft blurred copy filling the space around it. */
.opener-blur { display: none; }
@media (max-aspect-ratio: 6/5) {
  .opener-blur { display: block; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: blur(22px) brightness(0.55); transform: scale(1.1); }
  .opener-art { object-fit: contain; object-position: 50% 38%; }
}
/* Credits: who did what, the free assets, and the Acknowledgement of Country. */
.link { font: inherit; color: #ffd166; background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; }
.credits-card h2 { margin: 0 0 4px; color: #ffd166; font-size: 28px; }
.credits-card .go { margin: 4px 0 0; }
.credits-list { margin: 0; text-align: center; }
.credits-list dt { margin-top: 8px; font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; color: #8fd3c7; }
.credits-list dd { margin: 2px 0 0; font-size: 16px; }
.credits-list dd.small { font-size: 13px; opacity: 0.85; }
.acknowledge { margin: 10px 0 6px; font-size: 13px; line-height: 1.45; opacity: 0.9; font-style: italic; }
.love { margin: 14px 0 0; color: #ffd166; font-size: 22px; }
.places dt { text-transform: none; letter-spacing: 0; font-size: 15px; font-weight: 800; }
/* Level start cards sit over Ken's title art, so it is the first thing seen on any page. */
.overlay.art-bg { background: linear-gradient(rgba(8, 30, 44, 0.45), rgba(8, 30, 44, 0.7)), url(assets/title/opener.webp) center / cover no-repeat; }
/* A title over the live scene (the zip line: Barron Falls behind it): see-through
   on the right so the falls show, the card to the left. Phones keep it centred. */
.overlay.live-view { background: linear-gradient(to right, rgba(8, 30, 44, 0.7), rgba(8, 30, 44, 0.15) 55%, rgba(8, 30, 44, 0)); place-items: center start; }
.overlay.live-view .card { width: min(440px, 100%); }
@media (max-width: 700px) { .overlay.live-view { place-items: end center; background: linear-gradient(rgba(8, 30, 44, 0), rgba(8, 30, 44, 0.75) 55%); } }
/* The cinematic intro's captions (the zip line: Barron Falls, then down the gorge). */
.cine-caption { position: fixed; left: 50%; bottom: 12%; transform: translateX(-50%); padding: 10px 22px; border-radius: 14px; background: rgba(8, 30, 44, 0.55); color: #fff; font-size: clamp(20px, 4vw, 34px); font-weight: 700; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6); white-space: normal; max-width: min(90vw, 980px); width: max-content; text-align: center; transition: opacity 0.6s; pointer-events: none; z-index: 5; }
.cine-caption.fade { opacity: 0; }
/* Settings on the pause screen (settings-ui.js): steering and first-time tips. */
.settings { display: grid; gap: 10px; margin: 14px 0 4px; text-align: left; font-size: 16px; }
.settings label { display: grid; gap: 4px; }
.settings label.check { display: flex; align-items: center; gap: 8px; }
.settings select { font: inherit; font-size: 15px; padding: 6px 8px; border-radius: 10px; border: 2px solid rgba(255, 209, 102, 0.4); background: #0e2a3a; color: #eaf4f2; }
.settings input[type=checkbox] { width: 20px; height: 20px; accent-color: #ffd166; }
/* Links in the opening screen's credit line: the game's gold, like its buttons. */
.opener-bar .credit a { color: #ffd166; }
/* First-time tips (tips.js): a card near the top, not in the way, never stopping the game. */
.tip-card { position: fixed; top: calc(max(10px, env(safe-area-inset-top)) + 156px);   /* under both rows of buttons and the where-to-go arrow */ left: 50%; transform: translateX(-50%); width: min(460px, calc(100% - 32px)); z-index: 20; background: rgba(12, 40, 56, 0.95); border: 2px solid rgba(255, 209, 102, 0.6); border-radius: 16px; padding: 12px 16px; color: #eaf4f2; font-size: 17px; line-height: 1.4; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4); animation: tip-in 0.3s ease-out; }
.tip-card p { margin: 0 0 8px; }
.tip-buttons { display: flex; gap: 10px; justify-content: flex-end; align-items: center; }
.tip-buttons button { font: inherit; font-size: 15px; border-radius: 10px; padding: 6px 14px; cursor: pointer; }
.tip-ok { background: #ffd166; color: #102030; border: 0; font-weight: 800; }
.tip-off { background: none; color: #b9d3cf; border: 0; text-decoration: underline; }
@keyframes tip-in { from { opacity: 0; transform: translate(-50%, -10px); } to { opacity: 1; transform: translate(-50%, 0); } }
/* The speaker button (audio-ui.js): on every page, always there, in the top row left of Gear (clear of the score and the feed-o-meter). */
.sound-btn { position: fixed; top: max(10px, env(safe-area-inset-top)); right: 50%; transform: translateX(-168px); z-index: 40; width: 44px; height: 44px; border-radius: 50%; border: 2px solid rgba(255, 209, 102, 0.6); background: rgba(12, 40, 56, 0.85); font-size: 20px; line-height: 1; cursor: pointer; display: grid; place-items: center; }
/* The trailer playing muted on the opening screen, bottom right; hidden on small screens (the Trailer button stays). */
.trailer-peek { position: absolute; right: 18px; bottom: 50px; width: clamp(180px, 21vw, 300px); padding: 0; border: 3px solid rgba(255, 209, 102, 0.85); border-radius: 14px; overflow: hidden; background: #000; cursor: pointer; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5); }
.trailer-peek video { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.trailer-peek span { position: absolute; left: 0; right: 0; bottom: 0; padding: 6px 10px; background: linear-gradient(transparent, rgba(0, 0, 0, 0.75)); color: #ffd166; font: 800 15px var(--font); text-align: left; }
.trailer-peek:hover { border-color: #ffd166; transform: scale(1.02); }
@media (max-width: 760px), (max-height: 500px) { .trailer-peek { display: none; } }
/* A padlock on map places not open yet (mapmodal.js); the dot it replaces is hidden. */
.pin-lock path { fill: none; stroke: #5b4630; stroke-width: 3; stroke-linecap: round; } .pin-lock rect { fill: #5b4630; } .pin-lock circle { fill: #d9d2c0; }
.pin.locked .dot { display: none; }
/* "On to the next area" on end screens, when it is open. */
.end-buttons .next-stop { background: linear-gradient(#a8f08f, #5fc24a); box-shadow: 0 6px 0 #3c8a2c; color: #102030; }
/* The difficulty choice for a new trip (difficulty-ui.js). */
.overlay.difficulty { z-index: 60; }
.difficulty-list { display: grid; gap: 10px; margin-top: 12px; }
.difficulty-choice { display: grid; gap: 2px; text-align: left; padding: 12px 16px; border-radius: 14px; border: 2px solid rgba(255, 209, 102, 0.4); background: rgba(255, 255, 255, 0.06); color: #eaf4f2; font: inherit; cursor: pointer; }
.difficulty-choice b { font-size: 20px; color: #ffd166; } .difficulty-choice small { font-size: 14px; opacity: 0.9; }
.difficulty-choice:hover, .difficulty-choice:focus { border-color: #ffd166; background: rgba(255, 209, 102, 0.15); outline: none; }
.difficulty-choice.suggested { border-color: rgba(255, 209, 102, 0.8); }
/* Ken's promo trailer, over the opener. */
.trailer-box { position: absolute; inset: 0; display: grid; place-items: center; align-content: center; gap: 12px; padding: 16px; background: rgba(4, 14, 20, 0.88); }
.trailer-box video { width: min(960px, 100%); max-height: calc(100% - 90px); border-radius: 14px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5); background: #000; }
.trailer-box .go { margin: 0; }
.map-area .needs { display: block; margin-top: 4px; font-size: 12px; color: #ffb38a; }
/* The Kuranda clothes stall */
.shop-card { width: min(640px, 100%); }
.shop-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; text-align: left; }
@media (max-width: 520px) { .shop-cols { grid-template-columns: 1fr; } }
.shop-card h3 { margin: 10px 0 4px; color: #8fd3c7; font-size: 16px; text-align: left; }
.shop-list { list-style: none; margin: 0; padding: 0; text-align: left; }
.shop-list li { display: flex; align-items: center; gap: 8px; padding: 6px 4px; border-bottom: 1px solid rgba(255,255,255,0.08); }
.shop-list .sw { width: 18px; height: 18px; border-radius: 5px; flex: none; border: 1px solid rgba(255,255,255,0.4); }
.shop-list .nm { flex: 1; font-size: 15px; }
.shop-list button { font: inherit; font-size: 13px; padding: 5px 12px; border-radius: 999px; border: 0; cursor: pointer; background: #ffd166; color: #102030; }
.shop-list button.wear { background: #8fd3c7; }
.shop-list button[disabled] { opacity: 0.45; cursor: default; }
.shop-list .on { font-size: 13px; color: #8fd3c7; }
.shop-list li.grp { display: block; border: 0; padding: 8px 4px 2px; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: #ffd166; }
.shop-list .soon { font-size: 12px; opacity: 0.6; font-style: italic; }
.shop-card { max-height: calc(100vh - 24px); overflow: auto; }
/* The leaderboard on the end screens */
.board { margin: 10px 0; text-align: left; }
.board-title { margin: 6px 0; text-align: center; color: #ffd166; font-size: 18px; }
.board-list { margin: 0; padding: 0 0 0 26px; }
.board-list li { display: flex; gap: 8px; padding: 3px 6px; border-radius: 8px; }
.board-list li.me { background: rgba(255, 209, 102, 0.22); }
.board-list li.empty { list-style: none; opacity: 0.7; }
.board-list .bn { flex: 1; } .board-list .bs { color: #ffd166; font-size: 13px; }
.board-note { text-align: center; font-size: 14px; margin: 6px 0; }
.board-form { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; align-items: center; }
.board-form label { width: 100%; text-align: center; font-size: 14px; }
.board-form input { font: inherit; padding: 8px 12px; border-radius: 999px; border: 2px solid rgba(255,209,102,0.5); background: rgba(255,255,255,0.08); color: inherit; width: 12em; }
.board-form .go { margin: 0; padding: 8px 20px; font-size: 16px; }
/* Back to the map on every end screen */
.end-buttons { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 6px; }
.end-buttons .go { margin: 0; text-decoration: none; display: inline-block; }
.end-buttons .map-btn { background: linear-gradient(#bfeee6, #7fd3c7); box-shadow: 0 6px 0 #3f9c90; }
/* The drawn trip map */
.map-card { width: min(1100px, 100%); }
.tripmap { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 14px; align-items: start; margin: 8px 0 12px; }
@media (max-width: 760px) { .tripmap { grid-template-columns: 1fr; } }
.tripmap-art svg { width: 100%; height: auto; display: block; border-radius: 16px; box-shadow: 0 8px 26px rgba(0,0,0,0.35); }
.tripmap-info { text-align: left; background: rgba(255,255,255,0.06); border-radius: 16px; padding: 14px 16px; }
.tripmap-info h2 { margin: 0; color: #ffd166; font-size: 26px; }
.tripmap-info .place { margin: 2px 0 6px; opacity: 0.85; }
.tripmap-info .stars { color: #ffd166; font-size: 22px; margin: 4px 0; letter-spacing: 0.1em; }
.tripmap-info .goal { font-size: 15px; line-height: 1.4; }
.tripmap-info .needs { color: #ffb38a; font-size: 14px; }
.tripmap-info .go { margin: 8px 0 0; }
.tripmap-svg .sea-label { fill: rgba(255,255,255,0.75); font: italic 700 26px var(--font); text-anchor: middle; }
.tripmap-svg .sea-label.small { font-size: 18px; }
.tripmap-svg .land-label { fill: rgba(30,60,35,0.55); font: 700 22px var(--font); text-anchor: middle; letter-spacing: 0.08em; }
.tripmap-svg .land-label.town { fill: #3a2a18; font-size: 24px; letter-spacing: 0; }
.pin { cursor: pointer; }
.pin .drop { fill: #ffd166; stroke: #8a4a12; stroke-width: 1.5; }
.pin .dot { fill: #8a4a12; }
.pin .halo { fill: rgba(255,209,102,0); }
.pin.open .halo { fill: rgba(255,209,102,0.25); animation: pinPulse 2s ease-in-out infinite; }
.pin.locked .drop { fill: #d9d2c0; } .pin.soon .drop { fill: #b8b8b8; } .pin.soon, .pin.locked { opacity: 0.75; }
.pin.picked .drop { fill: #ff8a3d; } .pin:hover .drop, .pin:focus .drop { fill: #ffe9a8; }
.pin .pin-label { fill: #fff; font: 800 22px var(--font); text-anchor: middle; paint-order: stroke; stroke: rgba(10,30,40,0.85); stroke-width: 5px; }
.pin .pin-stars { fill: #ffd166; font: 700 18px var(--font); text-anchor: middle; paint-order: stroke; stroke: rgba(10,30,40,0.85); stroke-width: 4px; }
@keyframes pinPulse { 50% { fill: rgba(255,209,102,0.5); } }
.tripmap-svg .legend { fill: #fff; font: 700 18px var(--font); paint-order: stroke; stroke: rgba(10,30,40,0.7); stroke-width: 4px; }
.tripmap-svg .land-label.small { font-size: 18px; }
.mark { cursor: pointer; }
.mark .mark-bg { fill: rgba(255,255,255,0.92); stroke: #8a5ac8; stroke-width: 3; }
.mark.locked { opacity: 0.7; } .mark.locked .mark-bg { stroke: #999; }
.mark .mark-icon { font-size: 20px; text-anchor: middle; }
.mark .mark-label { fill: #fff; font: 700 15px var(--font); text-anchor: middle; paint-order: stroke; stroke: rgba(10,30,40,0.85); stroke-width: 4px; }
.mark:hover .mark-bg, .mark:focus .mark-bg { fill: #ffe9a8; }
/* The map as a pop-up, from any screen */
.map-modal { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 12px; background: rgba(4, 16, 24, 0.72); }
.map-modal[hidden] { display: none; }
.map-modal .map-card { position: relative; max-height: calc(100vh - 24px); overflow: auto; }
.map-close { position: absolute; top: 10px; right: 12px; font: 800 20px var(--font); width: 40px; height: 40px; border-radius: 50%; border: 0; cursor: pointer; background: rgba(255,255,255,0.15); color: #fff; }
.map-close:hover { background: rgba(255,255,255,0.3); }
.map-button { position: fixed; z-index: 40; top: max(10px, env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); font: 800 16px var(--font); padding: 8px 16px; border-radius: 999px; border: 2px solid rgba(255,209,102,0.7); background: rgba(10, 30, 44, 0.75); color: #ffd166; cursor: pointer; }
.map-button:hover { background: rgba(255,209,102,0.25); }
.pin.here .drop { fill: #ff8a3d; }
.map-bank { margin-top: 4px; }
/* The outfit catalogue */
.shop-button { left: auto; right: 50%; transform: translateX(calc(100% + 70px)); }
.shop-cat { width: min(1100px, 100%); position: relative; max-height: calc(100vh - 24px); overflow: auto; }
.shop-top { display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; align-items: center; margin: 4px 0 10px; }
.shop-name input { font: inherit; padding: 6px 12px; border-radius: 999px; border: 2px solid rgba(255,209,102,0.5); background: rgba(255,255,255,0.08); color: inherit; width: 10em; margin: 0 6px; }
.shop-bank b { color: #ffd166; }
.shop-body { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 16px; text-align: left; }
@media (max-width: 760px) { .shop-body { grid-template-columns: 1fr; } }
.shop-lists h3 { margin: 6px 0; color: #8fd3c7; }
.shop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.shop-item { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 8px 10px; border-radius: 12px; border: 2px solid rgba(255,255,255,0.12); background: rgba(255,255,255,0.06); color: inherit; font: inherit; text-align: left; cursor: pointer; }
.shop-item.picked { border-color: #ffd166; background: rgba(255,209,102,0.16); }
.shop-item.soon { opacity: 0.6; }
.shop-item b { font-size: 14px; } .shop-item small { font-size: 12px; opacity: 0.8; }
.shop-item .sw { width: 34px; height: 22px; border-radius: 6px; border: 1px solid rgba(255,255,255,0.4); }
.shop-item .sw-model { display: grid; place-items: center; background: rgba(255,255,255,0.15); font-size: 15px; }
.shop-item .st { font-size: 13px; color: #ffd166; } .shop-item .st.on { color: #8fd3c7; }
.shop-item .buy { font: inherit; font-size: 13px; padding: 4px 12px; border-radius: 999px; border: 0; background: #ffd166; color: #102030; cursor: pointer; }
.shop-item .buy[disabled] { opacity: 0.45; cursor: default; }
.shop-preview { background: radial-gradient(circle at 50% 40%, rgba(143,211,199,0.25), rgba(0,0,0,0)); border-radius: 16px; }
.shop-canvas { width: 100%; display: block; }
.shop-detail h3 { margin: 4px 0; color: #ffd166; } .shop-detail .go { margin: 6px 0; }
.shop-msg { min-height: 1.4em; }
/* The shell and mango trader (Kuranda) */
.vendor-card { width: min(560px, 100%); position: relative; }
.vendor-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,0.12); }
.vendor-what { flex: 1 1 200px; font-weight: 700; } .vendor-rate { opacity: 0.8; font-size: 13px; }
.vendor-row .buy { font: inherit; font-size: 13px; padding: 5px 14px; border-radius: 999px; border: 0; background: #ffd166; color: #102030; cursor: pointer; }
.vendor-row .buy[disabled] { opacity: 0.45; cursor: default; }
.vendor-bank { font-weight: 700; color: #ffd166; margin-top: 10px; }
.vendor-card h1 { font-size: clamp(26px, 4vw, 36px); line-height: 1.1; margin: 4px 0 6px; }
/* Wally's Tourist Book */
.book-button { left: auto; right: 50%; transform: translateX(calc(100% + 190px)); }
.book-card { width: min(980px, 100%); position: relative; max-height: calc(100vh - 24px); overflow: auto; text-align: left; }
.book-card h1 { text-align: center; }
.book-tabs { display: flex; gap: 8px; justify-content: center; margin: 4px 0 12px; }
.book-tab { font: inherit; padding: 6px 16px; border-radius: 999px; border: 2px solid rgba(255,209,102,0.45); background: transparent; color: inherit; cursor: pointer; }
.book-tab.on { background: #ffd166; color: #102030; border-color: #ffd166; }
.book-land h2 { margin: 14px 0 2px; color: #8fd3c7; }
.book-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; }
.book-stamp { display: grid; grid-template-columns: 34px 1fr; column-gap: 8px; align-items: center; padding: 8px 10px; border-radius: 12px; border: 2px dashed rgba(255,255,255,0.25); }
.book-stamp .ink { grid-row: span 2; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; border: 2px solid currentColor; }
.book-stamp small { font-size: 12px; opacity: 0.8; }
.book-stamp.got { border: 2px solid #e2574c; background: rgba(226,87,76,0.12); color: #ffd9d3; transform: rotate(-1deg); }
.book-stamp.got .ink { color: #e2574c; }
.book-stamp.locked { opacity: 0.45; }
.book-tokens { font-size: 20px; font-weight: 700; color: #ffd166; margin: 4px 0; }
.book-ability { display: grid; grid-template-columns: 40px 1fr auto auto; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,0.12); }
.book-ability .icon { font-size: 26px; text-align: center; } .book-ability .what { display: flex; flex-direction: column; } .book-ability small { opacity: 0.8; font-size: 12px; }
.book-ability .pips { color: #ffd166; letter-spacing: 3px; }
.book-ability .buy { font: inherit; font-size: 13px; padding: 5px 12px; border-radius: 999px; border: 0; background: #ffd166; color: #102030; cursor: pointer; }
.book-ability .buy[disabled] { opacity: 0.45; cursor: default; }
.book-bank { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 6px 16px; }
.book-bank div { display: flex; justify-content: space-between; border-bottom: 1px dotted rgba(255,255,255,0.2); padding: 3px 0; }
.book-banner { position: fixed; top: 74px; left: 50%; transform: translateX(-50%); z-index: 60; display: flex; flex-direction: column; gap: 6px; pointer-events: none; }
.book-stamp-note { background: #fff6e0; color: #5a1f14; border: 3px solid #e2574c; border-radius: 14px; padding: 8px 16px; font-size: 18px; box-shadow: 0 6px 18px rgba(0,0,0,0.3); transform: rotate(-2deg); animation: stamp-in 0.35s ease-out; }
.book-stamp-note b { color: #e2574c; } .book-stamp-note small { opacity: 0.8; }
@keyframes stamp-in { from { transform: rotate(-12deg) scale(1.6); opacity: 0; } to { transform: rotate(-2deg) scale(1); opacity: 1; } }
.book-card h1 { font-size: clamp(28px, 4.5vw, 44px); line-height: 1.1; margin: 4px 0 8px; }
/* A trader's offer */
.trade-panel { position: fixed; left: 50%; bottom: 96px; transform: translateX(-50%); z-index: 40; width: min(560px, calc(100% - 32px));
  background: rgba(16, 32, 48, 0.94); border: 2px solid #ffd166; border-radius: 18px; padding: 12px 18px; color: #fff; box-shadow: 0 8px 26px rgba(0,0,0,0.35); }
.trade-panel[hidden] { display: none; }
.trade-title { color: #ffd166; font-size: 18px; } .trade-text { margin: 6px 0 10px; }
.trade-buttons { display: flex; gap: 12px; align-items: center; }
.trade-buttons .buy { font: inherit; padding: 7px 18px; border-radius: 999px; border: 0; background: #ffd166; color: #102030; cursor: pointer; font-weight: 700; }
.trade-buttons .buy[disabled] { opacity: 0.5; cursor: default; }
/* The boomerang throw */
.boom-panel { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); width: min(560px, calc(100% - 32px)); padding: 10px 16px; }
.boom-row { display: flex; align-items: center; gap: 12px; margin: 4px 0; } .boom-row > span { width: 52px; font-weight: 700; }
.boom-bar { position: relative; flex: 1; height: 16px; border-radius: 999px; background: rgba(255,255,255,0.15); overflow: hidden; }
.boom-green { position: absolute; left: 50%; width: 30%; top: 0; bottom: 0; background: rgba(80,220,120,0.45); }
#power-fill { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(90deg, #ffd166, #ff8a3d); border-radius: 999px; }
.boom-dial { position: relative; width: 70px; height: 36px; border-bottom: 2px solid rgba(255,255,255,0.5); }
#angle-needle { position: absolute; left: 4px; bottom: 0; width: 62px; height: 3px; background: #ffd166; transform-origin: left center; border-radius: 2px; }
.boom-sweet { position: absolute; left: 4px; bottom: 0; width: 62px; height: 2px; background: rgba(80,220,120,0.7); transform: rotate(-15deg); transform-origin: left center; }
.boom-keys { font-size: 12px; opacity: 0.8; margin: 6px 0 0; }
.catch-ring { position: fixed; left: 50%; top: 52%; transform: translate(-50%, -50%); padding: 14px 22px; border: 5px solid #ffd166; border-radius: 50%; color: #ffd166; font-size: 26px; font-weight: 800; animation: ring-pulse 0.5s ease-in-out infinite alternate; text-shadow: 0 2px 6px rgba(0,0,0,0.5); }
.catch-ring[hidden] { display: none; }
@keyframes ring-pulse { from { transform: translate(-50%, -50%) scale(0.92); } to { transform: translate(-50%, -50%) scale(1.08); } }
/* The lesson: drawn in CSS (Ken: CSS graphics, still high quality) */
.boom-tutorial .card { max-width: 620px; }
.tut-picture { position: relative; height: 170px; margin: 8px auto 12px; width: 320px; border-radius: 16px; background: radial-gradient(ellipse at 50% 90%, #4c8a3a, #2a5a2a); overflow: hidden; }
.tut-picture::before, .tut-picture::after { content: ''; position: absolute; }
.tut-aim::before { left: 66px; bottom: 16px; width: 150px; height: 138px; border: 4px dashed #fff; border-radius: 50%; border-bottom-right-radius: 40% 30%; }   /* the loop: out, round to the left, back */
.tut-aim::after { left: 196px; bottom: 6px; width: 22px; height: 22px; border-radius: 50%; background: #ff8a3d; box-shadow: 0 0 0 4px rgba(255,255,255,0.4); }
.tut-power::before { left: 40px; top: 72px; width: 240px; height: 24px; border-radius: 999px; background: linear-gradient(90deg, rgba(255,255,255,0.2) 50%, rgba(80,220,120,0.6) 50% 80%, rgba(255,255,255,0.2) 80%); }
.tut-power::after { left: 44px; top: 76px; height: 16px; border-radius: 999px; background: linear-gradient(90deg, #ffd166, #ff8a3d); animation: tut-sweep 1.6s ease-in-out infinite alternate; }
@keyframes tut-sweep { from { width: 10px; } to { width: 230px; } }
.tut-angle::before { left: 70px; bottom: 30px; width: 180px; height: 3px; background: rgba(255,255,255,0.5); }
.tut-angle::after { left: 70px; bottom: 30px; width: 170px; height: 5px; background: #ffd166; transform-origin: left center; animation: tut-tilt 2.4s ease-in-out infinite alternate; border-radius: 3px; box-shadow: 0 0 10px #ffd166; }
@keyframes tut-tilt { 0% { transform: rotate(-3deg); background: #e2574c; } 50% { transform: rotate(-15deg); background: #50dc78; } 100% { transform: rotate(-32deg); background: #e2574c; } }
.tut-catch::before { left: 120px; top: 45px; width: 80px; height: 80px; border-radius: 50%; border: 5px solid #ffd166; animation: ring-beat 0.6s ease-in-out infinite alternate; }
.tut-catch::after { left: 30px; top: 70px; width: 30px; height: 10px; background: #a8743f; border-radius: 10px; animation: tut-fly 2s linear infinite; }
@keyframes ring-beat { from { transform: scale(0.9); } to { transform: scale(1.08); } }
@keyframes tut-fly { from { transform: translateX(0) rotate(0); } to { transform: translateX(130px) rotate(1440deg); } }
/* The book shows a fresh stamp going in, and a thing found for the first time (Ken) */
.book-stamp.fresh.got { animation: stamp-thump 0.7s cubic-bezier(.2,1.6,.4,1) both; box-shadow: 0 0 0 3px #ffd166, 0 8px 24px rgba(226,87,76,0.45); }
.book-stamp.fresh.got .ink { animation: ink-in 0.7s ease-out both; }
@keyframes stamp-thump { 0% { transform: scale(2.2) rotate(-14deg); opacity: 0; } 60% { transform: scale(0.92) rotate(-1deg); opacity: 1; } 100% { transform: scale(1) rotate(-1deg); } }
@keyframes ink-in { from { background: #e2574c; color: #fff; } to { background: transparent; } }
.book-item.fresh { animation: item-glow 1.4s ease-in-out 2; box-shadow: 0 0 0 3px #ffd166; }
@keyframes item-glow { 50% { box-shadow: 0 0 0 3px #ffd166, 0 0 28px #ffd166; } }
.book-news { display: grid; grid-template-columns: 70px 1fr; gap: 12px; align-items: center; padding: 12px 16px; margin: 6px 0 14px; border-radius: 16px; background: rgba(255,209,102,0.12); border: 2px solid #ffd166; animation: news-in 0.5s ease-out; }
.book-news .big { font-size: 52px; text-align: center; } .book-news b { font-size: 22px; color: #ffd166; } .book-news p { margin: 4px 0; } .book-news .does { color: #8fd3c7; font-weight: 700; }
@keyframes news-in { from { transform: translateY(-12px); opacity: 0; } to { transform: none; opacity: 1; } }
.book-back { display: block; margin: 16px auto 4px; }
.trade-go { font-size: 14px; padding: 6px 14px; } .trade-tip { opacity: 0.8; }
.trade-buttons { flex-wrap: wrap; }
/* Gear: the item Wally carries (gear.js) and its row in the book */
.gear-badge { position: fixed; left: 16px; bottom: 18px; z-index: 6; display: grid; grid-template-columns: auto auto; column-gap: 8px; align-items: center; padding: 8px 14px; border-radius: 16px; border: 2px solid #ffd166; background: rgba(16,32,48,0.85); color: #fff; font: inherit; cursor: pointer; text-align: left; }
.gear-badge .icon { grid-row: span 2; font-size: 28px; } .gear-badge small { opacity: 0.8; } .gear-badge.empty { border-color: rgba(255,255,255,0.3); opacity: 0.75; }
body.touch .gear-badge { bottom: 150px; }
.book-ability { grid-template-columns: 40px 1fr auto; } .book-ability .gear-btns { grid-column: 2 / span 2; display: flex; flex-wrap: wrap; gap: 6px; }
.book-ability.equipped { background: rgba(255,209,102,0.1); border-radius: 12px; } .book-ability .stock { color: #8fd3c7; }
.book-ability .buy.alt { background: rgba(255,255,255,0.14); color: #fff; }
/* The Gear button and panel, and the uses count (Ken) */
.gear-button { left: auto; right: 50%; transform: translateX(-62px); }   /* left of the Map button, clear of the feed-o-meter */
.gear-badge { grid-template-columns: auto auto auto; } .gear-badge .count { grid-row: span 2; font-size: 30px; font-weight: 800; color: #ffd166; min-width: 1.2em; text-align: center; }
.gear-badge.bump .count { animation: count-bump 0.4s ease-out; }
@keyframes count-bump { 0% { transform: scale(1.7); color: #fff; } 100% { transform: scale(1); } }
.book-ability .gear-count { font-size: 26px; font-weight: 800; color: #ffd166; min-width: 1.4em; text-align: center; }
/* The use button by the gear badge (Ken: some way to activate it) */
.gear-use { position: fixed; left: 16px; bottom: 92px; z-index: 6; font: 800 16px var(--font); padding: 9px 16px; border-radius: 999px; border: 2px solid #9fe8ff; background: rgba(16,32,48,0.85); color: #fff; cursor: pointer; }
.gear-use[hidden] { display: none; }
.gear-use kbd { margin-left: 4px; }
.gear-use.ready { border-color: #ffd166; background: rgba(255,209,102,0.25); animation: use-ready 0.6s ease-in-out infinite alternate; }
@keyframes use-ready { from { transform: scale(1); } to { transform: scale(1.06); } }
body.touch .gear-use { bottom: 224px; }
/* Ride the Gorge (zip line) */
.zip-panel { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); width: min(620px, calc(100% - 32px)); padding: 10px 16px; }
.zip-row { display: flex; justify-content: space-between; font-weight: 700; } .zip-row b { color: #ffd166; font-size: 20px; }
.zip-track { position: relative; height: 12px; margin: 8px 0; border-radius: 999px; background: rgba(255,255,255,0.15); }
.zip-brake { position: absolute; right: 0; top: 0; bottom: 0; width: 19%; border-radius: 0 999px 999px 0; background: rgba(226,87,76,0.6); }
#z-wally { position: absolute; top: -5px; width: 22px; height: 22px; margin-left: -11px; border-radius: 50%; background: #ffd166; border: 3px solid #102030; }
.zip-keys { font-size: 12px; opacity: 0.8; margin: 4px 0 0; }
.zip-hint { position: fixed; left: 50%; top: 22%; transform: translateX(-50%); padding: 10px 22px; border-radius: 999px; background: rgba(226,87,76,0.9); color: #fff; font-size: 24px; font-weight: 800; animation: ring-pulse 0.4s ease-in-out infinite alternate; }
.zip-hint[hidden] { display: none; }
.zip-lines { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin: 10px 0; }
.zip-line-btn { font: inherit; padding: 8px 16px; border-radius: 999px; border: 2px solid rgba(255,209,102,0.5); background: transparent; color: inherit; cursor: pointer; }
.zip-line-btn.on { background: #ffd166; color: #102030; }
.zip-tickets { color: #8fd3c7; font-weight: 700; }

/* The opening (opening.js): the flash when the sceptre changes the croc into Wally. */
.flash { position: fixed; inset: 0; background: radial-gradient(circle at 50% 55%, #fffbe6 0%, #ffe9a0 45%, rgba(255, 233, 160, 0) 100%); opacity: 0; pointer-events: none; z-index: 6; }
.flash.go { animation: flash-go 1.4s ease-out; }
@keyframes flash-go { 0% { opacity: 0; } 18% { opacity: 1; } 40% { opacity: 1; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .flash.go { animation-duration: 0.6s; } }

/* The book (book.js): the X stays in view while the page scrolls; small news is a note, not the whole book. */
.book-modal .map-close { position: fixed; top: max(14px, env(safe-area-inset-top)); right: 14px; z-index: 3; width: 48px; height: 48px; font-size: 24px; background: rgba(8, 30, 44, 0.85); border: 2px solid rgba(255, 255, 255, 0.6); }
.book-note { position: fixed; top: 64px; left: 50%; transform: translateX(-50%); padding: 8px 16px; border-radius: 12px; background: rgba(8, 30, 44, 0.85); color: #fff; font: 700 15px var(--font); z-index: 4; pointer-events: none; transition: opacity 0.5s; }
.book-note.fade { opacity: 0; }
.book-button.news { box-shadow: 0 0 0 3px #ffd36a, 0 0 18px #ffd36a; animation: book-news 1.2s ease-in-out infinite alternate; }
@keyframes book-news { to { box-shadow: 0 0 0 3px #ffd36a, 0 0 4px #ffd36a; } }
@media (prefers-reduced-motion: reduce) { .book-button.news { animation: none; } }

/* The opening (opening.js): skip a scene on purpose. */
.skip-scene { position: fixed; right: 18px; bottom: 18px; z-index: 6; padding: 8px 16px; border-radius: 12px; border: 2px solid rgba(255,255,255,0.6); background: rgba(8,30,44,0.7); color: #fff; font: 700 16px var(--font); cursor: pointer; }
.skip-scene small { opacity: 0.7; font-weight: 600; margin-left: 4px; }

/* "Reset the game?" (mapmodal.js): above everything, and Yes looks like the serious choice it is. */
.confirm-reset { z-index: 60; }
.confirm-reset .card { max-width: 460px; text-align: center; }
.go.danger { background: linear-gradient(#e2574c, #b8352b); color: #fff; }

/* What the mouse is doing (input.js). */
.mouse-chip { position: fixed; left: 50%; bottom: 14px; transform: translateX(-50%); padding: 6px 14px; border-radius: 10px; background: rgba(8,30,44,0.7); color: #fff; font: 600 13px var(--font); z-index: 4; pointer-events: none; }
.mouse-chip[hidden] { display: none; }

/* Smooth play (quality.js): a note when the detail changes, and the optional readout. */
.perf-note { position: fixed; top: 104px; left: 50%; transform: translateX(-50%); padding: 6px 14px; border-radius: 10px; background: rgba(8,30,44,0.8); color: #fff; font: 600 14px var(--font); z-index: 5; pointer-events: none; transition: opacity 0.6s; }
.perf-note.fade { opacity: 0; }
.perf-readout { position: fixed; right: 10px; bottom: 10px; padding: 3px 8px; border-radius: 6px; background: rgba(0,0,0,0.55); color: #cfe; font: 600 12px ui-monospace, monospace; z-index: 5; pointer-events: none; }
.perf-readout[hidden] { display: none; }

/* The boomerang throw in Kuranda (boomerang-throw.js): the angle and force meters, the guide's words */
.boom-ui { position: fixed; inset: 0; z-index: 5; pointer-events: none; font-family: var(--font); color: #fff; }
.boom-meters { position: absolute; right: 24px; bottom: 96px; display: flex; gap: 18px; align-items: flex-end; }
.boom-angle, .boom-force { background: rgba(8, 30, 44, 0.72); border: 2px solid rgba(255, 255, 255, 0.35); border-radius: 14px; padding: 10px 12px 6px; text-align: center; }
.boom-angle svg { width: 150px; height: 88px; display: block; }
.boom-arc { fill: none; stroke: rgba(255, 255, 255, 0.45); stroke-width: 6; stroke-linecap: round; }
.boom-hint { fill: none; stroke: #7be36b; stroke-width: 8; stroke-linecap: round; }
.boom-needle { stroke: #ffd166; stroke-width: 5; stroke-linecap: round; }
.boom-angle p, .boom-force p { margin: 4px 0 0; font-size: 14px; font-weight: 700; letter-spacing: 0.06em; }
.boom-force-bar { position: relative; width: 34px; height: 150px; margin: 0 auto; border-radius: 10px; background: rgba(255, 255, 255, 0.15); overflow: hidden; }
.boom-force-fill { position: absolute; left: 0; right: 0; bottom: 0; background: linear-gradient(#ff5a3c, #ffd166 45%, #7be36b); }
.boom-force-zone { position: absolute; left: -2px; right: -2px; border: 3px solid #7be36b; border-radius: 4px; z-index: 1; }
.boom-prompt { position: absolute; left: 0; right: 0; bottom: 64px; margin: 0; text-align: center; font-size: 17px; font-weight: 700; text-shadow: 0 2px 6px #000; }
.boom-caption { position: absolute; left: 50%; bottom: 120px; transform: translateX(-50%); max-width: min(720px, 86vw); margin: 0; padding: 12px 18px; border-radius: 14px;
                background: rgba(8, 30, 44, 0.8); font-size: 19px; line-height: 1.35; text-align: center; }
.boom-caption b { color: #ffd166; }
.boom-catch { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 150px; height: 150px; border-radius: 50%; border: 6px solid #ffd166;
              display: grid; place-items: center; font-size: 26px; font-weight: 800; color: #ffd166; text-shadow: 0 2px 8px #000; animation: boompulse 0.5s ease-in-out infinite alternate; }
@keyframes boompulse { from { transform: translate(-50%, -50%) scale(0.92); } to { transform: translate(-50%, -50%) scale(1.06); } }
@media (max-width: 640px) { .boom-meters { right: 12px; bottom: 150px; gap: 10px; } .boom-angle svg { width: 110px; height: 66px; } .boom-force-bar { height: 110px; } .boom-caption { bottom: 210px; font-size: 16px; } }

/* Story captions in a level's cutscenes (the Daintree sandbar) */
.scene-caption { position: fixed; left: 50%; bottom: 96px; transform: translateX(-50%); z-index: 6; max-width: min(760px, 88vw); margin: 0; padding: 12px 18px;
                 border-radius: 14px; background: rgba(8, 30, 44, 0.82); color: #fff; font: 600 19px/1.35 var(--font); text-align: center; pointer-events: none; }
.scene-caption b { color: #ffd166; }
.fade-screen { position: fixed; inset: 0; z-index: 7; background: #000; opacity: 0; pointer-events: none; transition: opacity 0.8s ease; }
.fade-screen.on { opacity: 1; }

/* The Great Push (push.js): the beat meter */
.push-meter { position: fixed; left: 50%; bottom: 70px; transform: translateX(-50%); z-index: 5; width: min(520px, 88vw); text-align: center; pointer-events: none; font-family: var(--font); }
.push-track { position: relative; height: 26px; border-radius: 13px; background: rgba(8, 30, 44, 0.8); border: 2px solid rgba(255, 255, 255, 0.35); }
.push-zone { position: absolute; left: 44%; width: 12%; top: 0; bottom: 0; background: rgba(123, 227, 107, 0.55); border-radius: 6px; }
.push-needle { position: absolute; top: -6px; bottom: -6px; width: 6px; margin-left: -3px; background: #ffd166; border-radius: 3px; box-shadow: 0 0 8px #ffd166; }
.push-word { margin: 6px 0 4px; font-size: 26px; font-weight: 800; color: #fff; text-shadow: 0 2px 6px #000; min-height: 1.2em; }
.push-word.perfect { color: #7be36b; } .push-word.good { color: #ffd166; } .push-word.miss { color: #ff8a7a; }
.push-progress { height: 10px; border-radius: 5px; background: rgba(255, 255, 255, 0.2); overflow: hidden; }
.push-progress i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #ffd166, #7be36b); transition: width 0.3s; }

/* The credits after the ending (ending.html) */
.credits-roll .card { max-width: 760px; max-height: 86vh; overflow-y: auto; text-align: center; }
.credits-roll h2 { color: #ffd166; margin: 22px 0 6px; font-size: 24px; }
.credits-roll p { line-height: 1.5; }
.credits-roll .big-warning { font-size: 26px; font-weight: 800; color: #ffb38a; margin: 22px 0 10px; }
.the-end { position: fixed; inset: 0; z-index: 8; margin: 0; display: grid; place-items: center; font: 800 clamp(48px, 10vw, 110px) var(--font); color: #ffd166; text-shadow: 0 4px 0 #c0392b, 0 10px 30px rgba(0,0,0,0.6); pointer-events: none; animation: areafade 1.6s ease-out; }

/* How to swing on the vines (daintree.js): the controls for the device in use, and the timing */
.vine-help { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 5; text-align: center; pointer-events: none; font-family: var(--font); width: min(720px, 94vw); }
.vine-step { margin: 0 0 8px; font-size: 26px; font-weight: 800; color: #fff; text-shadow: 0 2px 8px #000; transition: color 0.1s, transform 0.1s; }
.vine-step.now { color: #7be36b; transform: scale(1.12); }
.vine-keys { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 18px; padding: 10px 16px; border-radius: 14px; background: rgba(8, 30, 44, 0.78); color: #fff; font-size: 16px; font-weight: 700; }
.vine-keys kbd { display: inline-block; min-width: 1.6em; padding: 1px 8px; border: 2px solid rgba(255, 255, 255, 0.7); border-bottom-width: 4px; border-radius: 7px; background: rgba(255, 255, 255, 0.08); font: 800 14px/1.4 system-ui, sans-serif; }

/* device.js: control lists shown only for the controls in use; a notice when a controller comes and goes */
[data-device][hidden] { display: none !important; }
.device-notice { position: fixed; top: 70px; left: 50%; transform: translateX(-50%); z-index: 9; padding: 8px 18px; border-radius: 12px; background: rgba(8, 30, 44, 0.88); color: #fff; font: 700 16px var(--font); pointer-events: none; animation: areafade 0.4s ease-out; }

/* The end-of-area card: the completed note (mapmodal.js markRetry) */
.done-note { margin: 10px 0 4px; padding: 10px 14px; border-radius: 12px; background: rgba(123, 227, 107, 0.14); border: 2px solid rgba(123, 227, 107, 0.5); color: #e9ffe4; font-weight: 700; font-size: 15px; }

/* The sceptre card (sceptre-card.js): the head with each talisman in its setting, shining; all six: it glows */
.sceptre-button { position: fixed; z-index: 40; top: calc(max(10px, env(safe-area-inset-top)) + 46px); left: 50%; transform: translateX(-50%);   /* a second row, under the Map button (the top row is full) */ font: 800 16px var(--font); padding: 8px 14px; border-radius: 999px; border: 2px solid rgba(255,209,102,0.7); background: rgba(10, 30, 44, 0.75); color: #ffd166; cursor: pointer; }
.sceptre-button:hover { background: rgba(255,209,102,0.25); }
.sceptre-card .card { max-width: 560px; text-align: center; max-height: 92vh; overflow-y: auto; }
.sceptre-sub { margin: 4px 0 10px; color: #b9d3cf; }
.sceptre-art { position: relative; width: min(420px, 78vw); aspect-ratio: 1; margin: 0 auto; border-radius: 20px; background: radial-gradient(circle at 50% 45%, rgba(255, 209, 102, 0.12), transparent 65%); }
.sceptre-art > img { width: 100%; height: 100%; display: block; }
.sceptre-art.all { animation: sceptreglow 2.4s ease-in-out infinite; }
@keyframes sceptreglow { 0%, 100% { filter: drop-shadow(0 0 10px rgba(255, 214, 120, 0.55)); } 50% { filter: drop-shadow(0 0 26px rgba(255, 230, 150, 0.95)); } }
.sceptre-spot { position: absolute; transform: translate(-50%, -50%); border-radius: 50%; }
.sceptre-spot:not(.in) { box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.18); }
.sceptre-spot img { width: 100%; height: 100%; object-fit: contain; animation: talismanshine 2s ease-in-out infinite; }
.sceptre-spot:nth-child(3) img { animation-delay: 0.3s; } .sceptre-spot:nth-child(4) img { animation-delay: 0.6s; } .sceptre-spot:nth-child(5) img { animation-delay: 0.9s; } .sceptre-spot:nth-child(6) img { animation-delay: 1.2s; } .sceptre-spot:nth-child(7) img { animation-delay: 1.5s; }
@keyframes talismanshine { 0%, 100% { filter: drop-shadow(0 0 3px rgba(255, 240, 190, 0.6)) brightness(1); } 50% { filter: drop-shadow(0 0 10px rgba(255, 240, 190, 1)) brightness(1.25); } }
.sceptre-list { list-style: none; padding: 0; margin: 12px auto; display: grid; grid-template-columns: 1fr 1fr; gap: 4px 16px; text-align: left; max-width: 440px; font-size: 15px; color: #b9d3cf; }
.sceptre-list li.in b { color: #7be36b; } .sceptre-list b { color: #ffd166; }
@media (max-width: 560px) { .sceptre-list { grid-template-columns: 1fr; } }
.sceptre-spot.new img { animation: talismanset 1.4s ease-out both, talismanshine 2s ease-in-out 1.4s infinite; }
@keyframes talismanset { 0% { transform: scale(3) translateY(-30%); opacity: 0; } 60% { transform: scale(1.15); opacity: 1; } 100% { transform: scale(1); } }
.sceptre-spot.new::after { content: 'New!'; position: absolute; left: 50%; top: -22px; transform: translateX(-50%); font: 800 14px var(--font); color: #7be36b; text-shadow: 0 1px 4px #000; white-space: nowrap; }

/* The trip's points (points.js): the score pill beside the Sceptre, and the Scoreboard card. */
.score-button { position: fixed; z-index: 40; top: calc(max(10px, env(safe-area-inset-top)) + 46px); left: 50%; transform: translateX(72px); display: flex; align-items: baseline; gap: 6px; font: 800 16px var(--font); padding: 7px 14px; border-radius: 999px; border: 2px solid rgba(255,209,102,0.7); background: rgba(10, 30, 44, 0.75); color: #ffd166; cursor: pointer; }
.score-button:hover { background: rgba(255,209,102,0.25); }
.score-button small { color: #fff; opacity: 0.75; font-weight: 600; font-size: 12px; }
.score-button.bump .score-run { display: inline-block; animation: count-bump 0.4s ease-out; }
.score-pop { position: absolute; right: 8px; top: -6px; color: #9fffa8; font-weight: 800; pointer-events: none; animation: score-pop 0.9s ease-out forwards; }
@keyframes score-pop { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(-26px); } }
.score-cheer { position: fixed; z-index: 60; left: 50%; top: 22%; transform: translateX(-50%); padding: 14px 26px; border-radius: 18px; background: rgba(10,30,44,0.9); border: 3px solid #ffd166; color: #ffd166; font: 800 24px var(--font); text-align: center; pointer-events: none; animation: score-cheer 3.2s ease-out forwards; }
@keyframes score-cheer { 0% { opacity: 0; transform: translateX(-50%) scale(0.7); } 10% { opacity: 1; transform: translateX(-50%) scale(1.06); } 18% { transform: translateX(-50%) scale(1); } 85% { opacity: 1; } 100% { opacity: 0; } }
.score-card .card { width: min(560px, 100%); max-height: calc(100vh - 24px); overflow: auto; }
.score-top { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin: 6px 0 12px; }
.score-stat { display: grid; padding: 8px 16px; border-radius: 14px; background: rgba(255,209,102,0.12); border: 1px solid rgba(255,209,102,0.4); min-width: 110px; }
.score-stat small { opacity: 0.8; } .score-stat b { font-size: 26px; color: #ffd166; }
.score-areas { width: 100%; border-collapse: collapse; margin: 4px 0 8px; text-align: left; }
.score-areas td { padding: 5px 8px; border-bottom: 1px solid rgba(255,255,255,0.12); }
.score-areas td:last-child { text-align: right; font-weight: 800; color: #ffd166; }
.score-areas tr.todo td { opacity: 0.55; }
.score-how { text-align: left; margin: 6px 0 10px; } .score-how summary { cursor: pointer; font-weight: 700; }
.trip-score { margin: 8px 0 14px; padding: 10px 14px; border-radius: 14px; background: rgba(255,209,102,0.12); border: 2px solid rgba(255,209,102,0.5); }
.trip-score h2 { margin: 0 0 4px; color: #ffd166; }
@media (max-width: 560px) { .score-button { transform: translateX(64px); padding: 6px 10px; } .score-button small { display: none; } }

/* Under 1280px wide the top row of buttons reaches the feed-o-meter: it drops below the buttons. */
@media (max-width: 1279px) { .energy { top: calc(max(10px, env(safe-area-inset-top)) + 94px); } }

/* The croc-safety line before the Daintree river (Ken, 2026-10-21). */
.crocwise-note { margin: 10px 0 12px; padding: 10px 12px; border-radius: 12px; background: rgba(255, 209, 102, 0.12); border: 1px solid rgba(255, 209, 102, 0.5); font-size: 15px; line-height: 1.4; text-align: left; }
.push-arrow { position: absolute; left: 50%; top: -38px; transform: translateX(-50%); font-size: 30px; line-height: 1; color: #7be36b; text-shadow: 0 2px 6px #000; transition: transform 0.08s, color 0.08s; }   /* the beat: press when the marker is under it (Ken) */
.push-arrow.now { color: #fff; transform: translateX(-50%) translateY(6px) scale(1.25); }
.score-tabs { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin: 10px 0 4px; }
.score-tab { font: 700 13px var(--font); padding: 5px 10px; border-radius: 999px; border: 1px solid rgba(255,209,102,0.5); background: transparent; color: #eaf4f2; cursor: pointer; }
.score-tab.on { background: #ffd166; color: #102030; }

/* Paws (menu.js): Wally's pause, in the second row left of the Sceptre. */
.paws-button { position: fixed; z-index: 40; top: calc(max(10px, env(safe-area-inset-top)) + 46px); left: 50%; transform: translateX(calc(-100% - 70px)); font: 800 16px var(--font); padding: 8px 14px; border-radius: 999px; border: 2px solid rgba(255,209,102,0.7); background: rgba(10, 30, 44, 0.75); color: #ffd166; cursor: pointer; }
.paws-button:hover { background: rgba(255,209,102,0.25); }
#paused .sub { margin-top: -4px; }
/* Phones (menu.js): every top button folds into the menu behind the burger, clear of the game. */
.menu-burger { position: fixed; z-index: 45; top: max(10px, env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); width: 48px; height: 44px; border-radius: 14px; border: 2px solid rgba(255,209,102,0.7); background: rgba(10, 30, 44, 0.8); color: #ffd166; font: 800 24px var(--font); cursor: pointer; }
.menu-panel { position: fixed; z-index: 44; top: calc(max(10px, env(safe-area-inset-top)) + 52px); left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; gap: 8px; padding: 10px; border-radius: 18px; background: rgba(10, 30, 44, 0.94); border: 2px solid rgba(255,209,102,0.5); min-width: 210px; max-height: calc(100vh - 80px); overflow: auto; }
.menu-panel[hidden] { display: none; }
.menu-panel > * { position: static !important; transform: none !important; left: auto !important; right: auto !important; top: auto !important; width: 100%; justify-content: center; text-align: center; }
/* With the top buttons folded away on phones: the meter back at the top, the arrow and tips below the objective panel. */
body.phone-menu .energy { top: max(10px, env(safe-area-inset-top)); width: min(320px, 36vw); }
body.phone-menu .guide-arrow { top: calc(max(10px, env(safe-area-inset-top)) + 150px); }
body.phone-menu .tip-card { top: calc(max(10px, env(safe-area-inset-top)) + 210px); }
/* Free to play, at the top of the title screen (Ken, 2026-10-21). */
.free-banner { position: absolute; z-index: 2; top: calc(max(10px, env(safe-area-inset-top)) + 96px); left: 50%; transform: translateX(-50%); margin: 0; padding: 4px 34px 4px 12px; border-radius: 999px; background: rgba(10, 30, 44, 0.72); border: 1px solid rgba(255, 209, 102, 0.5); color: #fff; font: 700 12px var(--font); white-space: nowrap; max-width: calc(100% - 24px); overflow: hidden; text-overflow: ellipsis; }   /* small, under the buttons, and closable (menu.js) */
.free-banner a { color: #ffd166; }
@media (max-width: 560px) { .free-banner { white-space: normal; text-align: center; font-size: 11px; border-radius: 14px; } }
body.phone-menu .free-banner { top: calc(max(10px, env(safe-area-inset-top)) + 54px); }
/* The gear badge waits until play starts: on the title screen it sat on the credit line. */
#title:not([hidden]) ~ .gear-badge, #title:not([hidden]) ~ .gear-use { display: none; }
/* Wally's hand on the Paws button, the touch pause and the Paws card (menu.js). */
.croc-hand { width: 1.6em; height: 1.6em; vertical-align: -0.45em; }
#paused h1 .croc-hand { width: 1em; height: 1em; vertical-align: -0.1em; }
#t-pause .croc-hand { width: 26px; height: 26px; vertical-align: middle; }
.menu-burger[hidden] { display: none; }
.note-x { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 24px; height: 24px; border-radius: 50%; border: 0; background: rgba(255,255,255,0.15); color: #fff; font: 700 12px/24px var(--font); cursor: pointer; padding: 0; }
.landscape-hint { position: fixed; z-index: 70; left: 50%; top: calc(max(10px, env(safe-area-inset-top)) + 160px); transform: translateX(-50%); width: min(340px, calc(100% - 32px)); padding: 10px 40px 10px 14px; border-radius: 14px; background: rgba(10, 30, 44, 0.92); border: 2px solid rgba(255, 209, 102, 0.6); color: #fff; font: 700 14px var(--font); text-align: center; }
.landscape-hint .turn { display: inline-block; font-size: 20px; color: #ffd166; vertical-align: -2px; margin-right: 4px; }
/* The bottom of a touch screen (Ken, 2026-10-21): the orb in the middle, Jump and Duck on the right, the item on the left. */
body.touch #t-fours { right: calc(max(18px, env(safe-area-inset-right)) + 140px); bottom: max(26px, env(safe-area-inset-bottom)); width: 66px; height: 66px; font-size: 15px; }   /* Duck, beside the orb */
body.touch #t-jump { display: none; }   /* a tap on the orb jumps */
body.touch .gear-badge { bottom: max(24px, env(safe-area-inset-bottom)); left: 12px; padding: 6px 10px; column-gap: 6px; }
body.touch .gear-badge b, body.touch .gear-badge small { display: none; }
body.touch .gear-use { bottom: calc(max(24px, env(safe-area-inset-bottom)) + 66px); left: 12px; }
/* Short landscape screens: tips up at the top, narrower, clear of the controls. */
@media (max-height: 500px) { .tip-card, body.phone-menu .tip-card { top: calc(max(8px, env(safe-area-inset-top)) + 56px); width: min(400px, calc(100% - 380px)); min-width: 260px; font-size: 14px; padding: 8px 12px; } }
#t-fours small { display: block; font-size: 10px; font-weight: 700; margin-top: -2px; opacity: 0.8; }
/* The gear badge: an icon to tap (gear.js). */
.gear-badge { grid-template-columns: auto auto; padding: 6px 10px; min-width: 52px; justify-content: center; }
.gear-badge.empty { opacity: 0.85; }
.gear-badge .icon { grid-row: auto; font-size: 26px; }
/* The objective panel: an X to put it away, a target icon to bring it back (menu.js). */
.panel.quest { position: absolute; }
.panel.quest.tucked { display: none; }
.quest-x { position: absolute; top: 6px; right: 6px; width: 24px; height: 24px; border-radius: 50%; border: 0; background: rgba(255,255,255,0.14); color: #fff; font: 700 12px/24px var(--font); cursor: pointer; padding: 0; }
.panel.quest h2 { padding-right: 26px; }
.quest-show { position: fixed; z-index: 6; left: 14px; top: calc(max(10px, env(safe-area-inset-top)) + 62px); width: 42px; height: 42px; border-radius: 50%; border: 2px solid rgba(255,209,102,0.7); background: rgba(10, 30, 44, 0.8); font-size: 20px; cursor: pointer; }
.quest-show[hidden] { display: none; }
/* Install and full screen (menu.js): on the title screen with Play; elsewhere in the phone menu, or top left on a computer. */
.menu-panel .install-button, .menu-panel .fullscreen-button { font: 800 16px var(--font); padding: 8px 14px; border-radius: 999px; border: 2px solid rgba(255,209,102,0.7); background: rgba(10, 30, 44, 0.75); color: #ffd166; }
.install-card ol { text-align: left; }
/* The difficulty, beside Play on the title screen for a new game (main.js). */
.pick-level { display: inline-flex; gap: 4px; padding: 4px; border-radius: 999px; background: rgba(10, 30, 44, 0.75); border: 1px solid rgba(255, 209, 102, 0.5); align-self: center; }
.pick-level[hidden] { display: none; }
.pick-level button { font: 700 14px var(--font); padding: 6px 12px; border-radius: 999px; border: 0; background: transparent; color: #eaf4f2; cursor: pointer; }
.pick-level button.on { background: #ffd166; color: #102030; }