{"id":3321,"date":"2026-05-06T12:25:02","date_gmt":"2026-05-06T12:25:02","guid":{"rendered":"https:\/\/ramuddensmartmobility.com\/?page_id=3321"},"modified":"2026-05-06T14:43:23","modified_gmt":"2026-05-06T14:43:23","slug":"vakmannenrace","status":"publish","type":"page","link":"https:\/\/ramuddensmartmobility.com\/nn\/vakmannenrace\/","title":{"rendered":"Elementor #3321"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\n
<\/div>\n\n\n\n

<\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t

\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\r\n\r\n\r\n \r\n \r\n Vakmannen Race | Ramudden<\/title>\r\n <style>\r\n @font-face {\r\n font-family: \"Soehne\";\r\n src: url(\".\/soehne-web-buch.woff2\") format(\"woff2\");\r\n font-weight: 400;\r\n font-style: normal;\r\n font-display: swap;\r\n }\r\n\r\n @font-face {\r\n font-family: \"Soehne\";\r\n src: url(\".\/soehne-web-halbfett.woff2\") format(\"woff2\");\r\n font-weight: 700;\r\n font-style: normal;\r\n font-display: swap;\r\n }\r\n\r\n @font-face {\r\n font-family: \"Soehne\";\r\n src: url(\".\/soehne-web-kraftig.woff2\") format(\"woff2\");\r\n font-weight: 900;\r\n font-style: normal;\r\n font-display: swap;\r\n }\r\n\r\n :root {\r\n --primary: #ffe137;\r\n --sand: #ffe6aa;\r\n --cream: #fffaeb;\r\n --dark: #173232;\r\n --burgundy: #3c1e28;\r\n --blue: #003c8c;\r\n --orange: #f06233;\r\n --success: #0f8a5f;\r\n --danger: #d64545;\r\n --road: #303437;\r\n --road-dark: #24282b;\r\n --grass: #78af67;\r\n --grass-dark: #5b874d;\r\n --white: #ffffff;\r\n --shadow: 0 24px 60px rgba(0, 0, 0, 0.32);\r\n --radius-xl: 32px;\r\n --radius-lg: 22px;\r\n --radius-md: 16px;\r\n }\r\n\r\n * {\r\n box-sizing: border-box;\r\n -webkit-tap-highlight-color: transparent;\r\n }\r\n\r\n html,\r\n body {\r\n margin: 0;\r\n min-height: 100%;\r\n background:\r\n radial-gradient(circle at 50% -10%, rgba(255, 225, 55, 0.18), transparent 28%),\r\n linear-gradient(180deg, #091416 0%, #112729 100%);\r\n color: var(--white);\r\n font-family: \"Soehne\", Inter, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif;\r\n overflow-x: hidden;\r\n }\r\n\r\n body {\r\n display: flex;\r\n justify-content: center;\r\n }\r\n\r\n button,\r\n input,\r\n a {\r\n font: inherit;\r\n }\r\n\r\n button,\r\n a.button {\r\n touch-action: manipulation;\r\n }\r\n\r\n .app {\r\n width: 100%;\r\n max-width: 580px;\r\n min-height: 100vh;\r\n padding: max(12px, env(safe-area-inset-top)) 12px max(14px, env(safe-area-inset-bottom));\r\n position: relative;\r\n }\r\n\r\n .topbar {\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n gap: 12px;\r\n margin-bottom: 12px;\r\n }\r\n\r\n .brand {\r\n display: flex;\r\n align-items: center;\r\n gap: 11px;\r\n min-width: 0;\r\n }\r\n\r\n .brand img {\r\n width: auto;\r\n height: 34px;\r\n object-fit: contain;\r\n display: block;\r\n }\r\n\r\n .brand-fallback {\r\n display: none;\r\n line-height: 0.95;\r\n }\r\n\r\n .brand-fallback strong {\r\n display: block;\r\n font-size: 18px;\r\n letter-spacing: -0.04em;\r\n font-weight: 900;\r\n }\r\n\r\n .brand-fallback span {\r\n display: block;\r\n margin-top: 3px;\r\n font-size: 10px;\r\n text-transform: uppercase;\r\n letter-spacing: 0.16em;\r\n opacity: 0.7;\r\n }\r\n\r\n .brand-mark {\r\n position: relative;\r\n width: 45px;\r\n height: 34px;\r\n flex: 0 0 auto;\r\n display: none;\r\n }\r\n\r\n .tri {\r\n position: absolute;\r\n width: 0;\r\n height: 0;\r\n border-left: 14px solid transparent;\r\n border-right: 14px solid transparent;\r\n border-bottom: 25px solid var(--primary);\r\n }\r\n\r\n .tri.orange { left: 0; bottom: 0; border-bottom-color: var(--orange); }\r\n .tri.blue { left: 17px; bottom: 0; border-bottom-color: var(--blue); }\r\n .tri.yellow { left: 8px; bottom: 14px; border-bottom-color: var(--primary); }\r\n\r\n .ghost-button {\r\n border: 1px solid rgba(255, 255, 255, 0.16);\r\n background: rgba(255, 255, 255, 0.09);\r\n color: var(--white);\r\n border-radius: 999px;\r\n padding: 10px 13px;\r\n font-weight: 800;\r\n cursor: pointer;\r\n backdrop-filter: blur(12px);\r\n white-space: nowrap;\r\n }\r\n\r\n .screen { display: none; }\r\n .screen.active { display: block; }\r\n\r\n .start-card {\r\n border-radius: var(--radius-xl);\r\n box-shadow: var(--shadow);\r\n overflow: hidden;\r\n background: linear-gradient(135deg, var(--primary) 0%, var(--sand) 100%);\r\n color: var(--dark);\r\n padding: 22px;\r\n position: relative;\r\n }\r\n\r\n .start-card::after {\r\n content: \"\";\r\n position: absolute;\r\n right: -70px;\r\n top: -70px;\r\n width: 190px;\r\n height: 190px;\r\n border-radius: 50%;\r\n background: rgba(0, 60, 140, 0.13);\r\n pointer-events: none;\r\n }\r\n\r\n .eyebrow {\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 7px;\r\n border-radius: 999px;\r\n padding: 8px 12px;\r\n margin-bottom: 16px;\r\n background: rgba(23, 50, 50, 0.1);\r\n color: var(--dark);\r\n font-size: 12px;\r\n font-weight: 900;\r\n letter-spacing: 0.08em;\r\n text-transform: uppercase;\r\n }\r\n\r\n h1,\r\n h2,\r\n p {\r\n margin-top: 0;\r\n }\r\n\r\n h1 {\r\n margin-bottom: 13px;\r\n font-size: clamp(40px, 11vw, 62px);\r\n line-height: 0.9;\r\n letter-spacing: -0.07em;\r\n font-weight: 900;\r\n }\r\n\r\n .intro {\r\n font-size: 16px;\r\n line-height: 1.45;\r\n color: rgba(23, 50, 50, 0.78);\r\n margin-bottom: 18px;\r\n max-width: 48ch;\r\n }\r\n\r\n .feature-grid {\r\n display: grid;\r\n gap: 10px;\r\n margin: 16px 0 18px;\r\n }\r\n\r\n .feature {\r\n background: rgba(255, 255, 255, 0.54);\r\n border-radius: var(--radius-md);\r\n padding: 13px 14px;\r\n line-height: 1.35;\r\n }\r\n\r\n .feature strong {\r\n display: block;\r\n margin-bottom: 2px;\r\n font-weight: 900;\r\n }\r\n\r\n .feature span {\r\n color: rgba(23, 50, 50, 0.72);\r\n font-size: 14px;\r\n }\r\n\r\n label {\r\n display: block;\r\n margin-bottom: 8px;\r\n font-size: 14px;\r\n font-weight: 900;\r\n }\r\n\r\n input[type=\"text\"] {\r\n width: 100%;\r\n border: 2px solid rgba(23, 50, 50, 0.12);\r\n background: rgba(255, 255, 255, 0.86);\r\n color: var(--dark);\r\n border-radius: 18px;\r\n padding: 15px 16px;\r\n outline: none;\r\n font-size: 17px;\r\n margin-bottom: 14px;\r\n }\r\n\r\n input[type=\"text\"]:focus {\r\n border-color: var(--blue);\r\n box-shadow: 0 0 0 4px rgba(0, 60, 140, 0.11);\r\n }\r\n\r\n .button {\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n width: 100%;\r\n border: 0;\r\n border-radius: 19px;\r\n padding: 16px 18px;\r\n text-decoration: none;\r\n text-align: center;\r\n font-weight: 900;\r\n font-size: 16px;\r\n cursor: pointer;\r\n transition: transform 0.13s ease, opacity 0.13s ease;\r\n }\r\n\r\n .button:active { transform: translateY(1px) scale(0.99); }\r\n\r\n .button-dark { background: var(--dark); color: var(--white); }\r\n .button-blue { background: var(--blue); color: var(--white); }\r\n .button-orange { background: var(--orange); color: var(--white); }\r\n\r\n .small-note {\r\n margin: 12px 0 0;\r\n color: rgba(23, 50, 50, 0.68);\r\n font-size: 13px;\r\n line-height: 1.45;\r\n text-align: center;\r\n }\r\n\r\n .game-layout {\r\n display: grid;\r\n gap: 10px;\r\n }\r\n\r\n .hud {\r\n display: grid;\r\n grid-template-columns: repeat(3, 1fr);\r\n gap: 8px;\r\n }\r\n\r\n .hud-card {\r\n min-height: 84px;\r\n border: 1px solid rgba(255, 255, 255, 0.12);\r\n border-radius: 20px;\r\n padding: 12px 10px;\r\n background: rgba(255, 255, 255, 0.1);\r\n backdrop-filter: blur(14px);\r\n box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);\r\n }\r\n\r\n .hud-label {\r\n display: block;\r\n margin-bottom: 6px;\r\n font-size: 10px;\r\n text-transform: uppercase;\r\n letter-spacing: 0.14em;\r\n opacity: 0.72;\r\n font-weight: 900;\r\n }\r\n\r\n .hud-value {\r\n font-size: 25px;\r\n line-height: 1;\r\n font-weight: 900;\r\n }\r\n\r\n .hud-sub {\r\n margin-top: 4px;\r\n font-size: 10px;\r\n opacity: 0.68;\r\n }\r\n\r\n .bar-wrap {\r\n height: 9px;\r\n margin-top: 8px;\r\n border-radius: 999px;\r\n background: rgba(255, 255, 255, 0.22);\r\n overflow: hidden;\r\n }\r\n\r\n .bar-fill {\r\n height: 100%;\r\n width: 0%;\r\n border-radius: inherit;\r\n background: linear-gradient(90deg, var(--primary), var(--orange));\r\n transition: width 0.15s ease;\r\n }\r\n\r\n .bar-fill.damage {\r\n background: linear-gradient(90deg, var(--success), var(--orange), var(--danger));\r\n }\r\n\r\n .game-scene {\r\n position: relative;\r\n height: min(68vh, 680px);\r\n min-height: 520px;\r\n overflow: hidden;\r\n border-radius: var(--radius-xl);\r\n border: 1px solid rgba(255, 255, 255, 0.1);\r\n box-shadow: var(--shadow);\r\n background: linear-gradient(180deg, #8abf76 0%, #5d8a4d 100%);\r\n touch-action: none;\r\n user-select: none;\r\n isolation: isolate;\r\n }\r\n\r\n .game-scene.shake {\r\n animation: sceneShake 0.34s ease;\r\n }\r\n\r\n @keyframes sceneShake {\r\n 0% { transform: translateX(0); }\r\n 18% { transform: translateX(-9px); }\r\n 38% { transform: translateX(8px); }\r\n 56% { transform: translateX(-7px); }\r\n 76% { transform: translateX(5px); }\r\n 100% { transform: translateX(0); }\r\n }\r\n\r\n .world-bg {\r\n position: absolute;\r\n inset: 0;\r\n z-index: 1;\r\n background:\r\n radial-gradient(circle at 16% 14%, rgba(255,255,255,0.20), transparent 12%),\r\n radial-gradient(circle at 84% 24%, rgba(255,255,255,0.12), transparent 10%),\r\n linear-gradient(180deg, #8bc473 0%, #5f8b4d 100%);\r\n }\r\n\r\n .world-bg::before {\r\n content: \"\";\r\n position: absolute;\r\n inset: 0;\r\n background:\r\n radial-gradient(circle, rgba(255,255,255,0.06) 1px, transparent 1px);\r\n background-size: 22px 22px;\r\n opacity: 0.25;\r\n }\r\n\r\n .road-top {\r\n position: absolute;\r\n left: 50%;\r\n top: 0;\r\n width: 76%;\r\n height: 100%;\r\n transform: translateX(-50%);\r\n z-index: 2;\r\n overflow: hidden;\r\n border-left: 5px solid rgba(255, 255, 255, 0.42);\r\n border-right: 5px solid rgba(255, 255, 255, 0.42);\r\n background:\r\n linear-gradient(90deg,\r\n #25292c 0%,\r\n #2c3134 8%,\r\n #383d41 50%,\r\n #2c3134 92%,\r\n #25292c 100%);\r\n box-shadow:\r\n inset 18px 0 24px rgba(0,0,0,0.12),\r\n inset -18px 0 24px rgba(0,0,0,0.12);\r\n }\r\n\r\n .road-top::before {\r\n content: \"\";\r\n position: absolute;\r\n inset: 0;\r\n background:\r\n linear-gradient(180deg, rgba(255,255,255,0.06), transparent 120px),\r\n linear-gradient(180deg, transparent, rgba(0,0,0,0.12));\r\n pointer-events: none;\r\n }\r\n\r\n .road-edge-glow {\r\n position: absolute;\r\n top: 0;\r\n bottom: 0;\r\n width: 14%;\r\n z-index: 2;\r\n pointer-events: none;\r\n opacity: 0.45;\r\n background: linear-gradient(180deg, rgba(255,255,255,0.05), transparent 18%, rgba(0,0,0,0.09));\r\n }\r\n\r\n .road-edge-glow.left { left: 8%; }\r\n .road-edge-glow.right { right: 8%; }\r\n\r\n .lane-divider {\r\n position: absolute;\r\n top: -140px;\r\n bottom: -140px;\r\n width: 4px;\r\n transform: translateX(-50%);\r\n z-index: 3;\r\n background:\r\n repeating-linear-gradient(\r\n to bottom,\r\n rgba(255,255,255,0.92) 0 32px,\r\n transparent 32px 78px\r\n );\r\n background-position-y: var(--lane-offset, 0px);\r\n opacity: 0.88;\r\n border-radius: 999px;\r\n filter: drop-shadow(0 0 4px rgba(255,255,255,0.16));\r\n }\r\n\r\n .lane-divider.d1 { left: 20%; }\r\n .lane-divider.d2 { left: 40%; }\r\n .lane-divider.d3 { left: 60%; }\r\n .lane-divider.d4 { left: 80%; }\r\n\r\n .finish-line {\r\n position: absolute;\r\n left: 50%;\r\n top: -90px;\r\n width: 76%;\r\n height: 28px;\r\n transform: translateX(-50%);\r\n z-index: 40;\r\n background:\r\n linear-gradient(45deg, #fff 25%, #111 25% 50%, #fff 50% 75%, #111 75%),\r\n linear-gradient(-45deg, #fff 25%, #111 25% 50%, #fff 50% 75%, #111 75%);\r\n background-size: 28px 28px;\r\n border: 2px solid rgba(255,255,255,0.65);\r\n box-shadow: 0 10px 30px rgba(0,0,0,0.28);\r\n display: none;\r\n }\r\n\r\n .finish-line.show {\r\n display: block;\r\n animation: finishApproach 2.1s linear forwards;\r\n }\r\n\r\n @keyframes finishApproach {\r\n from { top: -80px; }\r\n to { top: 83%; }\r\n }\r\n\r\n .finish-line.crossed {\r\n animation: finishCross 1.35s linear forwards;\r\n }\r\n\r\n @keyframes finishCross {\r\n from { top: -80px; }\r\n to { top: 112%; }\r\n }\r\n\r\n .impact-flash {\r\n position: absolute;\r\n inset: 0;\r\n z-index: 70;\r\n pointer-events: none;\r\n background:\r\n radial-gradient(circle at center, rgba(255,255,255,0.20), transparent 45%),\r\n rgba(214,69,69,0.0);\r\n opacity: 0;\r\n }\r\n\r\n .impact-flash.active {\r\n animation: impactFlash 0.34s ease;\r\n }\r\n\r\n @keyframes impactFlash {\r\n 0% { opacity: 0; }\r\n 18% { opacity: 1; }\r\n 100% { opacity: 0; }\r\n }\r\n\r\n .entity-layer,\r\n .effect-layer {\r\n position: absolute;\r\n inset: 0;\r\n z-index: 20;\r\n pointer-events: none;\r\n }\r\n\r\n .entity {\r\n position: absolute;\r\n left: 50%;\r\n top: -60px;\r\n transform: translate(-50%, -50%);\r\n z-index: 21;\r\n will-change: transform, top;\r\n }\r\n\r\n .entity .shadow {\r\n position: absolute;\r\n left: 50%;\r\n bottom: -12px;\r\n width: 70px;\r\n height: 18px;\r\n transform: translateX(-50%);\r\n border-radius: 50%;\r\n filter: blur(5px);\r\n z-index: 0;\r\n opacity: 0.8;\r\n }\r\n\r\n .entity.collectible .shadow {\r\n background: radial-gradient(circle, rgba(255,225,55,0.34), transparent 70%);\r\n }\r\n\r\n .entity.obstacle .shadow {\r\n background: radial-gradient(circle, rgba(214,69,69,0.26), transparent 70%);\r\n }\r\n\r\n .entity-tag {\r\n position: absolute;\r\n left: 50%;\r\n top: -18px;\r\n transform: translateX(-50%);\r\n padding: 4px 8px;\r\n border-radius: 999px;\r\n font-size: 10px;\r\n line-height: 1;\r\n font-weight: 900;\r\n letter-spacing: 0.03em;\r\n white-space: nowrap;\r\n box-shadow: 0 8px 16px rgba(0,0,0,0.16);\r\n z-index: 4;\r\n }\r\n\r\n .entity.collectible .entity-tag {\r\n background: rgba(255,225,55,0.96);\r\n color: #111;\r\n }\r\n\r\n .entity.obstacle .entity-tag {\r\n background: rgba(214,69,69,0.96);\r\n color: #fff;\r\n }\r\n\r\n .sprite-wrap {\r\n position: relative;\r\n z-index: 2;\r\n filter: drop-shadow(0 12px 12px rgba(0,0,0,0.22));\r\n }\r\n\r\n .entity.collectible .sprite-wrap {\r\n animation:\r\n pickupFloat 1.1s ease-in-out infinite alternate,\r\n pickupPulse 2s ease-in-out infinite;\r\n }\r\n\r\n @keyframes pickupFloat {\r\n from { transform: translateY(0); }\r\n to { transform: translateY(-6px); }\r\n }\r\n\r\n @keyframes pickupPulse {\r\n 0%, 100% { filter: drop-shadow(0 0 0 rgba(255,225,55,0.0)); }\r\n 50% { filter: drop-shadow(0 0 10px rgba(255,225,55,0.45)); }\r\n }\r\n\r\n .sparkle {\r\n position: absolute;\r\n width: 12px;\r\n height: 12px;\r\n top: -2px;\r\n right: -2px;\r\n z-index: 3;\r\n border-radius: 50%;\r\n background: radial-gradient(circle, rgba(255,255,255,0.95), rgba(255,255,255,0.0) 72%);\r\n animation: sparkle 1.2s ease-in-out infinite;\r\n }\r\n\r\n @keyframes sparkle {\r\n 0%, 100% { transform: scale(0.6); opacity: 0.2; }\r\n 50% { transform: scale(1.25); opacity: 1; }\r\n }\r\n\r\n .pickup-cone {\r\n position: relative;\r\n width: 36px;\r\n height: 58px;\r\n }\r\n\r\n .pickup-cone .body {\r\n position: absolute;\r\n left: 2px;\r\n right: 2px;\r\n bottom: 4px;\r\n height: 50px;\r\n background:\r\n linear-gradient(180deg,\r\n #ff9b72 0 14%,\r\n var(--orange) 14% 43%,\r\n #ffffff 43% 55%,\r\n var(--orange) 55% 78%,\r\n #ffffff 78% 88%,\r\n var(--orange) 88% 100%);\r\n clip-path: polygon(50% 0, 84% 72%, 100% 100%, 0 100%, 16% 72%);\r\n border-radius: 5px;\r\n box-shadow: inset -4px -8px 0 rgba(0,0,0,0.08);\r\n }\r\n\r\n .pickup-cone .shine {\r\n position: absolute;\r\n left: 10px;\r\n top: 9px;\r\n width: 6px;\r\n height: 28px;\r\n border-radius: 999px;\r\n background: linear-gradient(180deg, rgba(255,255,255,0.8), rgba(255,255,255,0.08));\r\n opacity: 0.7;\r\n transform: rotate(8deg);\r\n }\r\n\r\n .pickup-cone .base {\r\n position: absolute;\r\n left: -4px;\r\n right: -4px;\r\n bottom: 0;\r\n height: 10px;\r\n border-radius: 6px;\r\n background: #292929;\r\n box-shadow: inset 0 -2px 0 rgba(255,255,255,0.08);\r\n }\r\n\r\n .pickup-sign {\r\n position: relative;\r\n width: 54px;\r\n height: 72px;\r\n }\r\n\r\n .pickup-sign .pole {\r\n position: absolute;\r\n left: 25px;\r\n top: 34px;\r\n width: 5px;\r\n height: 29px;\r\n border-radius: 4px;\r\n background: linear-gradient(180deg, #868686, #555);\r\n }\r\n\r\n .pickup-sign .stand {\r\n position: absolute;\r\n left: 11px;\r\n bottom: 0;\r\n width: 34px;\r\n height: 5px;\r\n border-radius: 999px;\r\n background: #4a4a4a;\r\n }\r\n\r\n .pickup-sign.warning .face {\r\n position: absolute;\r\n left: 11px;\r\n top: 1px;\r\n width: 32px;\r\n height: 32px;\r\n background: #ffffff;\r\n border: 4px solid #d62c2c;\r\n transform: rotate(45deg);\r\n border-radius: 5px;\r\n box-shadow: inset 0 -3px 0 rgba(0,0,0,0.06);\r\n }\r\n\r\n .pickup-sign.warning .face::after {\r\n content: \"!\";\r\n position: absolute;\r\n inset: 0;\r\n display: grid;\r\n place-items: center;\r\n font-weight: 900;\r\n font-size: 16px;\r\n color: #111;\r\n transform: rotate(-45deg);\r\n }\r\n\r\n .pickup-sign.mandatory .face {\r\n position: absolute;\r\n left: 9px;\r\n top: 0;\r\n width: 36px;\r\n height: 36px;\r\n border-radius: 50%;\r\n background: radial-gradient(circle at 35% 28%, #4aa1ff, #1262cc 72%);\r\n border: 3px solid #fff;\r\n box-shadow: inset -3px -6px 0 rgba(0,0,0,0.10);\r\n }\r\n\r\n .pickup-sign.mandatory .face::after {\r\n content: \"\u2192\";\r\n position: absolute;\r\n inset: 0;\r\n display: grid;\r\n place-items: center;\r\n font-weight: 900;\r\n font-size: 22px;\r\n color: #fff;\r\n }\r\n\r\n .pickup-sign.temp .face {\r\n position: absolute;\r\n left: 7px;\r\n top: 3px;\r\n width: 40px;\r\n height: 28px;\r\n border-radius: 6px;\r\n background: linear-gradient(180deg, #fff178, var(--primary));\r\n border: 3px solid #111;\r\n box-shadow: inset 0 -3px 0 rgba(0,0,0,0.10);\r\n }\r\n\r\n .pickup-sign.temp .face::after {\r\n content: \"\u21b7\";\r\n position: absolute;\r\n inset: 0;\r\n display: grid;\r\n place-items: center;\r\n font-weight: 900;\r\n font-size: 18px;\r\n color: #111;\r\n }\r\n\r\n .pickup-fence {\r\n position: relative;\r\n width: 68px;\r\n height: 48px;\r\n }\r\n\r\n .pickup-fence .panel {\r\n position: absolute;\r\n left: 0;\r\n top: 10px;\r\n width: 68px;\r\n height: 26px;\r\n border-radius: 8px;\r\n border: 3px solid #fff;\r\n background:\r\n repeating-linear-gradient(-25deg,\r\n #ffffff 0 8px,\r\n var(--orange) 8px 16px);\r\n box-shadow:\r\n inset 0 0 0 2px rgba(0,0,0,0.12),\r\n inset 0 -4px 0 rgba(0,0,0,0.06);\r\n }\r\n\r\n .pickup-fence .shine-band {\r\n position: absolute;\r\n left: 8px;\r\n right: 8px;\r\n top: 14px;\r\n height: 4px;\r\n border-radius: 999px;\r\n background: rgba(255,255,255,0.45);\r\n }\r\n\r\n .pickup-fence .leg {\r\n position: absolute;\r\n width: 6px;\r\n height: 14px;\r\n bottom: 0;\r\n background: linear-gradient(180deg, #7d7d7d, #505050);\r\n border-radius: 5px;\r\n }\r\n\r\n .pickup-fence .leg.left { left: 12px; }\r\n .pickup-fence .leg.right { right: 12px; }\r\n\r\n .obstacle-oil {\r\n position: relative;\r\n width: 60px;\r\n height: 36px;\r\n border-radius: 50%;\r\n background:\r\n radial-gradient(circle at 36% 30%, rgba(255,255,255,0.28), transparent 12%),\r\n linear-gradient(135deg, #070707, #3a2e5c 54%, #090909);\r\n box-shadow:\r\n inset 0 0 10px rgba(255,255,255,0.04),\r\n 0 0 0 3px rgba(0,0,0,0.10);\r\n }\r\n\r\n .obstacle-pothole {\r\n position: relative;\r\n width: 62px;\r\n height: 36px;\r\n border-radius: 50%;\r\n background:\r\n radial-gradient(circle at 50% 50%, #090909 0 39%, #222 40% 66%, #4a4a4a 67% 75%, transparent 76%);\r\n }\r\n\r\n .obstacle-barrier {\r\n position: relative;\r\n width: 82px;\r\n height: 46px;\r\n }\r\n\r\n .obstacle-barrier .panel {\r\n position: absolute;\r\n left: 0;\r\n top: 8px;\r\n width: 82px;\r\n height: 25px;\r\n border-radius: 8px;\r\n border: 3px solid #fff;\r\n background:\r\n repeating-linear-gradient(-25deg,\r\n #111 0 10px,\r\n var(--orange) 10px 20px);\r\n box-shadow: inset 0 0 0 2px rgba(255,255,255,0.08);\r\n }\r\n\r\n .obstacle-barrier .foot {\r\n position: absolute;\r\n width: 8px;\r\n height: 14px;\r\n bottom: 0;\r\n background: #505050;\r\n border-radius: 4px;\r\n }\r\n\r\n .obstacle-barrier .foot.left { left: 15px; }\r\n .obstacle-barrier .foot.right { right: 15px; }\r\n\r\n .obstacle-vehicle {\r\n position: relative;\r\n width: 74px;\r\n height: 108px;\r\n border-radius: 20px 20px 14px 14px;\r\n background:\r\n linear-gradient(180deg, #ff6a4d 0%, #d63b26 100%);\r\n border: 3px solid rgba(255,255,255,0.20);\r\n box-shadow:\r\n inset 0 -12px 0 rgba(0,0,0,0.12),\r\n inset 0 5px 0 rgba(255,255,255,0.10);\r\n }\r\n\r\n .obstacle-vehicle::before {\r\n content: \"\";\r\n position: absolute;\r\n left: 10px;\r\n right: 10px;\r\n top: 12px;\r\n height: 28px;\r\n border-radius: 10px;\r\n background: linear-gradient(180deg, #a6d8ff, #4f7fa2);\r\n border: 2px solid rgba(255,255,255,0.22);\r\n }\r\n\r\n .obstacle-vehicle::after {\r\n content: \"\";\r\n position: absolute;\r\n left: 12px;\r\n right: 12px;\r\n bottom: 11px;\r\n height: 12px;\r\n border-radius: 999px;\r\n background: rgba(0,0,0,0.35);\r\n }\r\n\r\n .entity.obstacle .sprite-wrap {\r\n animation: obstacleIdle 1.6s ease-in-out infinite alternate;\r\n }\r\n\r\n @keyframes obstacleIdle {\r\n from { transform: translateY(0); }\r\n to { transform: translateY(2px); }\r\n }\r\n\r\n .iveco {\r\n position: absolute;\r\n left: 50%;\r\n bottom: 28px;\r\n width: 102px;\r\n height: 168px;\r\n transform: translateX(-50%);\r\n z-index: 60;\r\n transition: left 0.14s cubic-bezier(.22,.85,.22,1), transform 0.14s ease;\r\n filter: drop-shadow(0 18px 18px rgba(0,0,0,0.34));\r\n }\r\n\r\n .iveco.hit {\r\n animation: vanImpact 0.34s ease;\r\n }\r\n\r\n @keyframes vanImpact {\r\n 0% { transform: translateX(-50%) scale(1); }\r\n 20% { transform: translateX(-50%) translateY(6px) scale(0.98); }\r\n 45% { transform: translateX(-50%) translateY(-4px) scale(1.02); }\r\n 70% { transform: translateX(-50%) translateX(-2px); }\r\n 100% { transform: translateX(-50%) scale(1); }\r\n }\r\n\r\n .wheel {\r\n position: absolute;\r\n width: 14px;\r\n height: 26px;\r\n border-radius: 999px;\r\n background: linear-gradient(180deg, #0a0a0a, #1d1d1d);\r\n z-index: 1;\r\n }\r\n\r\n .wheel.left-front { left: 4px; top: 38px; }\r\n .wheel.right-front { right: 4px; top: 38px; }\r\n .wheel.left-mid { left: 4px; top: 84px; }\r\n .wheel.right-mid { right: 4px; top: 84px; }\r\n .wheel.left-back { left: 4px; bottom: 10px; }\r\n .wheel.right-back { right: 4px; bottom: 10px; }\r\n\r\n .cabin {\r\n position: absolute;\r\n left: 18px;\r\n top: 0;\r\n width: 66px;\r\n height: 68px;\r\n border-radius: 20px 20px 12px 12px;\r\n background:\r\n linear-gradient(180deg, #fff7cb, #dadada);\r\n border: 3px solid rgba(0,0,0,0.34);\r\n z-index: 4;\r\n box-shadow:\r\n inset 0 6px 0 rgba(255,255,255,0.22),\r\n inset 0 -7px 0 rgba(0,0,0,0.08);\r\n }\r\n\r\n .cabin::before {\r\n content: \"\";\r\n position: absolute;\r\n left: 8px;\r\n right: 8px;\r\n top: 8px;\r\n height: 4px;\r\n border-radius: 999px;\r\n background: rgba(255,255,255,0.65);\r\n }\r\n\r\n .windshield {\r\n position: absolute;\r\n left: 9px;\r\n right: 9px;\r\n top: 12px;\r\n height: 24px;\r\n border-radius: 10px;\r\n background: linear-gradient(180deg, #b7e2ff, #4e7d9c);\r\n border: 2px solid rgba(0,0,0,0.18);\r\n }\r\n\r\n .hood {\r\n position: absolute;\r\n left: 11px;\r\n right: 11px;\r\n top: 40px;\r\n height: 12px;\r\n border-radius: 8px;\r\n background: linear-gradient(180deg, rgba(255,255,255,0.45), rgba(0,0,0,0.08));\r\n }\r\n\r\n .grille {\r\n position: absolute;\r\n left: 14px;\r\n right: 14px;\r\n bottom: 10px;\r\n height: 10px;\r\n border-radius: 999px;\r\n background:\r\n repeating-linear-gradient(90deg, #0f1f20 0 6px, #31494a 6px 8px);\r\n }\r\n\r\n .headlight {\r\n position: absolute;\r\n width: 10px;\r\n height: 8px;\r\n bottom: 10px;\r\n border-radius: 999px;\r\n background: radial-gradient(circle at 30% 30%, #fff, #ffe48e 60%, #d9b300 100%);\r\n box-shadow: 0 0 8px rgba(255,225,55,0.45);\r\n }\r\n\r\n .headlight.left { left: 8px; }\r\n .headlight.right { right: 8px; }\r\n\r\n .mirror {\r\n position: absolute;\r\n width: 8px;\r\n height: 14px;\r\n top: 26px;\r\n border-radius: 4px;\r\n background: #3b3b3b;\r\n }\r\n\r\n .mirror.left { left: -5px; }\r\n .mirror.right { right: -5px; }\r\n\r\n .flatbed {\r\n position: absolute;\r\n left: 10px;\r\n top: 56px;\r\n width: 82px;\r\n height: 106px;\r\n border-radius: 10px 10px 18px 18px;\r\n background: linear-gradient(180deg, #586066, #2d3438);\r\n border: 4px solid rgba(0,0,0,0.38);\r\n z-index: 3;\r\n overflow: hidden;\r\n box-shadow: inset 0 5px 0 rgba(255,255,255,0.08);\r\n }\r\n\r\n .flatbed::before {\r\n content: \"\";\r\n position: absolute;\r\n inset: 8px;\r\n border-radius: 8px;\r\n background:\r\n repeating-linear-gradient(180deg, rgba(255,255,255,0.04) 0 8px, transparent 8px 16px),\r\n rgba(0,0,0,0.22);\r\n border: 2px solid rgba(255,255,255,0.08);\r\n }\r\n\r\n .rail {\r\n position: absolute;\r\n background: rgba(240,240,240,0.82);\r\n z-index: 5;\r\n }\r\n\r\n .rail.left {\r\n left: 2px;\r\n top: 6px;\r\n bottom: 14px;\r\n width: 4px;\r\n border-radius: 4px;\r\n }\r\n\r\n .rail.right {\r\n right: 2px;\r\n top: 6px;\r\n bottom: 14px;\r\n width: 4px;\r\n border-radius: 4px;\r\n }\r\n\r\n .rail.back {\r\n left: 8px;\r\n right: 8px;\r\n bottom: 6px;\r\n height: 4px;\r\n border-radius: 4px;\r\n }\r\n\r\n .load-stack {\r\n position: absolute;\r\n left: 16px;\r\n right: 16px;\r\n top: 70px;\r\n height: 72px;\r\n z-index: 6;\r\n display: flex;\r\n flex-wrap: wrap-reverse;\r\n align-content: flex-end;\r\n justify-content: center;\r\n gap: 2px;\r\n pointer-events: none;\r\n }\r\n\r\n .load-mini {\r\n width: 11px;\r\n height: 11px;\r\n border-radius: 2px;\r\n background: var(--primary);\r\n border: 1px solid rgba(0,0,0,0.25);\r\n }\r\n\r\n .load-mini.cone {\r\n background: var(--orange);\r\n clip-path: polygon(50% 0, 100% 100%, 0 100%);\r\n border: 0;\r\n }\r\n\r\n .load-mini.sign {\r\n background: #1262cc;\r\n border-radius: 50%;\r\n border: 1px solid #fff;\r\n }\r\n\r\n .load-mini.fence {\r\n width: 17px;\r\n background: repeating-linear-gradient(-25deg, #fff 0 4px, var(--orange) 4px 8px);\r\n }\r\n\r\n .pop-text {\r\n position: absolute;\r\n z-index: 90;\r\n left: 50%;\r\n top: 48%;\r\n transform: translate(-50%, -50%);\r\n padding: 10px 13px;\r\n border-radius: 999px;\r\n color: #fff;\r\n font-weight: 900;\r\n font-size: 15px;\r\n pointer-events: none;\r\n animation: popText 0.76s ease forwards;\r\n box-shadow: 0 12px 24px rgba(0,0,0,0.22);\r\n }\r\n\r\n .pop-text.good { background: rgba(15,138,95,0.95); }\r\n .pop-text.bad { background: rgba(214,69,69,0.97); }\r\n\r\n @keyframes popText {\r\n 0% { opacity: 0; transform: translate(-50%, -30%) scale(0.82); }\r\n 20% { opacity: 1; transform: translate(-50%, -50%) scale(1); }\r\n 100% { opacity: 0; transform: translate(-50%, -94%) scale(0.95); }\r\n }\r\n\r\n .smoke {\r\n position: absolute;\r\n z-index: 82;\r\n width: 72px;\r\n height: 72px;\r\n border-radius: 50%;\r\n background: radial-gradient(circle, rgba(255,255,255,0.82), rgba(120,120,120,0.34) 56%, transparent 72%);\r\n animation: smoke 0.6s ease forwards;\r\n pointer-events: none;\r\n }\r\n\r\n @keyframes smoke {\r\n from { opacity: 0.95; transform: scale(0.4); }\r\n to { opacity: 0; transform: scale(1.45) translateY(-20px); }\r\n }\r\n\r\n .impact-ring {\r\n position: absolute;\r\n z-index: 81;\r\n width: 22px;\r\n height: 22px;\r\n border-radius: 50%;\r\n border: 6px solid rgba(255,255,255,0.82);\r\n animation: impactRing 0.42s ease forwards;\r\n pointer-events: none;\r\n }\r\n\r\n @keyframes impactRing {\r\n from { opacity: 1; transform: scale(0.3); }\r\n to { opacity: 0; transform: scale(4.3); }\r\n }\r\n\r\n .collect-burst {\r\n position: absolute;\r\n z-index: 80;\r\n width: 18px;\r\n height: 18px;\r\n border-radius: 50%;\r\n background: radial-gradient(circle, rgba(255,255,255,0.95), rgba(255,225,55,0.0) 72%);\r\n animation: collectBurst 0.46s ease forwards;\r\n pointer-events: none;\r\n }\r\n\r\n @keyframes collectBurst {\r\n from { opacity: 1; transform: scale(0.5); }\r\n to { opacity: 0; transform: scale(3.6); }\r\n }\r\n\r\n .progress-track {\r\n position: absolute;\r\n left: 16px;\r\n right: 16px;\r\n bottom: 13px;\r\n height: 10px;\r\n z-index: 82;\r\n border-radius: 999px;\r\n background: rgba(255,255,255,0.28);\r\n overflow: hidden;\r\n box-shadow: inset 0 1px 3px rgba(0,0,0,0.24);\r\n }\r\n\r\n .progress-fill {\r\n height: 100%;\r\n width: 0%;\r\n border-radius: inherit;\r\n background: linear-gradient(90deg, var(--primary), var(--orange));\r\n transition: width 0.12s linear;\r\n }\r\n\r\n .progress-label {\r\n position: absolute;\r\n left: 16px;\r\n bottom: 27px;\r\n z-index: 83;\r\n color: rgba(255,255,255,0.86);\r\n font-size: 11px;\r\n font-weight: 900;\r\n text-transform: uppercase;\r\n letter-spacing: 0.08em;\r\n }\r\n\r\n .side-panel .feature {\r\n background: rgba(255,255,255,0.10);\r\n color: #fff;\r\n border: 1px solid rgba(255,255,255,0.12);\r\n }\r\n\r\n .side-panel .feature span {\r\n color: rgba(255,255,255,.72);\r\n }\r\n\r\n .desktop-help {\r\n display: none;\r\n }\r\n\r\n .modal {\r\n position: fixed;\r\n inset: 0;\r\n z-index: 200;\r\n display: none;\r\n align-items: center;\r\n justify-content: center;\r\n padding: 18px;\r\n background: rgba(7, 16, 17, 0.72);\r\n backdrop-filter: blur(10px);\r\n }\r\n\r\n .modal.active {\r\n display: flex;\r\n }\r\n\r\n .modal-card {\r\n width: min(100%, 560px);\r\n max-height: min(90vh, 760px);\r\n overflow: auto;\r\n border-radius: var(--radius-xl);\r\n box-shadow: 0 34px 70px rgba(0,0,0,0.42);\r\n background: var(--cream);\r\n color: var(--dark);\r\n padding: 22px;\r\n position: relative;\r\n }\r\n\r\n .close-modal {\r\n position: sticky;\r\n top: 0;\r\n margin-left: auto;\r\n display: grid;\r\n place-items: center;\r\n width: 42px;\r\n height: 42px;\r\n border: 0;\r\n border-radius: 999px;\r\n background: rgba(23,50,50,0.08);\r\n color: var(--dark);\r\n font-size: 24px;\r\n font-weight: 900;\r\n cursor: pointer;\r\n z-index: 3;\r\n }\r\n\r\n .badge {\r\n display: inline-flex;\r\n align-items: center;\r\n border-radius: 999px;\r\n padding: 8px 12px;\r\n margin: 12px 0 16px;\r\n background: var(--primary);\r\n color: #111;\r\n font-weight: 900;\r\n font-size: 12px;\r\n text-transform: uppercase;\r\n letter-spacing: 0.06em;\r\n }\r\n\r\n .result-grid { display: grid; gap: 18px; }\r\n\r\n .result-title {\r\n margin-bottom: 10px;\r\n font-size: clamp(32px, 9vw, 52px);\r\n line-height: 0.95;\r\n letter-spacing: -0.06em;\r\n font-weight: 900;\r\n }\r\n\r\n .result-copy {\r\n margin-bottom: 0;\r\n color: rgba(23, 50, 50, 0.75);\r\n line-height: 1.5;\r\n font-size: 16px;\r\n }\r\n\r\n .score-box {\r\n border-radius: 24px;\r\n padding: 18px;\r\n background: rgba(23, 50, 50, 0.08);\r\n text-align: center;\r\n }\r\n\r\n .score-label {\r\n margin-bottom: 4px;\r\n font-size: 11px;\r\n font-weight: 900;\r\n text-transform: uppercase;\r\n letter-spacing: 0.14em;\r\n color: rgba(23, 50, 50, 0.6);\r\n }\r\n\r\n .score-big {\r\n font-size: 52px;\r\n line-height: 1;\r\n font-weight: 900;\r\n letter-spacing: -0.06em;\r\n }\r\n\r\n .stats-grid {\r\n display: grid;\r\n grid-template-columns: repeat(3, 1fr);\r\n gap: 8px;\r\n margin-top: 16px;\r\n }\r\n\r\n .stat {\r\n background: rgba(23, 50, 50, 0.08);\r\n border-radius: 16px;\r\n padding: 12px 8px;\r\n text-align: center;\r\n }\r\n\r\n .stat strong {\r\n display: block;\r\n font-size: 22px;\r\n line-height: 1;\r\n font-weight: 900;\r\n }\r\n\r\n .stat span {\r\n display: block;\r\n margin-top: 5px;\r\n font-size: 10px;\r\n text-transform: uppercase;\r\n letter-spacing: 0.08em;\r\n color: rgba(23, 50, 50, 0.62);\r\n font-weight: 900;\r\n }\r\n\r\n .result-actions {\r\n display: grid;\r\n gap: 10px;\r\n margin-top: 20px;\r\n }\r\n\r\n @media (min-width: 760px) {\r\n .app {\r\n max-width: 980px;\r\n padding: 22px;\r\n }\r\n\r\n .brand img {\r\n height: 42px;\r\n }\r\n\r\n .feature-grid {\r\n grid-template-columns: repeat(3, 1fr);\r\n }\r\n\r\n .game-layout {\r\n grid-template-columns: minmax(0, 1fr) 290px;\r\n align-items: start;\r\n }\r\n\r\n .hud {\r\n grid-column: 1 \/ -1;\r\n }\r\n\r\n .game-scene {\r\n height: 720px;\r\n min-height: 720px;\r\n }\r\n\r\n .side-panel {\r\n position: sticky;\r\n top: 18px;\r\n }\r\n\r\n .desktop-help {\r\n display: block;\r\n margin-top: 12px;\r\n color: rgba(255, 255, 255, 0.62);\r\n font-size: 13px;\r\n line-height: 1.45;\r\n text-align: center;\r\n }\r\n\r\n .result-grid {\r\n grid-template-columns: 1fr 230px;\r\n align-items: start;\r\n }\r\n }\r\n\r\n @media (max-width: 380px) {\r\n .game-scene { min-height: 500px; }\r\n .hud-value { font-size: 22px; }\r\n .iveco { width: 92px; height: 156px; }\r\n .cabin { left: 16px; width: 60px; height: 62px; }\r\n .flatbed { left: 9px; width: 74px; height: 98px; top: 54px; }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <main class=\"app\">\r\n <header class=\"topbar\">\r\n <div class=\"brand\">\r\n <img decoding=\"async\" id=\"logo\" src=\".\/ramudden-logo.png\" alt=\"Ramudden\" \/>\r\n <div class=\"brand-mark\" id=\"brandMark\" aria-hidden=\"true\">\r\n <div class=\"tri orange\"><\/div>\r\n <div class=\"tri blue\"><\/div>\r\n <div class=\"tri yellow\"><\/div>\r\n <\/div>\r\n <div class=\"brand-fallback\" id=\"brandFallback\">\r\n <strong>Ramudden<\/strong>\r\n <span>Vakmannen Race<\/span>\r\n <\/div>\r\n <\/div>\r\n <button class=\"ghost-button\" id=\"soundButton\" type=\"button\">\ud83d\udd0a Muziek<\/button>\r\n <\/header>\r\n\r\n <section class=\"screen active\" id=\"startScreen\">\r\n <div class=\"start-card\">\r\n <div class=\"eyebrow\">\ud83c\udfc1 Vakmannen Race<\/div>\r\n <h1>Laad je bus. Haal de finish.<\/h1>\r\n <p class=\"intro\">\r\n Stuur de Iveco Daily over vijf rijbanen, verzamel tijdelijke verkeersmaatregelen en ontwijk alles wat je werkdag onnodig ingewikkeld maakt.\r\n <\/p>\r\n\r\n <div class=\"feature-grid\">\r\n <div class=\"feature\"><strong>\ud83d\udcf1 Mobile first<\/strong><span>Swipe links of rechts om van baan te wisselen.<\/span><\/div>\r\n <div class=\"feature\"><strong>\ud83d\udea7 Verzamel materiaal<\/strong><span>Kegels, borden en hekken leveren punten op.<\/span><\/div>\r\n <div class=\"feature\"><strong>\ud83d\udcaa Recruitment game<\/strong><span>Finish gehaald? Dan ben je misschien klaar voor het echte werk.<\/span><\/div>\r\n <\/div>\r\n\r\n <label for=\"nickname\">Voornaam of nickname<\/label>\r\n <input id=\"nickname\" type=\"text\" maxlength=\"18\" placeholder=\"Bijv. Sam\" autocomplete=\"nickname\" \/>\r\n\r\n <button class=\"button button-dark\" id=\"startButton\" type=\"button\">Start de race<\/button>\r\n <p class=\"small-note\">Desktop? Gebruik de pijltjestoetsen links\/rechts. Hard mode: de laatste 20 seconden worden serieus pittig. Je haalt altijd de finish.<\/p>\r\n <\/div>\r\n <\/section>\r\n\r\n <section class=\"screen\" id=\"gameScreen\">\r\n <div class=\"game-layout\">\r\n <div class=\"hud\">\r\n <div class=\"hud-card\">\r\n <span class=\"hud-label\">Score<\/span>\r\n <div class=\"hud-value\" id=\"scoreValue\">0<\/div>\r\n <div class=\"hud-sub\" id=\"scoreSub\">Materiaal verzamelen<\/div>\r\n <\/div>\r\n <div class=\"hud-card\">\r\n <span class=\"hud-label\">Lading<\/span>\r\n <div class=\"hud-value\" id=\"loadValue\">0<\/div>\r\n <div class=\"bar-wrap\"><div class=\"bar-fill\" id=\"loadBar\"><\/div><\/div>\r\n <\/div>\r\n <div class=\"hud-card\">\r\n <span class=\"hud-label\">Schade<\/span>\r\n <div class=\"hud-value\" id=\"damageValue\">0%<\/div>\r\n <div class=\"bar-wrap\"><div class=\"bar-fill damage\" id=\"damageBar\"><\/div><\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <section class=\"game-scene\" id=\"scene\" aria-label=\"Vakmannen Race speelveld\">\r\n <div class=\"world-bg\"><\/div>\r\n <div class=\"road-edge-glow left\"><\/div>\r\n <div class=\"road-edge-glow right\"><\/div>\r\n\r\n <div class=\"road-top\" id=\"road\">\r\n <div class=\"lane-divider d1\"><\/div>\r\n <div class=\"lane-divider d2\"><\/div>\r\n <div class=\"lane-divider d3\"><\/div>\r\n <div class=\"lane-divider d4\"><\/div>\r\n <\/div>\r\n\r\n <div class=\"finish-line\" id=\"finishLine\"><\/div>\r\n <div class=\"impact-flash\" id=\"impactFlash\"><\/div>\r\n\r\n <div class=\"entity-layer\" id=\"entityLayer\"><\/div>\r\n <div class=\"effect-layer\" id=\"effectLayer\"><\/div>\r\n\r\n <div class=\"iveco\" id=\"iveco\">\r\n <div class=\"wheel left-front\"><\/div>\r\n <div class=\"wheel right-front\"><\/div>\r\n <div class=\"wheel left-mid\"><\/div>\r\n <div class=\"wheel right-mid\"><\/div>\r\n <div class=\"wheel left-back\"><\/div>\r\n <div class=\"wheel right-back\"><\/div>\r\n\r\n <div class=\"cabin\">\r\n <div class=\"mirror left\"><\/div>\r\n <div class=\"mirror right\"><\/div>\r\n <div class=\"windshield\"><\/div>\r\n <div class=\"hood\"><\/div>\r\n <div class=\"grille\"><\/div>\r\n <div class=\"headlight left\"><\/div>\r\n <div class=\"headlight right\"><\/div>\r\n <\/div>\r\n\r\n <div class=\"flatbed\"><\/div>\r\n <div class=\"rail left\"><\/div>\r\n <div class=\"rail right\"><\/div>\r\n <div class=\"rail back\"><\/div>\r\n\r\n <div class=\"load-stack\" id=\"loadStack\"><\/div>\r\n <\/div>\r\n\r\n <div class=\"progress-label\">Naar de finish<\/div>\r\n <div class=\"progress-track\"><div class=\"progress-fill\" id=\"progressFill\"><\/div><\/div>\r\n <\/section>\r\n\r\n <aside class=\"side-panel\">\r\n <div class=\"feature\">\r\n <strong>Besturing<\/strong>\r\n <span>Swipe links\/rechts op mobiel. Op desktop werken de pijltjestoetsen.<\/span>\r\n <\/div>\r\n <div class=\"feature\" style=\"margin-top: 10px;\">\r\n <strong>Punten<\/strong>\r\n <span>Kegel +10, bord +25, hek +50. Schadevrij rijden geeft bonus.<\/span>\r\n <\/div>\r\n <div class=\"desktop-help\">De race duurt ongeveer 60 seconden. Botsingen kosten snelheid en lading.<\/div>\r\n <\/aside>\r\n <\/div>\r\n <\/section>\r\n <\/main>\r\n\r\n <section class=\"modal\" id=\"resultModal\" aria-hidden=\"true\">\r\n <div class=\"modal-card\">\r\n <button class=\"close-modal\" id=\"closeResultButton\" aria-label=\"Sluit resultaten\">\u00d7<\/button>\r\n\r\n <div class=\"badge\" id=\"badgeText\">Badge<\/div>\r\n\r\n <div class=\"result-grid\">\r\n <div>\r\n <h2 class=\"result-title\" id=\"resultTitle\">Finish gehaald<\/h2>\r\n <p class=\"result-copy\" id=\"resultCopy\">Mooie rit. De bus staat klaar voor de volgende klus.<\/p>\r\n <\/div>\r\n <div class=\"score-box\">\r\n <div class=\"score-label\">Eindscore<\/div>\r\n <div class=\"score-big\" id=\"finalScore\">0<\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"stats-grid\">\r\n <div class=\"stat\"><strong id=\"finalLoad\">0<\/strong><span>materialen<\/span><\/div>\r\n <div class=\"stat\"><strong id=\"finalHits\">0<\/strong><span>botsingen<\/span><\/div>\r\n <div class=\"stat\"><strong id=\"finalBonus\">0<\/strong><span>bonus<\/span><\/div>\r\n <\/div>\r\n\r\n <div class=\"result-actions\">\r\n <a class=\"button button-blue\" href=\"#werken-bij\" id=\"jobButton\">Kom werken bij ons<\/a>\r\n <button class=\"button button-orange\" id=\"shareButton\" type=\"button\">Deel je score<\/button>\r\n <\/div>\r\n\r\n <p class=\"small-note\">\r\n Het eindscherm blijft staan totdat je zelf op het kruisje klikt.\r\n <\/p>\r\n <\/div>\r\n <\/section>\r\n\r\n <script>\r\n \"use strict\";\r\n\r\n const LANES = [19.6, 34.8, 50, 65.2, 80.4];\r\n const RACE_DURATION = 60000;\r\n const FINISH_RESULT_DELAY = 1350;\r\n\r\n const ITEM_TYPES = {\r\n cone: { label: \"Kegel\", points: 10, mini: \"cone\" },\r\n sign: { label: \"Bord\", points: 25, mini: \"sign\" },\r\n fence: { label: \"Hek\", points: 50, mini: \"fence\" }\r\n };\r\n\r\n const OBSTACLE_TYPES = {\r\n oil: { label: \"Olieplas\", damage: 12, lose: 3, slow: 620, text: \"SLIP!\" },\r\n pothole: { label: \"Gat\", damage: 19, lose: 4, slow: 850, text: \"OEF!\" },\r\n barrier: { label: \"Barrier\", damage: 27, lose: 7, slow: 1100, text: \"BONK!\" },\r\n vehicle: { label: \"Voertuig\", damage: 34, lose: 9, slow: 1350, text: \"RAMMEL!\" }\r\n };\r\n\r\n const state = {\r\n nickname: \"Vakman\",\r\n screen: \"start\",\r\n running: false,\r\n finished: false,\r\n lane: 2,\r\n score: 0,\r\n load: [],\r\n damage: 0,\r\n hits: 0,\r\n startTime: 0,\r\n elapsed: 0,\r\n lastSpawn: 0,\r\n spawnEvery: 820,\r\n speed: 1,\r\n laneOffset: 0,\r\n slowUntil: 0,\r\n entities: [],\r\n lastFrame: 0,\r\n raf: null,\r\n muted: false,\r\n audioCtx: null,\r\n musicNodes: null,\r\n touchStart: null,\r\n finishStarted: false,\r\n crossingFinish: false\r\n };\r\n\r\n const el = {\r\n logo: document.getElementById(\"logo\"),\r\n brandMark: document.getElementById(\"brandMark\"),\r\n brandFallback: document.getElementById(\"brandFallback\"),\r\n soundButton: document.getElementById(\"soundButton\"),\r\n startScreen: document.getElementById(\"startScreen\"),\r\n gameScreen: document.getElementById(\"gameScreen\"),\r\n startButton: document.getElementById(\"startButton\"),\r\n nickname: document.getElementById(\"nickname\"),\r\n scene: document.getElementById(\"scene\"),\r\n road: document.getElementById(\"road\"),\r\n finishLine: document.getElementById(\"finishLine\"),\r\n impactFlash: document.getElementById(\"impactFlash\"),\r\n entityLayer: document.getElementById(\"entityLayer\"),\r\n effectLayer: document.getElementById(\"effectLayer\"),\r\n iveco: document.getElementById(\"iveco\"),\r\n loadStack: document.getElementById(\"loadStack\"),\r\n scoreValue: document.getElementById(\"scoreValue\"),\r\n scoreSub: document.getElementById(\"scoreSub\"),\r\n loadValue: document.getElementById(\"loadValue\"),\r\n loadBar: document.getElementById(\"loadBar\"),\r\n damageValue: document.getElementById(\"damageValue\"),\r\n damageBar: document.getElementById(\"damageBar\"),\r\n progressFill: document.getElementById(\"progressFill\"),\r\n resultModal: document.getElementById(\"resultModal\"),\r\n badgeText: document.getElementById(\"badgeText\"),\r\n resultTitle: document.getElementById(\"resultTitle\"),\r\n resultCopy: document.getElementById(\"resultCopy\"),\r\n finalScore: document.getElementById(\"finalScore\"),\r\n finalLoad: document.getElementById(\"finalLoad\"),\r\n finalHits: document.getElementById(\"finalHits\"),\r\n finalBonus: document.getElementById(\"finalBonus\"),\r\n closeResultButton: document.getElementById(\"closeResultButton\"),\r\n shareButton: document.getElementById(\"shareButton\")\r\n };\r\n\r\n el.logo.addEventListener(\"error\", function () {\r\n el.logo.style.display = \"none\";\r\n el.brandMark.style.display = \"block\";\r\n el.brandFallback.style.display = \"block\";\r\n });\r\n\r\n function clamp(n, min, max) {\r\n return Math.max(min, Math.min(max, n));\r\n }\r\n\r\n function randomItem(arr) {\r\n return arr[Math.floor(Math.random() * arr.length)];\r\n }\r\n\r\n function showScreen(name) {\r\n state.screen = name;\r\n el.startScreen.classList.toggle(\"active\", name === \"start\");\r\n el.gameScreen.classList.toggle(\"active\", name === \"game\");\r\n }\r\n\r\n function openResultModal() {\r\n el.resultModal.classList.add(\"active\");\r\n el.resultModal.setAttribute(\"aria-hidden\", \"false\");\r\n }\r\n\r\n function closeResultModal() {\r\n el.resultModal.classList.remove(\"active\");\r\n el.resultModal.setAttribute(\"aria-hidden\", \"true\");\r\n resetGame();\r\n showScreen(\"start\");\r\n }\r\n\r\n function ensureAudio() {\r\n if (state.muted) return;\r\n const AudioContext = window.AudioContext || window.webkitAudioContext;\r\n if (!AudioContext) return;\r\n if (!state.audioCtx) state.audioCtx = new AudioContext();\r\n if (state.audioCtx.state === \"suspended\") state.audioCtx.resume();\r\n }\r\n\r\n function beep(type) {\r\n if (state.muted) return;\r\n try {\r\n ensureAudio();\r\n if (!state.audioCtx) return;\r\n\r\n const ctx = state.audioCtx;\r\n const now = ctx.currentTime;\r\n\r\n const cfg = {\r\n collect: { freq: 760, end: 1080, dur: 0.09, gain: 0.05, wave: \"triangle\" },\r\n hit: { freq: 170, end: 84, dur: 0.18, gain: 0.07, wave: \"sawtooth\" },\r\n lane: { freq: 390, end: 450, dur: 0.05, gain: 0.025, wave: \"square\" },\r\n finish: { freq: 540, end: 1100, dur: 0.32, gain: 0.06, wave: \"triangle\" }\r\n }[type || \"lane\"];\r\n\r\n const osc = ctx.createOscillator();\r\n const gain = ctx.createGain();\r\n\r\n osc.type = cfg.wave;\r\n osc.frequency.setValueAtTime(cfg.freq, now);\r\n osc.frequency.exponentialRampToValueAtTime(Math.max(cfg.end, 60), now + cfg.dur);\r\n\r\n gain.gain.setValueAtTime(0.0001, now);\r\n gain.gain.exponentialRampToValueAtTime(cfg.gain, now + 0.01);\r\n gain.gain.exponentialRampToValueAtTime(0.0001, now + cfg.dur);\r\n\r\n osc.connect(gain);\r\n gain.connect(ctx.destination);\r\n osc.start(now);\r\n osc.stop(now + cfg.dur);\r\n } catch (err) {}\r\n }\r\n\r\n function startMusic() {\r\n if (state.muted) return;\r\n\r\n try {\r\n ensureAudio();\r\n if (!state.audioCtx || state.musicNodes) return;\r\n\r\n const ctx = state.audioCtx;\r\n const master = ctx.createGain();\r\n master.gain.value = 0.035;\r\n master.connect(ctx.destination);\r\n\r\n const bass = ctx.createOscillator();\r\n const bassGain = ctx.createGain();\r\n bass.type = \"square\";\r\n bass.frequency.value = 82;\r\n bassGain.gain.value = 0.22;\r\n bass.connect(bassGain);\r\n bassGain.connect(master);\r\n bass.start();\r\n\r\n let step = 0;\r\n const notes = [82, 82, 110, 82, 123, 110, 82, 98];\r\n\r\n const interval = setInterval(function () {\r\n if (!state.running || state.muted || !state.audioCtx) return;\r\n bass.frequency.setTargetAtTime(notes[step % notes.length], ctx.currentTime, 0.015);\r\n step++;\r\n }, 190);\r\n\r\n state.musicNodes = { bass, master, interval };\r\n } catch (err) {}\r\n }\r\n\r\n function stopMusic() {\r\n if (!state.musicNodes) return;\r\n\r\n try {\r\n clearInterval(state.musicNodes.interval);\r\n state.musicNodes.master.gain.exponentialRampToValueAtTime(0.0001, state.audioCtx.currentTime + 0.08);\r\n state.musicNodes.bass.stop(state.audioCtx.currentTime + 0.1);\r\n } catch (err) {}\r\n\r\n state.musicNodes = null;\r\n }\r\n\r\n function toggleSound() {\r\n state.muted = !state.muted;\r\n el.soundButton.textContent = state.muted ? \"\ud83d\udd07 Uit\" : \"\ud83d\udd0a Muziek\";\r\n\r\n if (state.muted) {\r\n stopMusic();\r\n } else if (state.running) {\r\n startMusic();\r\n }\r\n }\r\n\r\n function updateVanPosition() {\r\n el.iveco.style.left = LANES[state.lane] + \"%\";\r\n }\r\n\r\n function renderLoadStack() {\r\n const visible = state.load.slice(-24);\r\n\r\n el.loadStack.innerHTML = visible.map(function (type) {\r\n const mini = ITEM_TYPES[type] ? ITEM_TYPES[type].mini : \"cone\";\r\n return '<div class=\"load-mini ' + mini + '\"><\/div>';\r\n }).join(\"\");\r\n }\r\n\r\n function updateHud() {\r\n el.scoreValue.textContent = state.score;\r\n el.loadValue.textContent = state.load.length;\r\n el.damageValue.textContent = Math.round(state.damage) + \"%\";\r\n el.loadBar.style.width = clamp(state.load.length * 4, 0, 100) + \"%\";\r\n el.damageBar.style.width = clamp(state.damage, 0, 100) + \"%\";\r\n\r\n const progress = clamp((state.elapsed \/ RACE_DURATION) * 100, 0, 100);\r\n el.progressFill.style.width = progress + \"%\";\r\n\r\n el.scoreSub.textContent = state.hits === 0\r\n ? \"Schadevrij onderweg\"\r\n : state.hits + \" botsing\" + (state.hits === 1 ? \"\" : \"en\");\r\n\r\n renderLoadStack();\r\n }\r\n\r\n function laneLeft() {\r\n if (!state.running || state.finished) return;\r\n const next = clamp(state.lane - 1, 0, LANES.length - 1);\r\n if (next !== state.lane) {\r\n state.lane = next;\r\n updateVanPosition();\r\n beep(\"lane\");\r\n }\r\n }\r\n\r\n function laneRight() {\r\n if (!state.running || state.finished) return;\r\n const next = clamp(state.lane + 1, 0, LANES.length - 1);\r\n if (next !== state.lane) {\r\n state.lane = next;\r\n updateVanPosition();\r\n beep(\"lane\");\r\n }\r\n }\r\n\r\n function resetGame() {\r\n cancelAnimationFrame(state.raf);\r\n stopMusic();\r\n\r\n state.running = false;\r\n state.finished = false;\r\n state.lane = 2;\r\n state.score = 0;\r\n state.load = [];\r\n state.damage = 0;\r\n state.hits = 0;\r\n state.elapsed = 0;\r\n state.lastSpawn = 0;\r\n state.spawnEvery = 820;\r\n state.speed = 1;\r\n state.laneOffset = 0;\r\n state.slowUntil = 0;\r\n state.entities = [];\r\n state.lastFrame = 0;\r\n state.finishStarted = false;\r\n state.crossingFinish = false;\r\n\r\n el.entityLayer.innerHTML = \"\";\r\n el.effectLayer.innerHTML = \"\";\r\n el.finishLine.classList.remove(\"show\", \"crossed\");\r\n el.scene.classList.remove(\"shake\");\r\n el.iveco.classList.remove(\"hit\");\r\n el.impactFlash.classList.remove(\"active\");\r\n el.road.style.setProperty(\"--lane-offset\", \"0px\");\r\n\r\n updateVanPosition();\r\n updateHud();\r\n }\r\n\r\n function startGame() {\r\n state.nickname = el.nickname.value.trim() || \"Vakman\";\r\n resetGame();\r\n showScreen(\"game\");\r\n ensureAudio();\r\n\r\n state.running = true;\r\n state.startTime = performance.now();\r\n state.lastFrame = state.startTime;\r\n\r\n startMusic();\r\n state.raf = requestAnimationFrame(loop);\r\n }\r\n\r\n function getRandomSignVariant() {\r\n return randomItem([\"warning\", \"mandatory\", \"temp\"]);\r\n }\r\n\r\n function createCollectibleMarkup(type) {\r\n if (type === \"cone\") {\r\n return `\r\n <div class=\"shadow\"><\/div>\r\n <div class=\"entity-tag\">Pickup<\/div>\r\n <div class=\"sprite-wrap\">\r\n <div class=\"pickup-cone\">\r\n <div class=\"body\"><\/div>\r\n <div class=\"shine\"><\/div>\r\n <div class=\"base\"><\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"sparkle\"><\/div>\r\n `;\r\n }\r\n\r\n if (type === \"sign\") {\r\n const variant = getRandomSignVariant();\r\n return `\r\n <div class=\"shadow\"><\/div>\r\n <div class=\"entity-tag\">Bord<\/div>\r\n <div class=\"sprite-wrap\">\r\n <div class=\"pickup-sign ${variant}\">\r\n <div class=\"face\"><\/div>\r\n <div class=\"pole\"><\/div>\r\n <div class=\"stand\"><\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"sparkle\"><\/div>\r\n `;\r\n }\r\n\r\n return `\r\n <div class=\"shadow\"><\/div>\r\n <div class=\"entity-tag\">Hek<\/div>\r\n <div class=\"sprite-wrap\">\r\n <div class=\"pickup-fence\">\r\n <div class=\"panel\"><\/div>\r\n <div class=\"shine-band\"><\/div>\r\n <div class=\"leg left\"><\/div>\r\n <div class=\"leg right\"><\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"sparkle\"><\/div>\r\n `;\r\n }\r\n\r\n function createObstacleMarkup(type) {\r\n if (type === \"oil\") {\r\n return `\r\n <div class=\"shadow\"><\/div>\r\n <div class=\"entity-tag\">Obstakel<\/div>\r\n <div class=\"sprite-wrap\">\r\n <div class=\"obstacle-oil\"><\/div>\r\n <\/div>\r\n `;\r\n }\r\n\r\n if (type === \"pothole\") {\r\n return `\r\n <div class=\"shadow\"><\/div>\r\n <div class=\"entity-tag\">Obstakel<\/div>\r\n <div class=\"sprite-wrap\">\r\n <div class=\"obstacle-pothole\"><\/div>\r\n <\/div>\r\n `;\r\n }\r\n\r\n if (type === \"barrier\") {\r\n return `\r\n <div class=\"shadow\"><\/div>\r\n <div class=\"entity-tag\">Obstakel<\/div>\r\n <div class=\"sprite-wrap\">\r\n <div class=\"obstacle-barrier\">\r\n <div class=\"panel\"><\/div>\r\n <div class=\"foot left\"><\/div>\r\n <div class=\"foot right\"><\/div>\r\n <\/div>\r\n <\/div>\r\n `;\r\n }\r\n\r\n return `\r\n <div class=\"shadow\"><\/div>\r\n <div class=\"entity-tag\">Obstakel<\/div>\r\n <div class=\"sprite-wrap\">\r\n <div class=\"obstacle-vehicle\"><\/div>\r\n <\/div>\r\n `;\r\n }\r\n\r\n function getDifficulty() {\r\n const progress = clamp(state.elapsed \/ RACE_DURATION, 0, 1);\r\n\r\n return {\r\n progress: progress,\r\n \/\/ Hard mode: sneller, drukker en meer risico richting de finish.\r\n \/\/ De race blijft altijd 60 seconden en eindigt altijd met finish + resultaat.\r\n spawnEvery: clamp(690 - progress * 450, 240, 690),\r\n obstacleChance: clamp(0.52 + progress * 0.30, 0.52, 0.82),\r\n speed: 365 + progress * 330,\r\n doubleSpawnChance: progress < 0.20 ? 0.18 : progress < 0.55 ? 0.34 : 0.52,\r\n tripleSpawnChance: progress < 0.55 ? 0.00 : progress < 0.80 ? 0.12 : 0.24\r\n };\r\n }\r\n\r\n function createEntity(now, lane, isObstacle) {\r\n const itemKeys = Object.keys(ITEM_TYPES);\r\n const obstacleKeys = Object.keys(OBSTACLE_TYPES);\r\n const type = isObstacle ? randomItem(obstacleKeys) : randomItem(itemKeys);\r\n const id = \"e\" + now.toString(36) + Math.random().toString(36).slice(2);\r\n\r\n const node = document.createElement(\"div\");\r\n node.className = \"entity \" + (isObstacle ? \"obstacle\" : \"collectible\");\r\n node.dataset.id = id;\r\n node.innerHTML = isObstacle ? createObstacleMarkup(type) : createCollectibleMarkup(type);\r\n el.entityLayer.appendChild(node);\r\n\r\n state.entities.push({\r\n id,\r\n node,\r\n lane,\r\n y: -70,\r\n type,\r\n kind: isObstacle ? \"obstacle\" : \"collectible\",\r\n hit: false\r\n });\r\n }\r\n\r\n function spawnEntity(now) {\r\n const difficulty = getDifficulty();\r\n state.spawnEvery = difficulty.spawnEvery;\r\n\r\n if (now - state.lastSpawn < state.spawnEvery) return;\r\n state.lastSpawn = now;\r\n\r\n const allLanes = LANES.map(function (_, index) { return index; });\r\n const usedLanes = [];\r\n\r\n function pickFreeLane() {\r\n const options = allLanes.filter(function (lane) {\r\n return usedLanes.indexOf(lane) === -1;\r\n });\r\n const lane = randomItem(options.length ? options : allLanes);\r\n usedLanes.push(lane);\r\n return lane;\r\n }\r\n\r\n const primaryLane = pickFreeLane();\r\n const primaryIsObstacle = Math.random() < difficulty.obstacleChance;\r\n createEntity(now, primaryLane, primaryIsObstacle);\r\n\r\n \/\/ Vaker dubbele situaties: de speler moet echt kiezen in plaats van alleen reageren.\r\n if (Math.random() < difficulty.doubleSpawnChance) {\r\n const secondaryLane = pickFreeLane();\r\n const secondaryIsObstacle = Math.random() < (difficulty.progress > 0.55 ? 0.70 : 0.50);\r\n createEntity(now + 7, secondaryLane, secondaryIsObstacle);\r\n }\r\n\r\n \/\/ Laatste fase: soms drie objecten tegelijk. Nog steeds nooit game-over; wel uitdagend.\r\n if (Math.random() < difficulty.tripleSpawnChance) {\r\n const thirdLane = pickFreeLane();\r\n const thirdIsObstacle = Math.random() < 0.68;\r\n createEntity(now + 14, thirdLane, thirdIsObstacle);\r\n }\r\n }\r\n\r\n function removeEntity(index) {\r\n const ent = state.entities[index];\r\n if (ent && ent.node && ent.node.parentNode) ent.node.parentNode.removeChild(ent.node);\r\n state.entities.splice(index, 1);\r\n }\r\n\r\n function pop(text, type) {\r\n const node = document.createElement(\"div\");\r\n node.className = \"pop-text \" + type;\r\n node.textContent = text;\r\n el.effectLayer.appendChild(node);\r\n\r\n setTimeout(function () {\r\n if (node.parentNode) node.parentNode.removeChild(node);\r\n }, 760);\r\n }\r\n\r\n function collectBurst() {\r\n const burst = document.createElement(\"div\");\r\n burst.className = \"collect-burst\";\r\n burst.style.left = \"calc(\" + LANES[state.lane] + \"% - 9px)\";\r\n burst.style.bottom = \"130px\";\r\n el.effectLayer.appendChild(burst);\r\n\r\n setTimeout(function () {\r\n if (burst.parentNode) burst.parentNode.removeChild(burst);\r\n }, 460);\r\n }\r\n\r\n function smoke() {\r\n const node = document.createElement(\"div\");\r\n node.className = \"smoke\";\r\n node.style.left = \"calc(\" + LANES[state.lane] + \"% - 36px)\";\r\n node.style.bottom = \"118px\";\r\n el.effectLayer.appendChild(node);\r\n\r\n setTimeout(function () {\r\n if (node.parentNode) node.parentNode.removeChild(node);\r\n }, 620);\r\n }\r\n\r\n function impactRing() {\r\n const node = document.createElement(\"div\");\r\n node.className = \"impact-ring\";\r\n node.style.left = \"calc(\" + LANES[state.lane] + \"% - 11px)\";\r\n node.style.bottom = \"132px\";\r\n el.effectLayer.appendChild(node);\r\n\r\n setTimeout(function () {\r\n if (node.parentNode) node.parentNode.removeChild(node);\r\n }, 450);\r\n }\r\n\r\n function impactFlash() {\r\n el.impactFlash.classList.remove(\"active\");\r\n void el.impactFlash.offsetWidth;\r\n el.impactFlash.classList.add(\"active\");\r\n }\r\n\r\n function bump() {\r\n el.scene.classList.remove(\"shake\");\r\n el.iveco.classList.remove(\"hit\");\r\n\r\n void el.scene.offsetWidth;\r\n void el.iveco.offsetWidth;\r\n\r\n el.scene.classList.add(\"shake\");\r\n el.iveco.classList.add(\"hit\");\r\n }\r\n\r\n function collect(ent) {\r\n const item = ITEM_TYPES[ent.type];\r\n state.score += item.points;\r\n state.load.push(ent.type);\r\n\r\n pop(\"+\" + item.points + \" \" + item.label, \"good\");\r\n collectBurst();\r\n beep(\"collect\");\r\n updateHud();\r\n }\r\n\r\n function crash(ent) {\r\n const obs = OBSTACLE_TYPES[ent.type];\r\n state.hits += 1;\r\n state.damage = clamp(state.damage + obs.damage, 0, 100);\r\n state.slowUntil = performance.now() + obs.slow;\r\n\r\n const lost = Math.min(obs.lose, state.load.length);\r\n if (lost > 0) {\r\n state.load.splice(Math.max(0, state.load.length - lost), lost);\r\n }\r\n\r\n state.score = Math.max(0, state.score - lost * 25);\r\n\r\n pop(obs.text + (lost > 0 ? \" -\" + lost + \" lading\" : \"\"), \"bad\");\r\n impactFlash();\r\n smoke();\r\n impactRing();\r\n bump();\r\n beep(\"hit\");\r\n updateHud();\r\n }\r\n\r\n function updateEntities(dt) {\r\n const progress = clamp(state.elapsed \/ RACE_DURATION, 0, 1);\r\n const slowFactor = performance.now() < state.slowUntil ? 0.55 : 1;\r\n const difficulty = getDifficulty();\r\n const speed = difficulty.speed * slowFactor;\r\n state.speed = speed;\r\n\r\n state.laneOffset += speed * dt;\r\n el.road.style.setProperty(\"--lane-offset\", state.laneOffset + \"px\");\r\n\r\n for (let i = state.entities.length - 1; i >= 0; i--) {\r\n const ent = state.entities[i];\r\n ent.y += speed * dt;\r\n\r\n const laneX = LANES[ent.lane];\r\n ent.node.style.left = laneX + \"%\";\r\n ent.node.style.top = ent.y + \"px\";\r\n\r\n const scale = clamp(0.72 + (ent.y \/ el.scene.clientHeight) * 0.62, 0.72, 1.36);\r\n ent.node.style.transform = \"translate(-50%, -50%) scale(\" + scale + \")\";\r\n\r\n if (\r\n !ent.hit &&\r\n ent.lane === state.lane &&\r\n ent.y > el.scene.clientHeight - 178 &&\r\n ent.y < el.scene.clientHeight - 94\r\n ) {\r\n ent.hit = true;\r\n\r\n if (ent.kind === \"collectible\") {\r\n collect(ent);\r\n } else {\r\n crash(ent);\r\n }\r\n\r\n removeEntity(i);\r\n continue;\r\n }\r\n\r\n if (ent.y > el.scene.clientHeight + 90) {\r\n removeEntity(i);\r\n }\r\n }\r\n }\r\n\r\n function loop(now) {\r\n if (!state.running) return;\r\n\r\n const dt = Math.min(0.035, (now - state.lastFrame) \/ 1000);\r\n state.lastFrame = now;\r\n state.elapsed = now - state.startTime;\r\n\r\n if (state.elapsed > RACE_DURATION - 2200 && !state.finishStarted) {\r\n state.finishStarted = true;\r\n el.finishLine.classList.add(\"show\");\r\n }\r\n\r\n spawnEntity(now);\r\n updateEntities(dt);\r\n updateHud();\r\n\r\n if (state.elapsed >= RACE_DURATION && !state.crossingFinish) {\r\n \/\/ Vaste ontwerpregel: iedereen rijdt na 60 seconden over de finish.\r\n startFinishCrossing();\r\n return;\r\n }\r\n\r\n state.raf = requestAnimationFrame(loop);\r\n }\r\n\r\n function getRank(score, hits) {\r\n if (score >= 1400 && hits === 0) {\r\n return {\r\n badge: \"Schadevrije Materiaalbaas\",\r\n title: \"Schadevrije Materiaalbaas\",\r\n copy: \"Strak gereden, slim verzameld en niets laten slingeren. Jij snapt dat vakwerk begint voordat de klus start.\"\r\n };\r\n }\r\n\r\n if (score >= 1200) {\r\n return {\r\n badge: \"Laadbaklegende\",\r\n title: \"Laadbaklegende\",\r\n copy: \"Die laadbak kwam niet voor niets mee. Kegels, borden en hekken: jij pakt ze alsof je morgen al op de klus staat.\"\r\n };\r\n }\r\n\r\n if (score >= 850) {\r\n return {\r\n badge: \"Bordenbaas\",\r\n title: \"Bordenbaas\",\r\n copy: \"Sterke rit. Je liet wat obstakels liggen en nam vooral mee wat telt: materiaal, tempo en vakmanschap.\"\r\n };\r\n }\r\n\r\n if (score >= 500) {\r\n return {\r\n badge: \"Kegelkoning\",\r\n title: \"Kegelkoning\",\r\n copy: \"Je hebt de finish gehaald en de laadbak is niet leeg. Dat is al meer dan menig maandagmorgenrit.\"\r\n };\r\n }\r\n\r\n return {\r\n badge: \"Startende Wegheld\",\r\n title: \"Startende Wegheld\",\r\n copy: \"De finish is binnen. Nu nog wat extra materiaal verzamelen en je bent klaar voor de volgende ronde.\"\r\n };\r\n }\r\n\r\n function startFinishCrossing() {\r\n state.crossingFinish = true;\r\n state.running = false;\r\n state.finished = true;\r\n cancelAnimationFrame(state.raf);\r\n stopMusic();\r\n\r\n state.entities.forEach(function (ent) {\r\n if (ent.node && ent.node.parentNode) ent.node.parentNode.removeChild(ent.node);\r\n });\r\n state.entities = [];\r\n\r\n el.finishLine.classList.remove(\"show\");\r\n void el.finishLine.offsetWidth;\r\n el.finishLine.classList.add(\"show\", \"crossed\");\r\n\r\n pop(\"FINISH!\", \"good\");\r\n beep(\"finish\");\r\n\r\n setTimeout(function () {\r\n finishGame();\r\n }, FINISH_RESULT_DELAY);\r\n }\r\n\r\n function finishGame() {\r\n state.running = false;\r\n state.finished = true;\r\n cancelAnimationFrame(state.raf);\r\n stopMusic();\r\n\r\n const noDamageBonus = state.hits === 0 ? 350 : 0;\r\n const lowDamageBonus = state.hits > 0 && state.damage < 25 ? 150 : 0;\r\n const loadBonus = state.load.length * 3;\r\n const bonus = noDamageBonus + lowDamageBonus + loadBonus;\r\n\r\n state.score += bonus;\r\n\r\n const rank = getRank(state.score, state.hits);\r\n el.badgeText.textContent = \"Badge: \" + rank.badge;\r\n el.resultTitle.textContent = state.nickname + \", jij bent: \" + rank.title;\r\n el.resultCopy.textContent = rank.copy + \" Zin om dit in het echt te doen? Kom werken bij ons.\";\r\n el.finalScore.textContent = state.score;\r\n el.finalLoad.textContent = state.load.length;\r\n el.finalHits.textContent = state.hits;\r\n el.finalBonus.textContent = bonus;\r\n\r\n openResultModal();\r\n }\r\n\r\n function shareScore() {\r\n const rank = getRank(state.score, state.hits);\r\n const text = \"Ik scoorde \" + state.score + \" punten in de Vakmannen Race en werd '\" + rank.title + \"'. Denk jij dat je beter rijdt?\";\r\n\r\n if (navigator.clipboard && navigator.clipboard.writeText) {\r\n navigator.clipboard.writeText(text).catch(function () {});\r\n }\r\n\r\n if (navigator.share) {\r\n navigator.share({ title: \"Vakmannen Race\", text: text }).catch(function () {});\r\n }\r\n }\r\n\r\n el.soundButton.addEventListener(\"click\", toggleSound);\r\n el.startButton.addEventListener(\"click\", startGame);\r\n el.closeResultButton.addEventListener(\"click\", closeResultModal);\r\n el.shareButton.addEventListener(\"click\", shareScore);\r\n\r\n document.addEventListener(\"keydown\", function (event) {\r\n if (state.screen !== \"game\") return;\r\n\r\n if (event.key === \"ArrowLeft\") {\r\n event.preventDefault();\r\n laneLeft();\r\n }\r\n\r\n if (event.key === \"ArrowRight\") {\r\n event.preventDefault();\r\n laneRight();\r\n }\r\n }, { passive: false });\r\n\r\n el.scene.addEventListener(\"touchstart\", function (event) {\r\n const t = event.changedTouches[0];\r\n state.touchStart = { x: t.clientX, y: t.clientY };\r\n }, { passive: true });\r\n\r\n el.scene.addEventListener(\"touchend\", function (event) {\r\n if (!state.touchStart || state.screen !== \"game\") return;\r\n\r\n const t = event.changedTouches[0];\r\n const dx = t.clientX - state.touchStart.x;\r\n state.touchStart = null;\r\n\r\n if (Math.abs(dx) < 28) return;\r\n\r\n if (dx < 0) laneLeft();\r\n else laneRight();\r\n }, { passive: true });\r\n\r\n window.addEventListener(\"beforeunload\", function () {\r\n cancelAnimationFrame(state.raf);\r\n stopMusic();\r\n });\r\n\r\n updateVanPosition();\r\n updateHud();\r\n <\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\n <div class=\"xs_social_share_widget xs_share_url after_content \t\tmain_content wslu-style-1 wslu-share-box-shaped wslu-fill-colored wslu-none wslu-share-horizontal wslu-theme-font-no wslu-main_content\">\n\n\t\t\n <ul>\n\t\t\t <\/ul>\n <\/div> \n","protected":false},"excerpt":{"rendered":"<p>Vakmannen Race | Ramudden Ramudden Vakmannen Race \ud83d\udd0a Muziek \ud83c\udfc1 Vakmannen Race Laad je bus. Haal de finish. Stuur de Iveco Daily […]<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"content-type":"","postBodyCss":"","postBodyMargin":[],"postBodyPadding":[],"postBodyBackground":{"backgroundType":"classic","gradient":""},"_uicore_block_fonts":"","footnotes":""},"class_list":["post-3321","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/ramuddensmartmobility.com\/nn\/wp-json\/wp\/v2\/pages\/3321","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ramuddensmartmobility.com\/nn\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/ramuddensmartmobility.com\/nn\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/ramuddensmartmobility.com\/nn\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/ramuddensmartmobility.com\/nn\/wp-json\/wp\/v2\/comments?post=3321"}],"version-history":[{"count":6,"href":"https:\/\/ramuddensmartmobility.com\/nn\/wp-json\/wp\/v2\/pages\/3321\/revisions"}],"predecessor-version":[{"id":3328,"href":"https:\/\/ramuddensmartmobility.com\/nn\/wp-json\/wp\/v2\/pages\/3321\/revisions\/3328"}],"wp:attachment":[{"href":"https:\/\/ramuddensmartmobility.com\/nn\/wp-json\/wp\/v2\/media?parent=3321"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}