
/* Keep the intro within the visible phone screen, independent of page length. */
@media(max-width:600px){.splash{position:fixed;inset:0;height:100dvh;padding-top:max(32px,env(safe-area-inset-top));z-index:1000}.splash .drive-stage{bottom:140px;top:auto;height:190px}.splash .hilux-drive{width:min(280px,78vw);left:calc(50% - min(140px,39vw));animation:phone-truck 3s ease-out both}.splash h1{font-size:32px}.scene{min-width:0}.module-page{overflow-wrap:anywhere}.module-page input,.module-page select,.module-page textarea{max-width:100%;min-width:0}}
@keyframes phone-truck{from{transform:translateX(-70vw)}55%,100%{transform:translateX(0)}}
@media(max-height:650px) and (orientation:portrait){.splash .logo-pad{width:135px}.splash h1{margin:12px 0 8px}.splash .drive-stage{bottom:115px;height:160px}.splash .hilux-drive{height:150px}}
.phone-portrait-note{display:none}
@media(orientation:landscape) and (max-height:500px) and (pointer:coarse){body:has(input:focus,textarea:focus,select:focus) .phone-portrait-note{display:none}.phone-portrait-note{position:fixed;inset:0;z-index:2147483647;background:#eee8dc;color:#253b30;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:24px;gap:14px;font-size:20px}.phone-portrait-note span{font-size:48px}}

/* The same coffee artwork and steam stay visible during automatic sign-in. */
.splash>.splash-coffee{position:absolute;bottom:120px;left:50%;width:132px;height:176px;flex:none;margin:0;z-index:2;transform:translateX(-50%) scale(.85);transform-origin:50% 100%}
.splash>.splash-coffee img{width:109.333px;height:164px;left:11.333px;object-fit:fill;clip-path:url(#coffee-silhouette);mix-blend-mode:normal}
.splash>.splash-coffee .coffee-vapor{left:5px;width:122px;height:176px}
.splash .drive-stage{bottom:275px;height:175px}
.splash.hide .steam-clouds i{animation-play-state:paused}
@media(max-height:700px){.splash{padding-top:max(20px,env(safe-area-inset-top))}.splash .logo-pad{width:125px}.splash h1{font-size:27px;margin:12px 0 8px}.splash .drive-stage{bottom:250px;height:140px}.splash .hilux-drive{height:135px}.splash>.splash-coffee{bottom:113px;transform:translateX(-50%) scale(.72)}}

/* Clip in the image's own SVG coordinate space, independent of hidden screen/HTML image clip support. */
.coffee-stove>.coffee-product{position:absolute;top:12px;left:11.333px;width:109.333px;height:164px;overflow:hidden;display:block}

/* Transparent artwork sits directly on the landscape; a small ground shadow anchors it. */
.coffee-stove>.coffee-product{background:transparent;filter:drop-shadow(0 2px 1px #241b152e)}
.splash>.splash-coffee:after{content:"";position:absolute;left:24px;bottom:5px;width:58px;height:6px;border-radius:50%;background:#231a1540;filter:blur(3px);z-index:-1}

/* Safety message uses the existing caption space; truck and stove remain intact. */
.splash .safety-caption{bottom:100px;left:5%;width:90%;font-size:13px;line-height:1.45;text-align:center;text-shadow:0 1px 5px #000;letter-spacing:0}
.splash .loader:after{animation-duration:6s}
.safety-game{max-width:640px;margin:auto;color:#29372b}.safety-kicker{font-size:12px;color:#637952;font-weight:700}.safety-game h1{margin:10px 0}.safety-scene{overflow:hidden;border-radius:22px;background:#f8f4ea;margin:22px 0;border:1px solid #dfdacd}.safety-scene svg{width:100%;display:block}.safety-scene>span{display:block;padding:12px 16px;font-size:13px}.safety-brief{padding:16px;border-radius:16px;background:#edf0e4;margin-bottom:22px}.safety-brief p{margin-bottom:0;line-height:1.7}.safety-game textarea{width:100%;box-sizing:border-box;margin:12px 0;border:1px solid #bdc6b3;border-radius:16px;background:#fffdf7;color:#29372b;font:inherit;padding:14px;resize:vertical}.safety-check{display:flex;gap:12px;align-items:flex-start;background:#fffdf7;border:1px solid #dfe3d5;border-radius:15px;padding:15px;margin:10px 0}.safety-check input{width:22px;height:22px;flex-shrink:0;accent-color:#537048}.safety-check small{display:block;margin-top:7px;line-height:1.6}.safety-result{padding:20px;border-radius:16px;background:#e8eddc;font-weight:700;line-height:1.8}#safety-review{margin-top:28px}

.safety-scene-art{display:block;width:100%;height:auto}.safety-scene{background:#e8dcc7}.safety-game{max-width:850px}

/* Main safety message replaces the splash title, above the original truck and coffee. */
.splash h1.safety-caption{position:relative;inset:auto;width:90%;max-width:390px;margin:20px auto 10px;font-size:clamp(25px,7vw,34px);line-height:1.3;font-weight:800;text-align:center;color:#fff9ee;text-shadow:0 2px 12px #26332299;text-wrap:balance;letter-spacing:0}
@media(max-height:700px){.splash h1.safety-caption{font-size:25px;margin:12px auto 8px;line-height:1.25}}

.safety-next{display:block;width:100%;margin:16px 0}.safety-wind-scene{position:relative}.safety-wind-alert{position:absolute;inset:auto 4% 50px;background:#fff8e9f2;border:2px solid #bf692f;border-radius:18px;padding:14px;text-align:center;box-shadow:0 5px 18px #34271833}.safety-wind-alert span,.safety-wind-alert strong,.safety-wind-alert b{display:block}.safety-wind-alert span{font-size:12px;color:#805430}.safety-wind-alert strong{font-size:clamp(20px,5vw,32px);color:#953923;margin:5px 0}.safety-wind-lines{position:absolute;inset:0;overflow:hidden;pointer-events:none}.safety-wind-lines i{position:absolute;left:-40%;top:18%;width:32%;height:4px;border-radius:50%;background:#fff9;animation:safety-gust 2s linear infinite}.safety-wind-lines i:nth-child(2){top:33%;animation-delay:.5s}.safety-wind-lines i:nth-child(3){top:48%;animation-delay:1.1s}.safety-wind-lines i:nth-child(4){top:10%;animation-delay:1.5s}.safety-wind-choice{display:block;width:100%;padding:16px;margin:10px 0;border:1px solid #c6ccb9;border-radius:15px;background:#fffdf5;color:#34432e;font:inherit;text-align:right}.safety-wind-choice.safety-correct{background:#dcebd0;border-color:#537044}.safety-wind-choice:disabled{opacity:.7}.safety-wind-choice.safety-correct:disabled{opacity:1}@keyframes safety-gust{to{transform:translateX(460%)}}@media(prefers-reduced-motion:reduce){.safety-wind-lines i{animation:none;left:10%;width:65%}}

/* Game weather overlay; original illustration is unchanged. */
.safety-wind-lines{z-index:1;background:linear-gradient(110deg,#edcf9b15,transparent 45%,#e5bd8038)}.safety-wind-alert{z-index:2}.safety-wind-lines i{height:3px;width:46%;background:linear-gradient(90deg,transparent,#fffbeac9,transparent);animation-duration:1.15s;transform:rotate(-5deg)}.safety-dust-cloud{position:absolute;left:-70%;width:85%;height:26%;bottom:15%;border-radius:50%;background:radial-gradient(ellipse,#e7c38cad 0%,#dcb47b70 35%,transparent 70%);filter:blur(7px);animation:safety-dust-sweep 3s linear infinite}.safety-dust-cloud.dust-two{bottom:28%;height:18%;animation-delay:-1.1s;animation-duration:2.5s}.safety-dust-cloud.dust-three{bottom:6%;height:34%;animation-delay:-2.1s;animation-duration:3.5s}.safety-wind-debris{position:absolute;left:-8%;top:var(--gust-y);width:12px;height:4px;border-radius:80% 0;background:#8c754caa;animation:safety-debris-flight var(--gust-duration) linear var(--gust-delay) infinite}@keyframes safety-dust-sweep{from{transform:translateX(0) scale(.85);opacity:.25}30%{opacity:.85}to{transform:translateX(220%) scale(1.3);opacity:.1}}@keyframes safety-debris-flight{from{left:-8%;transform:rotate(-20deg)}to{left:108%;transform:translateY(-22px) rotate(100deg)}}@media(prefers-reduced-motion:reduce){.safety-dust-cloud,.safety-wind-debris{animation:none}.safety-dust-cloud{left:10%;opacity:.55}.safety-wind-debris{left:45%}}
.hub-option[data-module="safety"] .hub-label strong,.safety-hub>h1{color:#b91c28}
.hub-option[data-module="safety"] .hub-icon{background:#b91c28;color:#fff}
.safety-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:24px 0}
.safety-option{display:block;text-decoration:none;text-align:right;cursor:pointer;font:inherit;color:#293d32;background:#fffdf7;border:1px solid #d8ddd3;border-radius:23px;padding:26px 22px;min-height:210px}
.safety-option>span{font-size:36px}.safety-option h2{font-size:24px;margin:16px 0 8px}.safety-option p{font-size:14px;line-height:1.7}.safety-option b{color:#9f2430;font-size:14px}.safety-option:focus-visible{outline:3px solid #9f2430;outline-offset:4px}
@media(max-width:480px){.safety-options{gap:12px}.safety-option{padding:22px 15px;min-height:215px}.safety-option h2{font-size:22px}}
