/*! © حبر الفرح habralfarah.com — جميع الحقوق محفوظة. يُمنع النسخ أو إعادة الاستخدام. */
:root{--bg:#eef4fa;--bg-2:#dbe8f5;--surface:#ffffff;--surface-2:#f3f7fc;--text:#1b2333;--muted:#5c6a80;--accent:#e63946;--accent-2:#ffcf3f;--accent-ink:#ffffff;--line:rgba(27, 35, 51, .16);--line-soft:rgba(27, 35, 51, .08);--car:#e63946;--car-dark:#9c2630}body.racing{background:linear-gradient(180deg,var(--bg-2),var(--bg) 520px),var(--bg)}.r-intro{padding:0;background:#5aa9e6;display:grid;place-items:center}.r-fill{position:absolute;inset:-30px;background:#5aa9e6 url(art/bg.webp) center 70%/cover;filter:blur(22px) saturate(1.1);transform:scale(1.06)}.r-stage{position:relative;width:min(100vw,100dvh * .6);height:100dvh;overflow:hidden;background:#5aa9e6}.r-world{position:absolute;left:0;top:0;width:768px;height:1664px}.r-bg{position:absolute;inset:0;width:100%;height:100%}.r-car{position:absolute;left:0;top:0;width:0;height:0;z-index:3;will-change:transform,opacity;animation:rIdle .22s ease-in-out infinite alternate}.r-car-in{position:absolute;left:0;top:0;width:var(--cw,300px);transform:translate(-50%,-78%);transform-origin:50% 78%}.r-car-in img{position:absolute;left:0;top:0;width:100%;height:auto;opacity:0;transition:opacity .18s ease;filter:drop-shadow(0 10px 6px rgba(0,0,0,.28))}.r-car-in img:first-child{position:relative}.r-car-in img.on{opacity:1}.r-car-in.pop{animation:rPop .45s var(--spring)}@keyframes rIdle{to{translate:0 -1.2px}}@keyframes rPop{0%{transform:translate(-50%,-78%) scale(.92)}60%{transform:translate(-50%,-78%) scale(1.05)}}.r-intro:not([data-phase=pick]) .r-car{animation-duration:.09s}.r-puffs i{position:absolute;border-radius:50%;background:radial-gradient(closest-side,rgba(235,235,235,.85),rgba(235,235,235,0));animation:rPuff .9s ease-out forwards;z-index:2;pointer-events:none}@keyframes rPuff{from{opacity:.9;transform:translate(-50%,-50%) scale(.5)}to{opacity:0;transform:translate(-50%,-80%) scale(2.4)}}.r-streaks{position:absolute;inset:0;z-index:4;pointer-events:none;opacity:0;transition:opacity .35s;background:repeating-conic-gradient(from 0deg at 50.8% 42.2%,rgba(255,255,255,.7) 0 .5deg,transparent .5deg 5deg);-webkit-mask:radial-gradient(circle at 50.8% 42.2%,transparent 20%,#000 75%);mask:radial-gradient(circle at 50.8% 42.2%,transparent 20%,#000 75%)}.r-intro[data-phase=race] .r-streaks{opacity:.4;animation:rStreak .5s linear infinite alternate}@keyframes rStreak{to{transform:scale(1.06)}}.r-head{position:absolute;z-index:6;top:max(26px,calc(env(safe-area-inset-top) + 16px));inset-inline:16px;text-align:center;transition:opacity .3s,transform .3s}.r-hello{margin:0;font:700 16px/1.5 var(--f-ui);color:#fff;text-shadow:0 1px 8px rgba(10,50,90,.55)}.r-title{margin:2px 0 0;font:900 clamp(38px, 11.5vw, 48px)/1.2 var(--f-display);color:#fff;text-shadow:0 3px 0 #1b2f66,0 8px 22px rgba(10,40,90,.35)}.r-intro:not([data-phase=pick]) .r-head{opacity:0;transform:translateY(-12px)}.r-lights{position:absolute;z-index:7;top:max(30px,calc(env(safe-area-inset-top) + 18px));inset-inline:0;display:grid;justify-items:center;gap:6px;opacity:0;transform:translateY(-20px);transition:opacity .3s,transform .4s var(--spring);pointer-events:none}.r-intro:not([data-phase=pick]) .r-lights{opacity:1;transform:none}.r-intro[data-phase=podium] .r-lights,.r-intro[data-phase=race] .r-lights{opacity:0;transition-delay:.5s}.r-gantry{display:flex;gap:12px;padding:10px 16px;border-radius:18px;background:#1b2333;box-shadow:0 10px 26px rgba(0,0,0,.35),inset 0 0 0 3px #343e55}.r-gantry i{width:38px;height:38px;border-radius:50%;background:#3a2226;box-shadow:inset 0 -4px 0 rgba(0,0,0,.35);transition:background-color .15s,box-shadow .15s}.r-gantry i.on{background:#ff3b3b;box-shadow:0 0 18px #ff3b3b,inset 0 -4px 0 rgba(0,0,0,.2)}.r-intro.is-green .r-gantry i{background:#3ddc6f;box-shadow:0 0 20px #3ddc6f,inset 0 -4px 0 rgba(0,0,0,.2)}.r-go-word{margin:0;min-height:1.2em;font:900 38px/1.2 var(--f-display);color:#fff;text-shadow:0 3px 0 #1b2333,0 6px 18px rgba(0,0,0,.3)}.r-panel{position:absolute;z-index:8;inset-inline:14px;bottom:max(86px,calc(env(safe-area-inset-bottom) + 78px));max-width:420px;margin-inline:auto;padding:10px 14px 12px;border-radius:22px;background:rgba(255,255,255,.95);box-shadow:0 12px 30px rgba(0,0,0,.25);text-align:center;transition:opacity .3s,transform .4s var(--ease)}.r-intro:not([data-phase=pick]) .r-panel{opacity:0;transform:translateY(30px);pointer-events:none}.r-hint{margin:0 0 8px;font:700 15px/1.45 var(--f-ui);color:var(--text);text-wrap:balance}.r-row{display:flex;align-items:center;justify-content:center;gap:12px}.r-swatches{display:flex;gap:8px}.r-sw{width:44px;height:44px;border-radius:50%;border:3px solid #fff;background:var(--c);cursor:pointer;padding:0;box-shadow:0 0 0 2px rgba(27,35,51,.18),0 4px 10px rgba(0,0,0,.18);transition:transform .2s var(--spring),box-shadow .2s}.r-sw[aria-checked=true]{transform:scale(1.14);box-shadow:0 0 0 3px #1b2333,0 4px 12px rgba(0,0,0,.25)}.r-sw:focus-visible{outline:3px solid #1b2333;outline-offset:4px}.r-go{min-height:50px;padding:8px 26px;border:0;border-radius:999px;cursor:pointer;touch-action:manipulation;background:#2fb36d;color:#fff;font:900 21px/1.2 var(--f-display);box-shadow:0 5px 0 #1e7d4b,0 10px 20px rgba(0,0,0,.2);animation:rGoPulse 1.6s ease-in-out infinite}.r-go:active{transform:translateY(3px);box-shadow:0 2px 0 #1e7d4b}.r-go:focus-visible{outline:3px solid #1b2333;outline-offset:4px}@keyframes rGoPulse{50%{transform:scale(1.06)}}.r-flags{position:absolute;z-index:9;left:50%;top:34%;width:min(70%,300px);height:auto;opacity:0;transform:translate(-50%,-50%) scale(.3) rotate(-14deg);pointer-events:none;filter:drop-shadow(0 12px 14px rgba(0,0,0,.3))}.r-intro.is-finish .r-flags{animation:rFlags 1.6s var(--ease) forwards}@keyframes rFlags{0%{opacity:0;transform:translate(-50%,-50%) scale(.3) rotate(-14deg)}25%{opacity:1;transform:translate(-50%,-50%) scale(1.08) rotate(5deg)}40%{transform:translate(-50%,-50%) scale(1) rotate(-4deg)}60%{transform:translate(-50%,-50%) scale(1.03) rotate(3deg);opacity:1}100%{opacity:0;transform:translate(-50%,-62%) scale(1.05) rotate(0)}}.r-confetti{position:absolute;inset:0;z-index:10;pointer-events:none;overflow:hidden}.r-confetti i{position:absolute;top:-20px;width:9px;height:15px;border-radius:2px;animation:rFall linear forwards}@keyframes rFall{to{transform:translate3d(var(--dx),110dvh,0) rotate(var(--rot))}}.r-podium{position:absolute;z-index:11;inset:0;display:grid;align-content:center;justify-items:center;padding:18px 16px;text-align:center;color:#fff;background:radial-gradient(circle at 50% 40%,rgba(20,60,130,.55),rgba(8,22,60,.88));opacity:0;pointer-events:none;transition:opacity .5s}.r-intro.is-podium .r-podium{opacity:1}.r-pod-kicker{margin:0;padding:4px 16px;border-radius:999px;background:var(--accent-2);color:#1b2333;font:800 15px/1.5 var(--f-ui);transform:translateY(-14px);opacity:0;transition:.6s var(--spring) .2s}.r-pod-name{margin:10px 0 0;font:900 clamp(52px, 17vw, 72px)/1.2 var(--f-display);color:#fff;text-shadow:0 4px 0 rgba(0,0,0,.25),0 10px 26px rgba(0,0,0,.4);overflow-wrap:anywhere;transform:scale(.7);opacity:0;transition:.7s var(--spring) .35s}.r-pod-age{margin:0;font:700 18px/1.5 var(--f-ui);color:#dbe8ff;opacity:0;transition:opacity .6s .6s}.r-intro.is-podium .r-pod-kicker,.r-intro.is-podium .r-pod-name{opacity:1;transform:none}.r-intro.is-podium .r-pod-age{opacity:1}.r-pod-stage{position:relative;width:min(100%,380px);margin-top:8px}.r-pod-img{position:relative;z-index:2;width:100%;height:auto;transform:translateY(40px);opacity:0;transition:.8s var(--spring) .5s;filter:drop-shadow(0 16px 18px rgba(0,0,0,.4))}.r-intro.is-podium .r-pod-img{transform:none;opacity:1}.r-pod-box{position:relative;padding-top:30%}.r-pod-car{position:absolute;z-index:3;left:50%;top:20%;width:38%;transform:translate(-50%,24%) scale(.4);transform-origin:50% 80%;opacity:0;transition:.8s var(--spring) .9s}.r-pod-car img{display:block;width:100%;height:auto;filter:drop-shadow(0 8px 6px rgba(0,0,0,.35))}.r-intro.is-podium .r-pod-car{opacity:1;transform:translate(-50%,0) scale(1)}.r-pod-num{position:absolute;z-index:4;left:35%;width:30%;top:63%;margin:0;display:grid;justify-items:center;line-height:1;color:#6b4a00}.r-pod-num small{font:800 11.5px/1.2 var(--f-ui)}.r-pod-num b{font:900 clamp(36px, 11vw, 52px)/1.05 var(--f-display);color:#fff;text-shadow:0 3px 0 #a87400,0 0 12px rgba(255,255,255,.4)}.racing .card-frame{border:0;padding-top:0;overflow:hidden;box-shadow:0 22px 46px rgba(27,35,51,.16)}.racing .card-hero{display:block;margin:0 -20px 16px;padding:22px 0 14px;position:relative;background:linear-gradient(180deg,#4b5163 0 70%,#3c4152 70%)}.racing .card-hero::after,.racing .card-hero::before{content:'';position:absolute;inset-inline:0;height:12px;background:repeating-conic-gradient(#1b2333 0 25%,#fff 0 50%) 0 0/12px 12px}.racing .card-hero::before{top:0}.racing .card-hero::after{bottom:0}.racing .card-hero img{width:170px;height:auto;margin:-26px auto -40px;filter:drop-shadow(0 8px 6px rgba(0,0,0,.35))}.racing .kid{color:var(--text)}.racing .age-badge{background:var(--accent-2)}.racing .facts .fl{display:block;font:700 12px/1.3 var(--f-ui);color:var(--accent)}.racing .cd{background:#1b2333;border-color:#343e55}.racing .cd b{color:var(--accent-2)}.racing .cd span{color:#b9c2cf}.racing .h2::after{height:8px;width:56px;background:repeating-conic-gradient(#1b2333 0 25%,#fff 0 50%) 0 0/8px 8px;border:1px solid #1b2333}@media (prefers-reduced-motion:reduce){.r-car,.r-go,.r-pod-car,.r-streaks{animation:none!important}.r-car-in img,.r-pod-age,.r-pod-car,.r-pod-img,.r-pod-kicker,.r-pod-name,.r-podium{transition-duration:.01s!important;transition-delay:0s!important}.r-flags{display:none}}