/* Danfo Jam, modelled on Bus Fever Party! (glossy toy vehicles, living scene, illustrated boosters) with Arrows' restraint.
   All art is ours: CSS, inline SVG (art.js) and the SVG data URIs below. */
:root {
  --brown: #4a2a0c; --brown-2: #8a6a4a; --cream: #fff3cf; --cream-2: #ffd977; --blue: #4d9bff; --blue-lo: #2f6fe0; --blue-edge: #1d3f8f;
  --green: #3fd25a; --green-lo: #20a83c; --green-edge: #17702c; --red: #ff4d6a; --gold: #ffc20e; --asphalt: #4a4e58;
  --i-heart: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21.2s-7.6-4.6-10.1-9.4C.4 8.5 2.2 4 6.4 4c2.3 0 3.9 1.3 5.6 3.3C13.7 5.3 15.3 4 17.6 4c4.2 0 6 4.5 4.5 7.8-2.5 4.8-10.1 9.4-10.1 9.4z' fill='%23ff4d6a' stroke='%23a3142e' stroke-width='1.4'/%3E%3Cpath d='M5.5 8.2a2.6 2.6 0 0 1 2.6-2' stroke='%23fff' stroke-width='1.6' stroke-linecap='round' fill='none' opacity='.8'/%3E%3C/svg%3E");
  --i-coin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12.6' r='10.4' fill='%23b06f00'/%3E%3Ccircle cx='12' cy='11.4' r='10' fill='%23ffc928'/%3E%3Ccircle cx='12' cy='11.4' r='7.4' fill='%23ffd75a' stroke='%23d99400' stroke-width='1.4'/%3E%3Cpath d='M9 15.4V7.4l6 8V7.4' fill='none' stroke='%23a86a00' stroke-width='1.9' stroke-linejoin='round'/%3E%3Cpath d='M7.4 10.2h9.2M7.4 12.6h9.2' stroke='%23a86a00' stroke-width='1.3'/%3E%3Cpath d='M5.6 8a7 7 0 0 1 4-3.6' stroke='%23fff' stroke-width='1.5' stroke-linecap='round' fill='none' opacity='.8'/%3E%3C/svg%3E");
  --i-lock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cg transform='translate(0 1.2)' fill='none' stroke='%23e9ebf0' stroke-width='3.4'%3E%3Cpath d='M10.5 14v-3.5a5.5 5.5 0 0 1 11 0V14'/%3E%3C/g%3E%3Cg transform='translate(0 1.2)'%3E%3Crect x='7' y='13.5' width='18' height='14' rx='3.5' fill='%23e9ebf0'/%3E%3C/g%3E%3Cpath d='M10.5 14v-3.5a5.5 5.5 0 0 1 11 0V14' fill='none' stroke='%235d626c' stroke-width='3.4'/%3E%3Crect x='7' y='13.5' width='18' height='14' rx='3.5' fill='%237d828c'/%3E%3Ccircle cx='16' cy='19.5' r='2.2' fill='%234a4e57'/%3E%3Crect x='15' y='20' width='2' height='4.4' rx='1' fill='%234a4e57'/%3E%3C/svg%3E");
  --i-back: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14.5 5.5L8 12l6.5 6.5' fill='none' stroke='%231d3f8f' stroke-width='4.4' stroke-linecap='round' stroke-linejoin='round' transform='translate(0 1)'/%3E%3Cpath d='M14.5 5.5L8 12l6.5 6.5' fill='none' stroke='%23fff' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --i-pause: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='%231d3f8f' transform='translate(0 1)'%3E%3Crect x='6.5' y='5' width='4' height='14' rx='1.6'/%3E%3Crect x='13.5' y='5' width='4' height='14' rx='1.6'/%3E%3C/g%3E%3Cg fill='%23fff'%3E%3Crect x='6.5' y='5' width='4' height='14' rx='1.6'/%3E%3Crect x='13.5' y='5' width='4' height='14' rx='1.6'/%3E%3C/g%3E%3C/svg%3E");
  --i-shop: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M3 6h4l3 14h15l3-10H9' fill='none' stroke='%231d3f8f' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M9.6 10H28l-3 10H10.5z' fill='%23ffc20e'/%3E%3Cpath d='M3 6h4l3 14h15l3-10H9' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='12' cy='26' r='2.6' fill='%23fff' stroke='%231d3f8f' stroke-width='1.4'/%3E%3Ccircle cx='23' cy='26' r='2.6' fill='%23fff' stroke='%231d3f8f' stroke-width='1.4'/%3E%3C/svg%3E");
  --i-trophy: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M9 6H4v3a5 5 0 0 0 6 5M23 6h5v3a5 5 0 0 1-6 5' fill='none' stroke='%23ffc20e' stroke-width='2.6'/%3E%3Cpath d='M8.5 4h15v6a7.5 7.5 0 0 1-15 0z' fill='%23ffc20e' stroke='%23a86a00' stroke-width='1.6'/%3E%3Cpath d='M12 6.5v4a4 4 0 0 0 2 3' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' fill='none' opacity='.75'/%3E%3Crect x='14' y='17' width='4' height='5' fill='%23e59a00'/%3E%3Crect x='9.5' y='22' width='13' height='5' rx='1.6' fill='%23ffc20e' stroke='%23a86a00' stroke-width='1.6'/%3E%3C/svg%3E");
  --i-help: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cg transform='translate(0 1.2)' stroke='%231d3f8f' fill='%231d3f8f'%3E%3Cpath d='M11 11.5a5 5 0 1 1 7 4.6c-1.3.6-2 1.6-2 3V20' fill='none' stroke-width='4.6' stroke-linecap='round'/%3E%3Ccircle cx='16' cy='25.5' r='2.6' stroke='none'/%3E%3C/g%3E%3Cpath d='M11 11.5a5 5 0 1 1 7 4.6c-1.3.6-2 1.6-2 3V20' fill='none' stroke='%23fff' stroke-width='3.6' stroke-linecap='round'/%3E%3Ccircle cx='16' cy='25.5' r='2.4' fill='%23fff'/%3E%3C/svg%3E");
  --i-whistle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 40'%3E%3Cpath d='M37 12c5-5 8-3 7 2-1 4-4 6-8 6' fill='none' stroke='%23e8364a' stroke-width='3' stroke-linecap='round'/%3E%3Cellipse cx='25' cy='34' rx='17' ry='3.5' fill='%234a2a0c' opacity='.18'/%3E%3Cpath d='M4 14h17v9H4z' fill='%23cfd6e2' stroke='%234a2a0c' stroke-width='2.4' stroke-linejoin='round'/%3E%3Ccircle cx='28' cy='21' r='11' fill='%23cfd6e2' stroke='%234a2a0c' stroke-width='2.4'/%3E%3Cpath d='M17 14h11' stroke='%23cfd6e2' stroke-width='4'/%3E%3Crect x='13' y='11' width='8' height='4' rx='1' fill='%234a2a0c'/%3E%3Cpath d='M21 17a8 8 0 0 1 9-4M6 16.5h10' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' fill='none'/%3E%3Ccircle cx='28' cy='21' r='4' fill='%239aa3b5'/%3E%3Ccircle cx='37.5' cy='12.5' r='3' fill='none' stroke='%234a2a0c' stroke-width='2.2'/%3E%3C/svg%3E");
  --i-tow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 36'%3E%3Cellipse cx='24' cy='32' rx='21' ry='3' fill='%234a2a0c' opacity='.18'/%3E%3Cpath d='M9 19L22 5h4' fill='none' stroke='%234a2a0c' stroke-width='3' stroke-linecap='round'/%3E%3Cpath d='M26 5v6a2.6 2.6 0 1 1-2.6 2.6' fill='none' stroke='%234a2a0c' stroke-width='2.2' stroke-linecap='round'/%3E%3Cpath d='M3 27v-8h26v-8h8l7 7v9z' fill='%23ff5a4e' stroke='%234a2a0c' stroke-width='2.4' stroke-linejoin='round'/%3E%3Cpath d='M31.5 13.5h4.5l4.5 4.5h-9z' fill='%23bfe6ff' stroke='%234a2a0c' stroke-width='1.4' stroke-linejoin='round'/%3E%3Cpath d='M5 21h22' stroke='%23fff' stroke-width='2' stroke-linecap='round' opacity='.6'/%3E%3Crect x='3' y='23' width='26' height='3' fill='%23ffd21f'/%3E%3Ccircle cx='11' cy='28' r='4.6' fill='%23263056' stroke='%234a2a0c' stroke-width='1.6'/%3E%3Ccircle cx='36' cy='28' r='4.6' fill='%23263056' stroke='%234a2a0c' stroke-width='1.6'/%3E%3Ccircle cx='11' cy='28' r='1.7' fill='%23fff'/%3E%3Ccircle cx='36' cy='28' r='1.7' fill='%23fff'/%3E%3C/svg%3E");
  --i-bus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 80'%3E%3Cellipse cx='80' cy='73' rx='62' ry='5' fill='%23000' opacity='.2'/%3E%3Crect x='14' y='14' width='132' height='50' rx='12' fill='%23ffc20e' stroke='%234a2a0c' stroke-width='3'/%3E%3Crect x='20' y='16' width='120' height='5' rx='2.5' fill='%23ffe266'/%3E%3Crect x='14' y='44' width='132' height='6' fill='%23161616'/%3E%3Crect x='14' y='53' width='132' height='3' fill='%23161616'/%3E%3Cg fill='%232b4c74'%3E%3Crect x='24' y='23' width='18' height='16' rx='3'/%3E%3Crect x='48' y='23' width='18' height='16' rx='3'/%3E%3Crect x='72' y='23' width='18' height='16' rx='3'/%3E%3Crect x='96' y='23' width='18' height='16' rx='3'/%3E%3Cpath d='M120 23h14a6 6 0 0 1 6 6v10h-20z'/%3E%3C/g%3E%3Cg fill='%23fff' opacity='.55'%3E%3Crect x='26' y='25' width='4' height='8'/%3E%3Crect x='50' y='25' width='4' height='8'/%3E%3Crect x='74' y='25' width='4' height='8'/%3E%3Crect x='98' y='25' width='4' height='8'/%3E%3Crect x='122' y='25' width='4' height='8'/%3E%3C/g%3E%3Crect x='30' y='6' width='70' height='8' rx='2' fill='none' stroke='%233a3a3a' stroke-width='2.5'/%3E%3Crect x='40' y='1' width='18' height='9' rx='2' fill='%232f7cf6'/%3E%3Crect x='62' y='3' width='14' height='7' rx='2' fill='%23e8364a'/%3E%3Ccircle cx='42' cy='64' r='9' fill='%231d1f2a'/%3E%3Ccircle cx='118' cy='64' r='9' fill='%231d1f2a'/%3E%3Ccircle cx='42' cy='64' r='3.5' fill='%23c9cbd6'/%3E%3Ccircle cx='118' cy='64' r='3.5' fill='%23c9cbd6'/%3E%3Crect x='140' y='46' width='6' height='6' rx='2' fill='%23fff8d6'/%3E%3C/svg%3E");
}
html, body { overflow: hidden; }
body { font-family: ui-rounded, 'SF Pro Rounded', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; color: var(--brown); background: linear-gradient(#8fd3ff, #d8f0ff); }
body[data-screen=home] { background: radial-gradient(40% 18% at 18% 30%, #7fc45a 0 60%, transparent 61%), radial-gradient(36% 14% at 84% 68%, #7fc45a 0 60%, transparent 61%), linear-gradient(#9edc74, #86cc5e); }
body[data-screen=level] { background: linear-gradient(#8fd3ff 0, #a9ddff 120px, #e7dcc6 120px); }

/* ---------- top bar ---------- */
.pz-brand small { display: none; }
.pz-brand strong { font-size: 30px; font-weight: 900; color: var(--gold); letter-spacing: .02em;
  text-shadow: 0 2px 0 var(--brown), 0 -2px 0 var(--brown), 2px 0 0 var(--brown), -2px 0 0 var(--brown), 2px 2px 0 var(--brown), -2px 2px 0 var(--brown), 2px -2px 0 var(--brown), -2px -2px 0 var(--brown), 0 5px 0 var(--brown); }
.pz-top .pz-chip { min-width: 0; min-height: 40px; display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px 4px 5px; background: #fff8e6; color: var(--brown); border: 2.5px solid var(--brown); box-shadow: 0 3px 0 var(--brown); font-weight: 900; }
.pz-chip small { color: var(--brown-2); }
.pz-ico { display: inline-block; width: 26px; height: 26px; font-size: 0; font-style: normal; background: center / contain no-repeat; }
.pz-chip.lives .pz-ico { background-image: var(--i-heart); }
.pz-chip.coins .pz-ico { background-image: var(--i-coin); }
.pz-chip.coins { padding-right: 4px; }
.pz-chip.coins::after { content: '+'; display: grid; place-items: center; width: 24px; height: 24px; margin-left: 2px; border-radius: 50%; background: linear-gradient(var(--green), var(--green-lo)); color: #fff; font-size: 20px; line-height: 1; font-weight: 900; box-shadow: inset 0 -2px 0 var(--green-edge); }

/* ---------- buttons and sheets ---------- */
.pz-play { background: linear-gradient(var(--green), var(--green-lo)); color: #fff; border: 3px solid var(--green-edge); border-radius: 22px; font-size: 26px; font-weight: 900; letter-spacing: .02em;
  text-shadow: 0 2px 0 var(--green-edge); box-shadow: inset 0 3px 0 #ffffff70, inset 0 -4px 0 #1c9535, 0 5px 0 var(--green-edge), 0 10px 14px #0003; }
.pz-play:active { transform: translateY(3px); box-shadow: inset 0 3px 0 #ffffff70, 0 2px 0 var(--green-edge); }
.pz-ghost { background: var(--cream); color: var(--brown); border: 2.5px solid var(--brown); border-radius: 18px; font-weight: 900; box-shadow: inset 0 -3px 0 #f0cf7a, 0 4px 0 var(--brown); }
.pz-ghost:active { transform: translateY(2px); box-shadow: 0 2px 0 var(--brown); }
.pz-modal { background: #1b2150a0; align-items: center; padding: 16px; }
.pz-sheet { background: #fff8e6; color: var(--brown); border: 3px solid var(--brown); border-radius: 28px; padding: 22px 18px 18px; gap: 12px; box-shadow: inset 0 -5px 0 #f3e2b8, 0 7px 0 var(--brown), 0 24px 40px #0005; animation: djpop .28s cubic-bezier(.3,1.5,.5,1); }
.pz-sheet h2 { font-size: 28px; font-weight: 900; color: var(--brown); }
.pz-sheet p { color: var(--brown-2); font-weight: 700; }
.pz-sheet .pz-stars { font-size: 56px; line-height: 1; letter-spacing: 6px; color: var(--gold) !important; text-shadow: 0 2px 0 var(--brown), 0 -2px 0 var(--brown), 2px 0 0 var(--brown), -2px 0 0 var(--brown), 0 5px 0 var(--brown); }
.pz-sheet.win::before, .pz-sheet.lose::before { content: ''; display: block; height: 80px; background: center / contain no-repeat; }
.pz-sheet.win::before { background-image: var(--i-bus); animation: djbounce 1.1s ease-in-out infinite; }
.pz-sheet.lose h2 { color: #d82a46; }
.pz-sheet.lose::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 40'%3E%3Cg transform='translate(3 6) rotate(-10 12 12)'%3E%3Cpath d='M12 21.2s-7.6-4.6-10.1-9.4C.4 8.5 2.2 4 6.4 4c2.3 0 3.9 1.3 5.6 3.3L10 11l3.5 3.5L11 18z' fill='%23ff4d6a' stroke='%23a3142e' stroke-width='1.2'/%3E%3C/g%3E%3Cg transform='translate(21 6) rotate(10 12 12)'%3E%3Cpath d='M12 7.3C13.7 5.3 15.3 4 17.6 4c4.2 0 6 4.5 4.5 7.8-2.5 4.8-10.1 9.4-10.1 9.4L9.5 17.5 12 14 8.5 10.5z' fill='%23ff4d6a' stroke='%23a3142e' stroke-width='1.2'/%3E%3C/g%3E%3C/svg%3E"); }
.pz-buy { background: var(--cream); color: var(--brown); border: 2px solid #e3c98a; border-radius: 16px; }
.pz-buy small { color: var(--brown-2); }
.pz-buy b { background: linear-gradient(var(--green), var(--green-lo)); color: #fff; border: 2px solid var(--green-edge); text-shadow: 0 1px 0 var(--green-edge); }
.pz-buy.focus { outline: 3px solid var(--green-lo); }
.pz-toast { background: var(--brown); color: #fff; font-weight: 800; }
.pz-note { color: var(--brown); background: #fff8e6d0; border-radius: 12px; padding: 6px 10px; font-weight: 700; }

/* ---------- home: Lagos street with bus-stop roundels ---------- */
.pz-home { position: relative; gap: 12px; }
.pz-path { position: relative; isolation: isolate; gap: 34px; padding-top: 30px; }
.dj-map { position: absolute; inset: 0; width: 100%; height: 100%; overflow: hidden; z-index: -1; pointer-events: none; }
.pz-node:nth-of-type(n+6) { display: none; }
.pz-node { width: 72px; height: 72px; border-radius: 50%; color: var(--brown); font-size: 26px; font-weight: 900; border: 3px solid #3a2600;
  background: radial-gradient(circle at 50% 32%, #ffe98a 0, #ffc914 52%, #e8a300 100%);
  box-shadow: inset 0 -6px 0 #c98a00, inset 0 4px 0 #fff3a0, 0 6px 0 #3a2600, 0 14px 10px #0004; text-shadow: 0 2px 0 #fff4b0; }
.pz-node b { position: relative; z-index: 1; }
.pz-node.now { width: 80px; height: 80px; font-size: 30px; box-shadow: inset 0 -6px 0 #c98a00, inset 0 4px 0 #fff3a0, 0 6px 0 #3a2600, 0 0 0 9px #ffffffa0, 0 16px 12px #0005; }
.pz-node.now::after { content: ''; position: absolute; left: 50%; top: -46px; width: 76px; height: 40px; margin-left: -38px; background: var(--i-bus) center / contain no-repeat; animation: djbounce 1s ease-in-out infinite; pointer-events: none; }
.pz-node.locked, .pz-node:disabled { opacity: 1; color: transparent; text-shadow: none; border-color: #4a4e57;
  background: var(--i-lock) center / 34px no-repeat, radial-gradient(circle at 50% 32%, #d9dce2 0, #a7acb6 60%, #858a95 100%);
  box-shadow: inset 0 -6px 0 #6f7480, inset 0 4px 0 #eef0f4, 0 6px 0 #4a4e57, 0 14px 10px #0003; }
.pz-node span { bottom: -12px; font-size: 16px; color: var(--gold); letter-spacing: -1px; z-index: 1;
  text-shadow: 0 1.5px 0 var(--brown), 0 -1.5px 0 var(--brown), 1.5px 0 0 var(--brown), -1.5px 0 0 var(--brown); }
.pz-row { position: absolute; top: 4px; left: 0; right: 0; height: 0; z-index: 2; }
.pz-row .pz-ghost[data-tab] { position: absolute; width: 58px; height: 58px; padding: 0; border-radius: 50%; display: grid; place-items: center;
  background: linear-gradient(var(--blue), var(--blue-lo)); border: 3px solid var(--blue-edge); box-shadow: inset 0 3px 0 #ffffff70, inset 0 -3px 0 #2558c0, 0 4px 0 var(--blue-edge), 0 8px 10px #0003; }
.pz-row .pz-ghost[data-tab='shop'] { left: 12px; }
.pz-row .pz-ghost[data-tab='trophy'] { right: 12px; }
.pz-row .pz-ghost[data-tab='help'] { right: 12px; top: 84px; }
.dj-rail-ico { width: 34px; height: 34px; background: center / contain no-repeat; }
.pz-ghost[data-tab='shop'] .dj-rail-ico { background-image: var(--i-shop); }
.pz-ghost[data-tab='trophy'] .dj-rail-ico { background-image: var(--i-trophy); }
.pz-ghost[data-tab='help'] .dj-rail-ico { background-image: var(--i-help); }
.pz-ghost[data-tab] span { position: absolute; bottom: -19px; color: #fff; font-size: 13px; font-weight: 900;
  text-shadow: 0 1.5px 0 var(--blue-edge), 0 -1.5px 0 var(--blue-edge), 1.5px 0 0 var(--blue-edge), -1.5px 0 0 var(--blue-edge); }
#app[data-screen=home] .pz-play { padding: 14px; font-size: 32px; }

/* ---------- level: top HUD ---------- */
#app[data-screen=level] { position: relative; padding: 8px 0 0; gap: 0; }
#app[data-screen=level] .pz-top { padding: 0 62px 0 8px; min-height: 48px; }
#app[data-screen=level] .pz-chip.lives, #app[data-screen=level] .pz-brand { visibility: hidden; }
#app[data-screen=level] .pz-chip { min-height: 36px; }
#app[data-screen=level] .pz-chip.coins::after { display: none; }
#app[data-screen=level] .pz-chip.coins { padding-right: 10px; }
#app[data-screen=level] .pz-level-head { position: absolute; top: 9px; left: 8px; right: 8px; height: 46px; justify-content: center; pointer-events: none; z-index: 3; }
#app[data-screen=level] .pz-level-head b { font-size: 21px; font-weight: 900; color: #fff; letter-spacing: .01em;
  text-shadow: 0 0 2px #1d3f8f, 0 1.5px 0 #1d3f8f, 0 -1px 0 #1d3f8f, 1.5px 0 0 #1d3f8f, -1.5px 0 0 #1d3f8f, 0 3px 4px #1d3f8f80; }
#app[data-screen=level] .pz-x, .dj-pause { position: absolute; top: 0; width: 46px; height: 46px; border-radius: 50%; font-size: 0; pointer-events: auto;
  background: var(--i-back) center / 26px no-repeat, linear-gradient(var(--blue), var(--blue-lo)); border: 3px solid var(--blue-edge);
  box-shadow: inset 0 3px 0 #ffffff70, inset 0 -3px 0 #2558c0, 0 3px 0 var(--blue-edge), 0 6px 8px #0003; }
#app[data-screen=level] .pz-x { left: 0; }
.dj-pause { top: 9px; right: 8px; z-index: 3; background: var(--i-pause) center / 24px no-repeat, linear-gradient(var(--blue), var(--blue-lo)); }
#app[data-screen=level] .pz-x:active, .dj-pause:active { transform: translateY(2px); }

/* ---------- level: scene band, lot, board ---------- */
#app[data-screen=level] .pz-board { justify-content: flex-start; align-items: stretch; margin-top: 6px; }
.dj-band { position: relative; flex: none; overflow: hidden; }
.dj-scene-art { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.dj-hud { position: absolute; top: 8px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 8px; padding: 5px 12px 5px 8px; border-radius: 99px;
  background: #fff8e6; border: 2.5px solid var(--brown); box-shadow: 0 3px 0 var(--brown), 0 6px 10px #0002; }
.dj-band.slim .dj-hud { top: 5px; }
.dj-hearts { display: flex; gap: 3px; }
.dj-heart { position: relative; width: 24px; height: 22px; }
.dj-heart svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; transform-origin: 50% 60%; }
.dj-heart .hb path { fill: #e3d6bd; stroke: #c4b18c; stroke-width: 1.2; }
.dj-heart .hl path, .dj-heart .hr path { fill: var(--red); stroke: #a3142e; stroke-width: 1.4; }
.dj-heart .hl { clip-path: polygon(-10% -10%, 50% -10%, 50% 30%, 42% 44%, 55% 56%, 46% 70%, 50% 110%, -10% 110%); }
.dj-heart .hr { clip-path: polygon(50% -10%, 110% -10%, 110% 110%, 50% 110%, 46% 70%, 55% 56%, 42% 44%, 50% 30%); }
.dj-heart.lost .hl, .dj-heart.lost .hr { opacity: 0; }
.dj-heart.break .hl { animation: djbreakL .7s cubic-bezier(.4,0,.8,.6); }
.dj-heart.break .hr { animation: djbreakR .7s cubic-bezier(.4,0,.8,.6); }
.dj-progress { width: 64px; height: 8px; border-radius: 4px; background: #e3d6bd; box-shadow: inset 0 1px 2px #0003; overflow: hidden; }
.dj-progress i { display: block; height: 100%; width: 0; border-radius: 4px; background: linear-gradient(var(--green), var(--green-lo)); transition: width .3s ease-out; }
.dj-towtag { display: none; font-size: 13px; font-weight: 900; color: var(--brown); white-space: nowrap; }
.dj-hud.tow .dj-progress { display: none; }
.dj-hud.tow .dj-towtag { display: block; }

.dj-lot { flex: 1; display: grid; place-items: center; min-height: 0;
  background: repeating-linear-gradient(0deg, #ddd0b6 0 1.5px, transparent 1.5px 30px), repeating-linear-gradient(90deg, #ddd0b6 0 1.5px, transparent 1.5px 30px), #eadfca; }
.dj-board { position: relative; padding: calc(var(--rim, 6px) + var(--pad, 14px)); border-radius: 18px;
  background: radial-gradient(#ffffff0c 1px, transparent 1.6px) 0 0 / 7px 7px, radial-gradient(#0000001c 1px, transparent 1.6px) 3px 4px / 9px 9px, var(--asphalt);
  box-shadow: inset 0 0 0 var(--rim, 6px) #2b2e36, inset 0 0 0 calc(var(--rim, 6px) + 1px) #0007, inset 0 14px 16px -6px #0006, 0 2px 0 #fff8, 0 8px 14px #0003;
  outline: 3px dashed #ffd21f; outline-offset: calc(-1.5px - var(--rim, 6px) / 2); }
.dj-board.tow { outline-color: #fff; }
.dj-board::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; box-shadow: inset 0 0 0 4px #ff2d3a, inset 0 0 36px 8px #ff2d3a99; }
.dj-board.crash { animation: djquake .36s; }
.dj-board.crash::after { animation: djflash .46s ease-out; }
.dj-grid { position: relative; }
.dj-lanes { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.dj-lanes path { stroke: #ffffff3a; stroke-width: 2; stroke-linecap: round; fill: none; }
.dj-lanes .studs { fill: #ffffff45; }

/* ---------- vehicles: tap target is always the full set of cells ---------- */
.dj-v { position: absolute; padding: 0; background: none; z-index: 1; transition: transform .2s ease-out; filter: drop-shadow(0 4px 3px #080a14a0); }
.dj-v:disabled { opacity: 1; }
.dj-v:focus-visible { outline: 3px solid #fff; outline-offset: -2px; border-radius: 10px; }
.dj-body { position: absolute; left: 50%; top: 50%; width: var(--cell); height: calc(var(--cell) * var(--len)); pointer-events: none; transform: translate(-50%, -50%) rotate(var(--rot)); }
.dj-body svg { display: block; width: 100%; height: 100%; overflow: visible; }
.dj-body .fx { fill: #ff2d3a; opacity: 0; mix-blend-mode: multiply; }
.dj-v.go { z-index: 3; transition: transform var(--t) cubic-bezier(.55,0,.95,.35), opacity .16s linear calc(var(--t) - .16s); opacity: 0; }
.dj-v.go .dj-body { animation: djgo var(--t) linear forwards; }
.dj-v.lift { z-index: 4; transition: transform var(--t) cubic-bezier(.3,.6,.6,1), opacity .2s linear calc(var(--t) - .2s); opacity: 0; }
.dj-v.lift .dj-body { animation: djlift var(--t) ease-out forwards; }
.dj-v.ram { z-index: 3; transition: transform var(--t) cubic-bezier(.55,0,1,.45); }
.dj-v.back { z-index: 3; transition: transform .42s cubic-bezier(.25,1.6,.5,1); }
.dj-v.hit .dj-body { animation: djshake .34s; }
.dj-v.hit .fx { animation: djred .46s ease-out; }
.dj-v.hint { z-index: 2; filter: drop-shadow(0 0 3px #fff) drop-shadow(0 0 7px #ffe15a) drop-shadow(0 4px 3px #080a14a0); }
.dj-v.hint .dj-body { animation: djnudge .9s ease-in-out infinite; }
.dj-board.tow .dj-v .dj-body { animation: djwiggle .6s ease-in-out infinite; }
.dj-bang { position: absolute; z-index: 5; width: calc(var(--cell) * 1.1); height: calc(var(--cell) * 1.1); transform: translate(-50%, -50%); pointer-events: none; animation: djbang .5s ease-out forwards; }
.dj-bang svg { display: block; width: 100%; height: 100%; }

/* ---------- boosters: cream tiles on the kerb strip ---------- */
#app[data-screen=level] .pz-boosters { gap: 22px; min-height: 0; align-items: center; padding: 16px 0 calc(12px + env(safe-area-inset-bottom));
  background: linear-gradient(90deg, #ffd21f 0 12px, #3a3d46 12px 24px) top / 24px 7px repeat-x, linear-gradient(#3a3d46, #3a3d46) 0 7px / 100% 2px no-repeat, #d9ccb2; }
.pz-boost { position: relative; width: 88px; height: 88px; border-radius: 22px; gap: 2px; padding-top: 4px; color: var(--brown);
  background: linear-gradient(var(--cream) 0 45%, var(--cream-2)); border: 3px solid var(--brown);
  box-shadow: inset 0 3px 0 #fffbe9, inset 0 -5px 0 #e9b949, 0 5px 0 var(--brown), 0 10px 10px #0003; }
.pz-boost:active { transform: translateY(3px); box-shadow: inset 0 -5px 0 #e9b949, 0 2px 0 var(--brown); }
.pz-boost i { width: 54px; height: 42px; background: center / contain no-repeat; }
.pz-boost[data-id=hint] i { background-image: var(--i-whistle); }
.pz-boost[data-id=tow] i { background-image: var(--i-tow); }
.pz-boost::after { content: attr(aria-label); font-size: 14px; font-weight: 900; line-height: 1; }
.pz-boost small { position: absolute; top: -10px; right: -10px; min-width: 28px; height: 28px; padding: 0 7px; border-radius: 14px; background: #ff3b4e; color: #fff; font-size: 15px; font-weight: 900; line-height: 23px;
  border: 2.5px solid #fff; box-shadow: 0 2px 0 #a3142e; }
.pz-boost[data-count='0'] small { font-size: 0; background: linear-gradient(var(--green), var(--green-lo)); box-shadow: 0 2px 0 var(--green-edge); }
.pz-boost[data-count='0'] small::after { content: '+'; font-size: 22px; line-height: 22px; }

@keyframes djgo {
  0% { transform: translate(-50%, -50%) rotate(var(--rot)) scale(1, 1); }
  16% { transform: translate(-50%, -50%) rotate(var(--rot)) scale(1.07, .9); }
  55% { transform: translate(-50%, -50%) rotate(var(--rot)) scale(.95, 1.08); }
  100% { transform: translate(-50%, -50%) rotate(var(--rot)) scale(.96, 1.06); } }
@keyframes djlift {
  0% { transform: translate(-50%, -50%) rotate(var(--rot)) scale(1); }
  35% { transform: translate(-50%, -50%) rotate(var(--rot)) scale(1.18); }
  100% { transform: translate(-50%, -50%) rotate(calc(var(--rot) + 8deg)) scale(1.3); } }
@keyframes djshake {
  0%, 100% { transform: translate(-50%, -50%) rotate(var(--rot)); }
  20% { transform: translate(-50%, -50%) rotate(var(--rot)) translateX(-6%) rotate(-3deg); }
  45% { transform: translate(-50%, -50%) rotate(var(--rot)) translateX(5%) rotate(2deg); }
  70% { transform: translate(-50%, -50%) rotate(var(--rot)) translateX(-3%); } }
@keyframes djnudge {
  0%, 100% { transform: translate(-50%, -50%) rotate(var(--rot)); }
  50% { transform: translate(-50%, -50%) rotate(var(--rot)) translateY(-6%); } }
@keyframes djwiggle {
  0%, 100% { transform: translate(-50%, -50%) rotate(var(--rot)) rotate(-1.5deg); }
  50% { transform: translate(-50%, -50%) rotate(var(--rot)) rotate(1.5deg); } }
@keyframes djred { 0% { opacity: .75; } 100% { opacity: 0; } }
@keyframes djflash { 0% { opacity: 1; } 100% { opacity: 0; } }
@keyframes djquake { 20% { transform: translate(-5px, 1px); } 40% { transform: translate(4px, -2px); } 60% { transform: translate(-3px, 1px); } 80% { transform: translate(2px, 0); } }
@keyframes djbang { 0% { transform: translate(-50%, -50%) scale(.2) rotate(0); opacity: 1; } 40% { transform: translate(-50%, -50%) scale(1.1) rotate(12deg); opacity: 1; } 100% { transform: translate(-50%, -50%) scale(1.3) rotate(20deg); opacity: 0; } }
@keyframes djbreakL { 0% { opacity: 1; transform: none; } 22% { opacity: 1; transform: scale(1.25); } 100% { opacity: 0; transform: translate(-7px, 16px) rotate(-30deg); } }
@keyframes djbreakR { 0% { opacity: 1; transform: none; } 22% { opacity: 1; transform: scale(1.25); } 100% { opacity: 0; transform: translate(7px, 16px) rotate(30deg); } }
@keyframes djbounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes djpop { from { transform: scale(.86); opacity: 0; } }