/* My Carz flow: portrait artwork coordinates scale together. */
body{background:#030b14}.carz-app{position:relative;width:min(100%,56.25vh);width:min(100%,56.25dvh);height:min(100vh,177.777778vw);height:min(100dvh,177.777778vw);margin:auto;overflow:hidden;isolation:isolate;background:#081521;color:#fff;font-family:system-ui,sans-serif;container-type:inline-size}.carz-app button{cursor:pointer;color:inherit;font-weight:800}.carz-app button:disabled{cursor:wait;opacity:.45}.carz-app a{color:#dcecff;font-size:12px;text-shadow:0 2px 5px #000}.view{position:absolute;inset:0;overflow:hidden}.art-button{display:block;padding:0;border:0;background:none;box-shadow:none;line-height:0;transition:transform .18s,filter .18s}.art-button img{display:block;width:100%;height:auto}.art-button:active{transform:scale(.97)}.art-button:hover{filter:brightness(1.08)}
.opening{background:url('../my-carz-game-assets/page-1/page-1-bg.webp') center/100% 100%}.opening-next{position:absolute;left:19%;top:79.3%;width:65%}.carz-loader{position:absolute;bottom:22%;left:12%;width:76%;padding:10px;border-radius:12px;background:#03101cea;font-size:clamp(10px,2.4cqw,14px)}.carz-loader label{display:flex;justify-content:space-between}.carz-loader progress{display:block;width:100%;height:14px;accent-color:#ffd024}.carz-loader p{margin:5px 0;line-height:1.3}.carz-loader button,.slide-nav button{border:1px solid #ffd024;border-radius:7px;padding:8px;background:#10293e}
.garage-view{padding:3% 6% max(3%,env(safe-area-inset-bottom));display:flex;flex-direction:column;align-items:center;gap:1.1%;background:linear-gradient(#0002,#0002),url('../my-carz-game-assets/page-4/page-4-bg.webp') center/100% 100%}.garage-view h1{font-family:Race,Impact,sans-serif;font-size:clamp(22px,9cqw,50px);font-style:italic;margin:1% 0;color:#ffe37e;letter-spacing:2px}.level-label,.garage-view>p{font-size:clamp(11px,2.8cqw,16px);margin:0;text-shadow:0 2px 4px #000}.showcase-car{width:87%;height:33%;object-fit:contain;filter:drop-shadow(0 14px 10px #0009);animation:carz-car-in .55s cubic-bezier(.16,1,.3,1)}.car-name{font-size:clamp(20px,6cqw,36px);margin:0;text-shadow:0 3px 5px #000}
.carz-carousel{display:flex;gap:8px;width:100%;height:17%;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:thin;padding:7px 2px;flex-shrink:0}.carz-card{flex:0 0 31%;scroll-snap-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;border:1px solid #617481;border-radius:12px;background:#07121cce;padding:5px;font-size:clamp(10px,2.6cqw,15px)}.carz-card img{width:100%;height:58%;object-fit:contain;min-height:0}.carz-card small{font-size:9px;color:#a9c3cd}.carz-card:disabled{opacity:.5;cursor:default}.carz-card[aria-pressed=true]{border:2px solid #65ffce;box-shadow:0 0 12px #3fffc66b}.carz-card:disabled img{filter:grayscale(1)}
.carz-paints{width:100%;padding:5px 0;border:0;margin:0}.carz-paints legend{font-size:10px;color:#d5e4e9;text-align:center}.carz-paints>div{display:flex;justify-content:center;gap:3%;flex-wrap:wrap}.carz-paints button{width:6%;aspect-ratio:1;border-radius:50%;padding:0;border:1px solid #ffffff80;background:var(--paint);min-height:0}.carz-paints button[aria-pressed=true]{outline:2px solid #6affd2;outline-offset:2px}.garage-view>.art-button{width:82%;margin-top:auto}.garage-view>a{margin-top:1%}.returning-actions{display:flex;gap:6px;width:85%;max-height:7%}.returning-actions .art-button{width:50%}.returning-actions img{height:100%;object-fit:contain}.demo-view{background:#07121e}.demo-view>img{width:100%;height:100%;object-fit:contain}.slide-nav{position:absolute;left:4%;right:4%;bottom:max(3%,env(safe-area-inset-bottom));display:flex;align-items:center;justify-content:space-between;background:#03111ef2;border-radius:12px;padding:9px;gap:8px}.slide-nav button{font-size:clamp(11px,3cqw,16px)}.slide-nav span{font-size:12px;white-space:nowrap}
.race-view{background:#233644}.race-world{position:absolute;inset:0;display:flex}.carz-track{position:relative;width:76%;height:100%;overflow:hidden;touch-action:none}.carz-scenery{width:12%;height:100%;background-size:100% auto;background-repeat:repeat-y;background-position:center var(--scenery-offset,0px)}.carz-scenery.left{background-image:var(--left-art,url('../my-carz-game-assets/page-5/1-vintage-bg-left.webp'))}.carz-scenery.right{background-image:var(--right-art,url('../my-carz-game-assets/page-5/1-vintage-bg-right.webp'))}
.carz-hud{position:absolute;z-index:5;top:max(1%,env(safe-area-inset-top));left:2%;right:2%;display:flex;align-items:center;gap:5px;padding:0;background:none;border:0}.carz-hud button{width:9%;min-height:30px;background:#061a2f;border:1px solid #4ec9fa;border-radius:5px;font-size:22px;padding:0}.carz-hud>span{font-size:clamp(9px,2.5cqw,14px);color:#ffe27b;white-space:nowrap}.carz-hud #diamonds{margin-left:auto;display:flex;align-items:center;gap:3px;padding:6px;background:#031528;border:1px solid #4ec9fa;border-radius:8px;font-size:clamp(10px,2.8cqw,16px)}#diamonds img{width:clamp(12px,4cqw,24px);height:22px;object-fit:contain;opacity:.22;filter:grayscale(1)}#diamonds img.earned{opacity:1;filter:none;animation:carz-diamond .5s ease-out}
.carz-question{position:absolute;left:2%;right:2%;top:8%;z-index:4;min-height:12%;padding:4% 5%;display:flex;flex-direction:column;justify-content:center;border:2px solid #3fceff;border-radius:14px;background:linear-gradient(130deg,#061c30f5,#03101ff5);box-shadow:0 4px 10px #0006}.carz-question h2{font-size:clamp(15px,4.2cqw,25px);margin:0;text-align:center;line-height:1.25}.time-bar{height:3px;background:#fff2;margin-top:8px}.time-bar i{display:block;width:100%;height:100%;background:#ffe575;transform-origin:left}
.tunnels{position:absolute;left:0;width:100%;height:22%;top:0;z-index:3;display:flex;will-change:transform}.tunnels img{width:50%;height:100%;object-fit:fill}.race-car{position:absolute;z-index:2;bottom:8%;width:26%;height:20%;object-fit:contain;left:0;will-change:transform;filter:drop-shadow(0 6px 5px #000a)}.race-car.upgrade-entry{animation:carz-upgrade-entry 1.1s cubic-bezier(.16,1,.3,1)}.lane-arrow{position:absolute;bottom:32%;left:0;width:50%;height:17%;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:space-around;--arrow:#52ff4d;transition:transform .16s}.lane-arrow i{width:33%;height:24%;background:var(--arrow);clip-path:polygon(50% 0,100% 55%,100% 100%,50% 45%,0 100%,0 55%);filter:drop-shadow(0 0 10px var(--arrow));animation:carz-arrow 1s infinite}.lane-arrow i:nth-child(2){animation-delay:.15s}.lane-arrow i:nth-child(3){animation-delay:.3s}
.carz-countdown{position:absolute;inset:25% 5%;z-index:6;display:grid;place-items:center;font-family:Race,Impact,sans-serif;font-size:clamp(42px,18cqw,100px);text-shadow:0 8px 15px #000;color:#ffe16b;pointer-events:none}.carz-countdown.pulse{animation:carz-count-in .75s ease-out}.carz-feedback{position:absolute;top:40%;width:100%;text-align:center;font-weight:900;font-size:clamp(20px,7cqw,40px);z-index:7;color:white;text-shadow:0 3px 10px #000;animation:carz-feedback-in .4s ease-out}
.carz-modal{position:absolute;inset:0;z-index:20;background:#03101cdd;backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);display:flex;align-items:center;justify-content:center;padding:5%}.carz-modal-card{width:100%;max-height:96%;overflow-y:auto;display:flex;align-items:center;flex-direction:column;gap:10px;padding:4%;border:1px solid #3ebff1;border-radius:18px;background:linear-gradient(135deg,#132e43,#051321);text-align:center;animation:carz-modal-in .38s cubic-bezier(.16,1,.3,1)}.carz-modal-card h2{font-family:Race,Impact,sans-serif;font-size:clamp(24px,7cqw,42px);margin:0;color:#ffe077}.carz-modal-card p{margin:0;font-size:clamp(13px,3.5cqw,20px);line-height:1.4}.modal-art{max-width:95%;max-height:26vh;object-fit:contain}.carz-modal button:not(.art-button){padding:10px 16px;border-radius:10px;border:1px solid #ffd350;background:#183d56;font-size:clamp(13px,3.5cqw,20px)}#modal-actions{display:flex;flex-direction:column;align-items:center;gap:8px;width:100%}#modal-actions .art-button{width:85%}.reward-car{height:24vh;width:85%;object-fit:contain;filter:drop-shadow(0 8px 10px #39dfff55)}.reward-car.rotating{animation:carz-turntable 4s linear infinite}.scratch-area{position:relative;width:80%;aspect-ratio:1;flex-shrink:0}.scratch-area>img,.scratch-area canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;border-radius:15px}.scratch-area canvas{touch-action:none}#next-car-info{font-size:clamp(12px,3cqw,17px);color:#c5f5ff}
.reset-notice{position:absolute;top:23%;left:2%;right:2%;z-index:25;background:#ffe330;color:#111;border-radius:8px;padding:8px;font-size:clamp(11px,3cqw,17px);font-weight:800;text-align:center;pointer-events:none}.portrait-guide{position:absolute;inset:0;z-index:50;display:flex;flex-direction:column;justify-content:center;align-items:center;background:#061727f5;text-align:center}.save-error{position:absolute;bottom:0;left:0;right:0;z-index:60;margin:0;background:#811c28;padding:12px;font-size:12px}.carz-app .celebration-confetti{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center bottom;z-index:10;pointer-events:none}.diamond-flight{position:absolute;width:10%;z-index:15;pointer-events:none;animation:carz-diamond-flight .75s cubic-bezier(.2,.7,.2,1) forwards}.crash-effect{position:absolute;z-index:8;left:calc(var(--crash-x) - 15%);bottom:12%;width:30%;aspect-ratio:1;background:radial-gradient(circle,#fff 5%,#ffe775 15%,#ff6113 28%,#262125 52%,transparent 70%);animation:carz-crash .8s ease-out forwards}.carz-app.wrong-impact{animation:race-impact .9s ease-out}.carz-app.wrong-impact:after{content:'';position:absolute;inset:0;border:4px solid #ff3045;background:#ff183533;z-index:18;pointer-events:none;animation:wrong-answer-flash .9s linear forwards}
@keyframes carz-arrow{0%,100%{opacity:.3;transform:translateY(8%)}50%{opacity:1;transform:translateY(-8%)}}@keyframes carz-count-in{from{opacity:0;transform:scale(1.4)}30%{opacity:1}to{transform:scale(1);opacity:1}}@keyframes carz-feedback-in{from{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}@keyframes carz-modal-in{from{opacity:0;transform:translateY(20px) scale(.94)}to{opacity:1;transform:none}}@keyframes carz-car-in{from{opacity:0;transform:translateY(25px) scale(.9)}to{opacity:1;transform:none}}@keyframes carz-upgrade-entry{from{filter:brightness(3) drop-shadow(0 0 24px #ffd86b);opacity:0;bottom:-18%}to{opacity:1;bottom:8%}}@keyframes carz-diamond{from{transform:scale(1.8);filter:brightness(3)}to{transform:scale(1)}}@keyframes carz-diamond-flight{from{left:45%;top:65%;transform:scale(1.4)}to{left:75%;top:2%;transform:scale(.35);opacity:0}}@keyframes carz-turntable{0%,100%{transform:perspective(800px) rotateY(-18deg) rotateZ(-5deg)}50%{transform:perspective(800px) rotateY(18deg) rotateZ(5deg)}}@keyframes carz-crash{0%{transform:scale(.3);opacity:1}50%{transform:scale(1.8);opacity:1}100%{transform:scale(2.4);opacity:0}}
@supports not (width:1cqw){.carz-app{font-size:14px}.carz-question h2{font-size:18px}.garage-view h1{font-size:34px}.carz-modal-card h2{font-size:28px}}

.carz-app[data-transitioning=true] .view{pointer-events:none}
.carz-app .modal-art[src*="5-correct-in-a-row"]{max-height:19vh}

#home{background-image:linear-gradient(#0002,#0002),url("../my-carz-game-assets/page-3/page-3-bg.webp")}
#collection>h1{visibility:hidden;height:8%;flex-shrink:0}#collection .showcase-car{height:30%}

/* Portrait phones use their full available height; larger screens retain the
   centred portrait stage. Opening art fills the stage like Rocketier. */
.carz-app{padding:0;container-type:size}
.opening{background:url('../my-carz-game-assets/page-1/page-1-bg.webp') center top/100% 100% no-repeat}
.garage-view{padding-top:max(3%,env(safe-area-inset-top));padding-left:max(6%,env(safe-area-inset-left));padding-right:max(6%,env(safe-area-inset-right));overflow-y:auto}
.garage-view>*{flex-shrink:0}
.garage-view .showcase-car{flex-shrink:1;min-height:70px}
.carz-modal{padding-top:max(5%,env(safe-area-inset-top));padding-bottom:max(5%,env(safe-area-inset-bottom))}
.carz-modal-card{min-height:0;overscroll-behavior:contain}
.modal-art{max-height:26%;max-height:26cqh;flex-shrink:0}
.reward-car{height:24%;height:24cqh;flex-shrink:0}
.carz-app .modal-art[src*="5-correct-in-a-row"]{max-height:19%;max-height:19cqh}
.scratch-area{max-width:100%;width:min(80%,38cqh)}
@media (max-width:600px) and (orientation:portrait){
  .carz-app{width:100%;height:100vh;height:100dvh}

}
@media (max-height:600px){
  .garage-view{gap:.6%}
  .garage-view h1{margin:0}
  .carz-carousel{min-height:70px;padding:3px 2px}
  .carz-modal-card{gap:6px}
}

/* Home composition follows page-3-b-reference; collection keeps its layout. */
#home{display:block;padding:0;background:url('../my-carz-game-assets/page-3/page-3-bg.webp') center/100% 100% no-repeat}
#home>h1,#home-level,#home .carz-paints legend,#home .carz-card small{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
#home-car{position:absolute;left:12%;top:23.5%;width:76%;height:24%;min-height:0;object-fit:contain}
.home-name-bar{position:absolute;left:19%;top:50.6%;width:64%;height:4.6%;display:flex;align-items:center;justify-content:space-between;border:1px solid #77777a66;border-radius:14px;background:linear-gradient(100deg,#19171d,#0d141c,#19171d);box-shadow:inset 0 1px 3px #ffffff12}
#home-name{font-size:clamp(16px,4.8cqw,30px);line-height:1.1;margin:0}
.home-name-bar button{width:15%;height:100%;padding:0;border:0;background:none;color:#ff304d;font-size:clamp(20px,6cqw,36px);line-height:1;text-shadow:0 0 8px #ff304d80}
.home-name-bar button:disabled{cursor:default;opacity:.35}
#home-cars{position:absolute;left:9%;top:58.7%;width:87%;height:14.5%;padding:0 0 3px;gap:12%;scrollbar-width:none;align-items:stretch;scroll-snap-type:x mandatory}
#home-cars::-webkit-scrollbar{display:none}
#home .carz-card{position:relative;flex:0 0 41%;height:100%;gap:0;padding:4% 3% 3%;border:1px solid #71808b66;border-radius:clamp(10px,3cqw,22px);background:#0c121bd9;font-size:clamp(12px,3.2cqw,20px);overflow:visible}
#home .carz-card[data-current=true]{border:0;background:transparent url('../my-carz-game-assets/page-3/car-panel.webp') center/100% 100% no-repeat;box-shadow:none}
#home .carz-card:disabled{opacity:.48;cursor:default}
#home .carz-card img{height:60%;width:95%;object-fit:contain}
#home .home-card-heading{font-size:clamp(12px,3.2cqw,20px);font-weight:800;white-space:nowrap}
#home .carz-card strong{font-size:clamp(12px,3.2cqw,20px);line-height:1.1;white-space:nowrap}
#home .carz-card::after{content:'❯';position:absolute;left:108%;top:39%;font-size:clamp(22px,7cqw,44px);color:#ecf8ff;text-shadow:0 0 3px #5ac7ff;pointer-events:none}
#home .carz-card[data-current=true]::after{content:'❯❯';letter-spacing:-.25em}
#home .carz-paints{position:absolute;left:11%;top:76.2%;width:80%;height:4.6%;margin:0;padding:0}
#home-paints{height:100%;display:flex;align-items:center;justify-content:space-between;gap:0;flex-wrap:nowrap}
#home-paints button{width:7.2%;height:auto;max-height:100%;aspect-ratio:1;border:1px solid #ffffff80}
#home-paints button[aria-pressed=true]{outline:2px solid #b8ffe6;outline-offset:2px;box-shadow:0 0 5px #84ffcb}
#home>#start-driving{position:absolute;left:16%;top:83.1%;width:68%;height:7.2%;margin:0}
#home>#start-driving{display:grid;place-items:center}
#start-driving img{width:100%;height:auto;object-fit:contain}
#home .returning-actions{position:absolute;left:11%;top:92.3%;width:79%;height:5.1%;max-height:none;gap:5%;margin:0;align-items:center}
#home .returning-actions .art-button{display:grid;place-items:center;width:47.5%;height:100%}
#home .returning-actions img{width:100%;height:auto;object-fit:contain}

/* Race coordinates follow the supplied page-5-a/b portrait references. */
#race .carz-scenery{width:18%;background-size:var(--scenery-image-width,100%) 100%}
#race .carz-scenery.left{background-position:left var(--scenery-offset,0px)}
#race .carz-scenery.right{background-position:right var(--scenery-offset,0px)}
#race .carz-track{width:64%;overflow:visible}
#road{display:block;width:100%;height:100%}
#race .carz-hud{top:max(.6%,env(safe-area-inset-top));left:1.5%;right:1.5%;height:5.5%;display:block}
#race #exit-race{position:absolute;left:0;top:0;width:10.5%;height:100%;min-height:0;padding:0;border:0;border-radius:0;background:none}
#exit-race img{width:100%;height:100%;object-fit:contain}
#race-level{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}

#race #diamonds{position:absolute;right:0;top:4%;width:51%;height:90%;display:flex;gap:3%;justify-content:space-between;margin:0;padding:0 3%;border:0;background:transparent url('../my-carz-game-assets/page-5/diamond-panel.webp') center/100% 100% no-repeat;border-radius:0;font-size:clamp(11px,3cqw,19px)}
#race #diamonds img{width:12%;height:auto;aspect-ratio:1;object-fit:contain}
#race #diamonds strong{width:17%;white-space:nowrap;text-align:center;font-size:clamp(10px,2.8cqw,18px)}
#race .carz-question{left:1.5%;right:1.5%;top:max(6.7%,50px);height:14.3%;min-height:0;padding:1% 5% 1% 22%;border:0;border-radius:0;background:transparent url('../my-carz-game-assets/page-5/question-panel.svg') center/100% 100% no-repeat;box-shadow:none}
#race .carz-question h2{font-size:clamp(13px,4.2cqw,26px);font-weight:800;line-height:1.2;text-align:left;text-wrap:balance}
#race .time-bar{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);margin:0}
#race .tunnels{top:0;left:-11.5%;width:123%;height:22.5%;z-index:3}
#race .tunnels img{object-fit:fill}
#race .race-car{bottom:var(--car-rest-bottom,14%);width:calc(34% * var(--driving-scale,1));height:calc(18% * var(--driving-scale,1));transition:none}
#race .lane-arrow{bottom:36%;height:20%;opacity:0;visibility:hidden;transition:opacity .18s,visibility .18s;pointer-events:none}
#race .lane-arrow[data-active=true]{opacity:1;visibility:visible}
#race .lane-arrow i{width:40%;height:23%;filter:drop-shadow(0 0 8px var(--arrow))}
#race .lane-arrow i:nth-child(4){animation-delay:.45s}
#race .crash-effect{bottom:auto;top:var(--crash-y,77%);margin-top:-11%;width:22%;left:calc(var(--crash-x) - 11%);background:radial-gradient(ellipse at 40% 35%,#fff5ba 0%,#ffc239 15%,#ff5a08 35%,#4c2525 53%,transparent 70%);animation:carz-burst 1.1s ease-out both}
@keyframes carz-burst{0%{transform:translate(0,0) scale(.1);opacity:0}15%{opacity:1}50%{opacity:.9}100%{transform:translate(var(--burst-x),var(--burst-y)) scale(2);opacity:0}}
#race #exit-race,

#race #diamonds img{opacity:.5;filter:grayscale(.8)}
#race #diamonds img.earned{opacity:1;filter:none}
#race #diamonds img.earned:not(.newly-earned){animation:none}
.diamond-flight{margin-left:-5%;margin-top:-5%}
@keyframes carz-diamond-flight{from{left:var(--gem-x,45%);top:var(--gem-y,65%);transform:scale(1.4)}to{left:75%;top:2%;transform:scale(.35);opacity:0}}
.crash-modal{background:#03101c99}
.crash-modal{padding:0}
.crash-modal .carz-modal-card{position:relative;width:100%;height:100%;max-height:none;overflow:visible;display:block;border:0;background:none;box-shadow:none;padding:0}
.crash-modal #modal-art{position:absolute;left:11%;top:10%;width:78%;height:38%;max-width:none;max-height:none;object-fit:fill;mask:url('../my-carz-game-assets/page-7/crash-mask.svg') center/100% 100% no-repeat;-webkit-mask:url('../my-carz-game-assets/page-7/crash-mask.svg') center/100% 100% no-repeat}
.crash-modal #modal-title{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
.crash-modal #modal-copy{position:absolute;left:21%;top:31.8%;width:58%;height:10.5%;margin:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;text-align:center;font-family:system-ui,sans-serif;line-height:1.12;text-shadow:0 2px 4px #540000}
.crash-answer-label{font-size:clamp(13px,4.2cqw,26px);font-weight:800;color:#fff;flex-shrink:0}
.crash-answer-text{flex-shrink:0;width:100%;font-size:clamp(16px,5.4cqw,32px);font-weight:850;color:#ffed29;overflow-wrap:break-word}
.crash-modal #streak-broken{position:absolute;left:17%;top:51.4%;width:66%;height:14%;overflow:hidden}
#streak-broken img{position:absolute;left:-1.613%;top:-39.054%;width:103.226%;height:179.335%;max-width:none}
.crash-modal #modal-actions{position:absolute;left:19%;top:72.5%;width:62%;height:7%;margin:0}
.crash-modal #modal-actions .art-button{width:100%;height:100%}
.crash-modal #modal-actions .art-button img{width:100%;height:100%;object-fit:contain}
#race .race-car.upgrade-entry{animation-name:carz-race-upgrade-entry}
@keyframes carz-race-upgrade-entry{from{filter:brightness(3) drop-shadow(0 0 24px #ffd86b);opacity:0;bottom:-18%}to{opacity:1;bottom:var(--car-rest-bottom,14%)}}

/* Good Bad Ugly countdown presentation, with the requested 3/2/1/GO sequence. */
#race .carz-countdown{inset:0;z-index:8;display:flex;align-items:center;justify-content:center;flex-direction:column;background:linear-gradient(transparent,#090b13e6 30%,#090b13e6 70%,transparent),#030b1440;text-align:center;pointer-events:none;opacity:1;transition:opacity .22s ease;animation:carz-gbu-boost-in .35s ease-out}
#race .carz-countdown.leaving{opacity:0}
#race .carz-countdown .countdown-value{font:italic 950 90px/1 system-ui,sans-serif;color:#fff;letter-spacing:-2px;text-shadow:4px 4px 0 #e3253d}
#race .carz-countdown .countdown-value.pulse{animation:carz-gbu-count-pulse .6s ease-out}
@keyframes carz-gbu-boost-in{from{opacity:0;transform:scale(1.3)}to{opacity:1;transform:scale(1)}}
@keyframes carz-gbu-count-pulse{from{opacity:.3;transform:scale(1.5)}to{opacity:1;transform:scale(1)}}
/* Preserve the complete square GIF and its native colors/particles instead of cropping its side bursts. */
.carz-app .celebration-confetti{inset:0;width:100%;height:100%;object-fit:contain;object-position:center bottom;pointer-events:none}
.carz-app .reward-confetti{z-index:21}
@keyframes carz-focus-in{from{opacity:0;transform:translateY(12px) scale(.94)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes carz-count-ring{to{transform:rotate(360deg)}}

/* Page 5 progressive reveal. Existing elements/effects return in their original positions. */
#race[data-intro-stage=countdown] .race-car,
#race[data-intro-stage=countdown] .carz-question,
#race[data-intro-stage=car] .carz-question,
#race[data-intro-stage=countdown] #diamonds,
#race[data-intro-stage=car] #diamonds,
#race[data-intro-stage=diamonds] .carz-question{visibility:hidden!important}
#race .carz-question{overflow:hidden}
#race .carz-question:after{content:'';position:absolute;inset:8% 0;pointer-events:none;opacity:0;background:linear-gradient(105deg,transparent 35%,#a9ecff38 49%,transparent 63%);transform:translateX(-110%)}
#race .carz-question.question-attention:after{animation:carz-question-sweep .65s ease-out}
#race .tunnels.tunnel-attention{animation:carz-tunnel-focus .48s ease-out}
#race .lane-arrow[data-active=true]{filter:drop-shadow(0 0 8px var(--arrow))}
@keyframes carz-question-sweep{0%{opacity:0;transform:translateX(-110%)}20%{opacity:1}80%{opacity:1}100%{opacity:0;transform:translateX(110%)}}
@keyframes carz-tunnel-focus{0%,100%{filter:brightness(1) drop-shadow(0 0 0 #bcefff00)}35%{filter:brightness(1.2) drop-shadow(0 0 10px #bcefff88)}}


/* Requested faster arrival: the animated bottom position is separate from steering's transform. */
#race .race-car.quick-entry{animation:carz-quick-entry .7s cubic-bezier(.25,.65,.35,1) both}
#race .race-car.quick-entry.upgrade-entry{animation-duration:.8s}
@keyframes carz-quick-entry{from{bottom:-18%;opacity:0;filter:brightness(1.7) drop-shadow(0 0 22px #ffe5a6)}to{bottom:var(--car-rest-bottom,14%);opacity:1;filter:brightness(1) drop-shadow(0 6px 5px #000a)}}
.correct-award{position:absolute;inset:0;z-index:15;pointer-events:none;background:radial-gradient(ellipse at 50% 42%,#05121c14,#020b183b 65%);isolation:isolate}
.award-gem{position:absolute;left:28%;top:35%;width:30%;aspect-ratio:1;transform:translate(-50%,-50%);z-index:2;will-change:transform}
.award-gem>img{width:100%;height:100%;object-fit:contain;position:relative;filter:drop-shadow(0 0 16px #7ae9ffcc);animation:carz-award-pop .3s cubic-bezier(.16,1,.3,1)}
.award-halo{position:absolute;inset:-40%;border-radius:50%;background:repeating-conic-gradient(from 0deg,#def9ff88 0deg 5deg,transparent 5deg 15deg);mask-image:radial-gradient(circle,transparent 16%,#000 35%,transparent 70%);-webkit-mask-image:radial-gradient(circle,transparent 16%,#000 35%,transparent 70%);animation:carz-award-rays 3s linear infinite}
.correct-badge{position:absolute;left:67%;top:41%;transform:translate(-50%,-50%);width:41%;display:flex;align-items:center;justify-content:center;gap:7%;padding:3% 2%;background:#020805;border:2px solid #2de239;border-radius:11px;box-shadow:0 0 15px #35ff5688,inset 0 0 8px #24d14744;color:#fff;font-size:clamp(13px,3.8cqw,24px);line-height:1.18;text-align:center;animation:carz-award-badge-in .4s ease-out}
.correct-badge strong{font-weight:850}.award-check{display:grid;place-items:center;flex-shrink:0;width:24%;aspect-ratio:1;border-radius:50%;background:#49bc6b;color:white;font:900 clamp(18px,5cqw,33px)/1 system-ui}
@keyframes carz-award-pop{from{opacity:0;transform:scale(.35)}to{opacity:1;transform:scale(1)}}
@keyframes carz-award-rays{to{transform:rotate(360deg)}}
@keyframes carz-award-badge-in{from{opacity:0;translate:0 7px;scale:.8}to{opacity:1;translate:0 0;scale:1}}

.correct-award{animation:carz-award-dim .15s ease-out}
@keyframes carz-award-dim{from{background-color:transparent}to{background-color:#020b1810}}

#race .carz-scenery.left{background-size:var(--left-scenery-width,100%) auto}
#race .carz-scenery.right{background-size:var(--right-scenery-width,100%) auto}

/* Keep the active introduction above its dimmed surroundings without stopping the world. */
#race .intro-dimmer{position:absolute;inset:0;z-index:6;background:#020a16;opacity:0;transition:opacity .22s ease;pointer-events:none}
#race[data-attention] .intro-dimmer{opacity:.65}
#race .carz-question,#race .carz-hud{z-index:7;transition:filter .22s ease}
#race[data-attention=question] .carz-hud{filter:brightness(.35)}
#race[data-attention=diamonds] .carz-question{filter:brightness(.35)}
#race[data-attention=diamonds] #exit-race{filter:brightness(.35)}

/* The supplied neutral panel is tinted independently from its legible question text. */
#race .carz-question{background-image:none}
#race .question-frame{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;z-index:0;pointer-events:none;filter:none}
#race .carz-question h2{position:relative;z-index:1;color:#102434;text-shadow:none}
#race .carz-question:after{z-index:2}

#race[data-attention=question][data-attention-soft=true] .intro-dimmer{opacity:.35}
#race[data-attention=question][data-attention-soft=true] .carz-hud{filter:brightness(.65)}

/* Standard named colors tint the supplied neutral frame; text is outside the tint layer. */
#race .carz-question{isolation:isolate}
#race .question-frame{filter:none}
#race .carz-question:before{content:'';position:absolute;inset:0;z-index:1;background:var(--question-color,#1565c0);mix-blend-mode:multiply;mask:url('../my-carz-game-assets/page-5/question-panel-white.webp') center/100% 100% no-repeat;-webkit-mask:url('../my-carz-game-assets/page-5/question-panel-white.webp') center/100% 100% no-repeat;pointer-events:none}
#race .carz-question h2{z-index:2;color:var(--question-text,#fff)}
#race .carz-question:after{z-index:3}
/* Localized charcoal puffs retain the existing flame burst and 900ms triple flash. */
#race .crash-smoke{position:absolute;left:var(--crash-x);top:var(--crash-y,77%);width:24%;aspect-ratio:1;border-radius:50%;pointer-events:none;z-index:7;background:radial-gradient(ellipse at 35% 35%,#343536f5,#101112f5 42%,#050607c9 62%,transparent 74%);animation:carz-black-smoke 1.15s cubic-bezier(.18,.65,.3,1) both;will-change:transform,opacity}
.carz-app.wrong-impact{animation:carz-crash-camera .9s ease-out}
@keyframes carz-black-smoke{0%{opacity:0;transform:translate(-50%,-50%) scale(.25)}12%{opacity:.95}45%{opacity:.9}100%{opacity:0;transform:translate(calc(-50% + var(--smoke-x)),calc(-50% + var(--smoke-y))) scale(2.3)}}
@keyframes carz-crash-camera{0%,100%{transform:translate(0,0)}8%{transform:translate(-5px,2px)}14%{transform:translate(6px,-3px)}20%{transform:translate(-6px,3px)}26%{transform:translate(5px,-2px)}32%{transform:translate(-5px,-2px)}38%{transform:translate(4px,3px)}44%{transform:translate(-4px,-2px)}50%{transform:translate(3px,2px)}58%{transform:translate(-3px,-1px)}66%{transform:translate(2px,1px)}76%{transform:translate(-1px,1px)}88%{transform:translate(1px,0)}}

#race .crash-smoke{filter:blur(3px);border-radius:46% 54% 42% 58% / 56% 40% 60% 44%}

/* Light readable fills; neon glow follows the supplied image silhouette, not a rectangular box. */
#race .question-frame{filter:drop-shadow(0 0 2px var(--question-glow,#00aaff)) drop-shadow(0 0 6px var(--question-glow,#00aaff))}

/* A safe opaque road surface also covers the moment a resized canvas is cleared. */
#race .carz-track,#race #road{background:#294356}

/* Matching neon light washes across the panel surface beneath its dark text. */
#race .carz-question:before{background:radial-gradient(ellipse at 50% 0%,color-mix(in srgb,var(--question-glow,#00aaff) 38%,var(--question-color,#d9efff)),transparent 72%),radial-gradient(ellipse at 50% 100%,color-mix(in srgb,var(--question-glow,#00aaff) 30%,var(--question-color,#d9efff)),transparent 72%),var(--question-color,#d9efff)}

/* Landing preparation panel: real byte progress, with Next absent until ready. */
/* Neon pit-board frame and gold racing-stripe progress fill. */
.carz-loader{left:8%;width:84%;bottom:3%;max-height:21%;overflow-y:auto;padding:3%;border:2px solid #2edcff;border-radius:5px 18px 5px 18px;background:linear-gradient(135deg,#07325bf7,#03122cf7 65%);box-shadow:0 0 0 3px #03142bd9,0 0 0 4px #1685cc,0 0 22px #00bfff55,inset 0 0 0 3px #1265a44d;color:#eafaff;font-family:system-ui,sans-serif;font-size:clamp(11px,2.7cqw,16px);isolation:isolate}
.carz-loader:before{content:"";position:absolute;left:8%;right:8%;top:-3px;height:4px;background:linear-gradient(90deg,transparent,#8af5ff 20%,#fff 50%,#8af5ff 80%,transparent);box-shadow:0 0 10px #23dfff;pointer-events:none}
.carz-loader label{align-items:center;gap:8px;font-weight:800;letter-spacing:.01em;margin-bottom:8px;text-transform:uppercase;text-shadow:0 1px 3px #000}
.carz-loader label:before{content:"";flex:0 0 20px;height:20px;background:conic-gradient(#e9faff 25%,transparent 0 50%,#e9faff 0 75%,transparent 0) 0 0/10px 10px;transform:skew(-12deg);opacity:.9}
#load-percent{margin-left:auto;padding:4px 7px;border:1px solid #ffcf4577;border-radius:4px;background:#020e21;color:#ffda4a;font-variant-numeric:tabular-nums;font-size:1.15em;white-space:nowrap;text-shadow:0 0 9px #ffb80066}
.carz-loader progress{appearance:none;-webkit-appearance:none;height:16px;overflow:hidden;border:2px solid #2688b9;border-radius:3px;background:#020b19;box-shadow:0 0 0 1px #010913,inset 0 2px 5px #0009;transform:skew(-9deg)}
.carz-loader progress::-webkit-progress-bar{background:#020b19;border-radius:0;box-shadow:inset 0 2px 5px #000}
.carz-loader progress::-webkit-progress-value{background:repeating-linear-gradient(110deg,transparent 0 11px,#74410038 11px 15px),linear-gradient(#fff19c,#ffcb25 45%,#ed9600);border-radius:0;box-shadow:0 0 12px #ffca36bb,inset 0 2px #fff8;transition:width .18s linear}
.carz-loader progress::-moz-progress-bar{background:repeating-linear-gradient(110deg,transparent 0 11px,#74410038 11px 15px),linear-gradient(#fff19c,#ffcb25 45%,#ed9600);border-radius:0}
.carz-loader p{margin:8px 0 0;color:#c1dfef;overflow-wrap:anywhere;font-variant-numeric:tabular-nums;line-height:1.45}
.carz-loader button{margin-top:8px;padding:7px 20px;border:1px solid #ffe579;border-radius:4px;background:linear-gradient(#ffe579,#ffbc13);box-shadow:0 0 10px #ffbc1333;color:#101a28;font-weight:850;text-transform:uppercase}

/* Five collected gems converge above a soft scrim, then carry light into the upgrade. */
.diamond-finale{position:absolute;inset:0;z-index:22;pointer-events:none;overflow:hidden;background:radial-gradient(ellipse at 50% 43%,#123e5570,#020b19d9 75%)}
.finale-small{position:absolute;object-fit:contain;filter:drop-shadow(0 0 7px #79eaff);will-change:transform,opacity}
.finale-hero{position:absolute;left:50%;top:43%;width:43%;aspect-ratio:1;opacity:0;transform:translate(-50%,-50%);will-change:transform,opacity}
.finale-hero>img{position:relative;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 0 18px #6ee6ff)}
.finale-hero .award-halo{inset:-65%;animation-duration:6s}
.celebrating .finale-hero>img{animation:carz-finale-float 1.6s ease-in-out infinite}
.finale-spark{position:absolute;left:50%;top:43%;width:5px;height:11px;border-radius:2px;background:#baf5ff;opacity:0}
.finale-spark:nth-child(3n){background:#ffe982}
.merged .finale-spark{animation:carz-finale-spark 1.5s var(--spark-delay) ease-out infinite}
@keyframes carz-finale-float{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-9px) scale(1.035)}}
@keyframes carz-finale-spark{0%{opacity:0;transform:translate3d(0,0,0) scale(.2)}15%{opacity:1}100%{opacity:0;transform:translate3d(var(--spark-x),var(--spark-y),0) rotate(150deg) scale(.3)}}
.merged .finale-hero{opacity:1}
.diamond-finale~.celebration-confetti{z-index:23}
.finale-hero,.finale-spark{left:var(--finale-x,50%);top:var(--finale-y,43%)}
.diamond-finale[data-stage=exit] .finale-hero>img{animation:carz-finale-launch-glow var(--finale-exit-duration,950ms) ease-in both}
@keyframes carz-finale-launch-glow{0%{filter:drop-shadow(0 0 18px #6ee6ff)}40%{filter:brightness(1.6) drop-shadow(0 0 28px #a6f5ff)}100%{filter:brightness(2) drop-shadow(0 0 18px #6ee6ff)}}

/* Uniform countdown focus over the complete game stage, including scenery/HUD. */
#race .carz-countdown{background:#000000c9}
/* Keep full prompts inside the clear inset, away from the flask and checked trim. */
#race .carz-question h2{position:absolute;left:22%;right:8%;top:20%;bottom:30%;margin:0;text-align:center;align-content:center;overflow-wrap:anywhere;color:#fff;text-shadow:0 1px 2px #001322,0 0 4px #00132299;font-size:clamp(13px,4.2cqw,26px);line-height:1.15}

/* Page 8 follows the supplied artwork composition, directly above the blurred race. */
.scratch-modal{padding:0;background:#020b1655;backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.scratch-modal .carz-modal-card{position:relative;inset:0;width:100%;height:100%;max-height:none;overflow:visible;display:block;padding:0;border:0;border-radius:0;background:none;box-shadow:none;animation:none}
.scratch-modal #modal-art{position:absolute;left:12%;top:17%;width:76%;height:43%;max-width:none;max-height:none;object-fit:contain}
.scratch-modal #modal-title,.scratch-modal #modal-copy{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.scratch-modal #scratch-area{position:absolute;left:23%;top:63%;width:54%;max-width:none;aspect-ratio:1.14;will-change:transform,opacity;filter:drop-shadow(0 8px 12px #0008)}
.scratch-modal #scratch-car{inset:5%;width:90%;height:90%;border-radius:14%;background:radial-gradient(ellipse,#1a5a70,#071521 75%);padding:8%;object-fit:contain}
.scratch-modal #scratch{border-radius:9%;cursor:crosshair;outline-offset:5px}
.scratch-modal #scratch:focus-visible{outline:2px solid #ffe681}
/* The backing canvas fills the measured artwork ratio; focus follows its silhouette. */
.scratch-modal #scratch{object-fit:fill;outline-offset:-7px}
.scratch-modal #scratch:focus-visible{outline:none;filter:drop-shadow(0 0 4px #ffe68180)}
/* Supplied explosion GIF frames, clocked in sync with the existing crash sequence. */
#race .crash-explosion{position:absolute;left:var(--crash-x);top:var(--crash-y);height:auto;transform:translate(-50%,-50%);z-index:8;pointer-events:none;object-fit:contain}

/* Larger reading area and type, with the existing artwork-safe automatic fitting. */
#race .carz-question{left:.5%;right:.5%;height:20%}
#race .carz-question h2{font-size:clamp(16px,5.2cqw,32px)}

/* Page 10: supplied artwork composition over the race, without a generic dialog panel. */
.all-cars-modal{padding:0;background:#020b1655;backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.all-cars-modal .carz-modal-card{position:relative;width:100%;height:100%;max-height:none;padding:0;border:0;border-radius:0;overflow:hidden;display:block;background:none;box-shadow:none}
.all-cars-modal #modal-title,.all-cars-modal #modal-copy{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.all-cars-modal #modal-art{position:absolute;left:7%;top:10.5%;width:86%;height:19%;max-width:none;max-height:none;object-fit:contain}
#all-cars-summary{position:absolute;inset:0;pointer-events:none}
#all-cars-hero{position:absolute;left:29%;top:31%;width:42%;height:28%;object-fit:contain;filter:drop-shadow(0 6px 10px #0009)}
.all-cars-rays{position:absolute;left:14%;top:29%;width:72%;height:34%;background:repeating-conic-gradient(from 0deg,#ffe38166 0deg 5deg,transparent 5deg 15deg);mask-image:radial-gradient(ellipse,#000 12%,transparent 70%);-webkit-mask-image:radial-gradient(ellipse,#000 12%,transparent 70%);animation:carz-award-rays 24s linear infinite}
.all-cars-collection{position:absolute;left:5.5%;top:61%;width:89%;height:19%;background:url('../my-carz-game-assets/page-10/car-collection-panel.webp') center/100% 100% no-repeat}
.all-cars-count{position:absolute;left:31%;top:10%;transform:translateY(-50%);font-size:clamp(14px,4cqw,24px);line-height:1;color:#ffe33f;white-space:nowrap}
#all-cars-grid{position:absolute;left:3%;right:3%;top:21%;bottom:8%;display:grid;grid-template-columns:repeat(10,1fr);grid-template-rows:1fr 1fr;gap:4% 1.5%}
.all-cars-tile{grid-column:span 2;border:1px solid #566fce;border-radius:7px;background:linear-gradient(145deg,#112b51,#061124);overflow:hidden}
.all-cars-tile:nth-child(6){grid-column:2/span 2}
.all-cars-tile img{width:100%;height:100%;object-fit:contain}
.all-cars-tile.selected{border-color:#8af1ff;box-shadow:0 0 7px #00c8ff,inset 0 0 5px #00c8ff}
.all-cars-modal #modal-actions{position:absolute;left:0;top:82%;width:100%;height:14%;display:block}
.all-cars-modal #modal-actions .art-button{position:absolute;left:18%;top:0;width:64%;height:41%}
.all-cars-modal #modal-actions .art-button:nth-child(2){left:29%;top:58%;width:42%;height:41%}
.all-cars-modal #modal-actions .art-button img{height:100%;object-fit:contain}
.all-cars-modal .art-button:focus-visible{outline:none;filter:drop-shadow(0 0 4px #ffe681)}

/* Result/reward artwork stays sharp above a quieter, darker race backdrop. */
.carz-modal:is(.crash-modal,.scratch-modal,.all-cars-modal,.reward-modal){backdrop-filter:blur(8px) brightness(.65);-webkit-backdrop-filter:blur(8px) brightness(.65)}
.carz-modal:is(.crash-modal,.scratch-modal,.all-cars-modal){background:#020812b8}
.carz-modal.reward-modal{background:#020812dd}

/* Page 4: reference garage composition, with per-model saved paint. */
#collection{display:block;padding:0;overflow:hidden;background:url('../my-carz-game-assets/page-4/page-4-bg.webp') center/100% 100% no-repeat}
#collection>h1{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%)}
#unlocked-today{position:absolute;left:73%;top:17.5%;width:26%;height:8%;margin:0;padding:1.5% 2% 0 12%;background:url('../my-carz-game-assets/page-4/unlocked-today-panel.webp') center/100% 100% no-repeat;font-weight:900;font-size:clamp(17px,5.2cqw,32px);line-height:1.2;text-align:center;white-space:nowrap}
#collection #collection-car{position:absolute;left:11%;top:26%;width:78%;height:24%;min-height:0;object-fit:contain}
.collection-name-bar{position:absolute;left:19%;top:54%;width:64%;height:4.7%;display:flex;align-items:center;justify-content:space-between;border:1px solid #71808b55;border-radius:12px;background:linear-gradient(100deg,#19171d,#0d141c,#19171d)}
#collection-name{font-size:clamp(17px,5.1cqw,31px);line-height:1.1;margin:0}
.collection-name-bar button{width:17%;height:100%;border:0;background:none;padding:0;color:#ff304d;font-size:clamp(20px,6cqw,36px);text-shadow:0 0 8px #ff304d80}
#collection-cars{position:absolute;left:1.5%;top:61.5%;width:97%;height:14.5%;display:flex;gap:1.3%;padding:1% 0;overflow-x:auto;scrollbar-width:none;scroll-snap-type:x mandatory;align-items:stretch}
#collection-cars::-webkit-scrollbar{display:none}
#collection .carz-card{flex:0 0 18.7%;min-width:0;height:100%;padding:3% 1%;gap:3%;border:1px solid #677d8555;border-radius:9px;background:#080f16d9;scroll-snap-align:center;font-size:clamp(9px,2.5cqw,15px)}
#collection .carz-card img{width:100%;height:59%;object-fit:contain}
#collection .carz-card small{font-size:clamp(7px,1.9cqw,11px);line-height:1.1}
#collection .carz-card[aria-pressed=true]{border-color:#bcfff0;box-shadow:0 0 7px #49ffd4,inset 0 0 9px #49ffd444}
#collection .carz-card[aria-pressed=true] small{color:#50ffdb}
#collection .carz-paints{position:absolute;left:9%;top:80.2%;width:82%;padding:0}
#collection .carz-paints legend{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
#collection-paints{gap:2.9%;flex-wrap:nowrap}
#collection-paints button{width:6.4%;flex:0 0 6.4%}
#collection #collection-back{position:absolute;left:24%;top:88%;width:52%;height:5.5%;margin:0}
#collection .art-button img{height:100%;object-fit:contain}
#collection.choose-before-drive #collection-back{top:86%}
#collection #collection-drive{position:absolute;left:20%;top:92.2%;width:60%;height:5.2%;margin:0}
#collection .art-button:focus-visible{outline:none;filter:drop-shadow(0 0 4px #ffe681)}
.collection-name-bar button:focus-visible{outline:none;color:#ffe681;text-shadow:0 0 7px #ffcc45}

/* Fill the Back tap target with visible artwork instead of its transparent margins. */
#collection #collection-back{left:17%;top:87.5%;width:66%;height:6%;min-height:44px}
#collection.choose-before-drive #collection-back{top:84%}
#collection #collection-back img{position:absolute;left:-7.65%;top:-42.71%;width:115.49%;height:185.42%;object-fit:fill;pointer-events:none}

/* Locked collection cards retain muted model color and explain their unlock level. */
#collection .carz-card:disabled{opacity:1;background:#070d10e8;border-color:#46525b44;box-shadow:none}
#collection .carz-card:disabled img{filter:brightness(.48) saturate(.72)}
#collection .carz-card:disabled>strong{color:#798589}
#collection .locked-car-status{display:flex;align-items:center;justify-content:center;gap:7%;width:100%;color:#738088;margin-top:3%;line-height:1.05}
.locked-car-copy{display:flex;flex-direction:column;align-items:center;gap:2px;font-size:clamp(7px,2cqw,12px);font-weight:800}
#collection .unlock-level{font-size:clamp(5.5px,1.5cqw,9px);white-space:nowrap;font-weight:600}
.car-lock{position:relative;flex:0 0 14%;aspect-ratio:.8;background:#718087;border-radius:2px;margin-top:5%}
.car-lock:before{content:'';position:absolute;left:18%;top:-48%;width:64%;height:70%;border:1.5px solid #718087;border-bottom:0;border-radius:6px 6px 0 0}
.car-lock:after{content:'';position:absolute;left:42%;top:29%;width:17%;height:39%;border-radius:2px;background:#111b20}

/* A real in-bounds advance control replaces the clipped decorative end arrow. */
#home-cars{width:78%}
#home .carz-card:not([data-current=true])::after{content:none}
#home-carousel-next{position:absolute;left:88%;top:62.5%;width:10%;height:7.5%;min-height:44px;padding:0;border:0;background:none;color:#ecf8ff;font-size:clamp(25px,7cqw,44px);text-shadow:0 0 4px #5ac7ff;display:grid;place-items:center}
#home-carousel-next:disabled{opacity:.3;cursor:default}
#home-carousel-next:focus-visible{outline:1px solid #8ce9ff;border-radius:8px}

#home .home-reset-copy{position:absolute;left:5%;top:81.2%;width:90%;margin:0;text-align:center;color:#fff;font-size:clamp(10px,2.8cqw,17px);font-weight:750;line-height:1.2;text-shadow:0 1px 3px #000}

/* Bidirectional controls travel between the cards on desktop and touch screens. */
#home-cars{left:3%;width:94%;gap:0;scroll-snap-type:x proximity;user-select:none;-webkit-user-select:none;cursor:grab;touch-action:pan-x}
#home .carz-card{flex-basis:41%}
#home .carz-card::after,#home .carz-card[data-current=true]::after{content:none}
.home-card-gap{flex:0 0 14%;height:100%;display:flex;align-items:center;justify-content:center}
.home-card-gap button{display:grid;place-items:center;width:50%;height:65%;min-height:44px;padding:0;border:0;background:none;color:#ecf8ff;font-size:clamp(19px,5.4cqw,32px);text-shadow:0 0 4px #5ac7ff;cursor:pointer}
.home-card-gap button:disabled{opacity:.2;cursor:default}
.home-card-gap button:focus-visible{outline:1px solid #8ce9ff;border-radius:6px}
#home-cars.dragging{cursor:grabbing;scroll-snap-type:none;scroll-behavior:auto}
#home-cars.dragging .carz-card{cursor:grabbing}

/* Supplied page-9 Next frame, with an isometric next-model preview. */
.reward-modal #modal-art{max-height:19cqh}
.reward-modal #next-car-info{position:relative;width:96%;height:12cqh;min-height:58px;flex-shrink:0;background:url('../my-carz-game-assets/page-9/next-car-panel.webp') center/100% 100% no-repeat;display:flex;align-items:center;justify-content:center;padding:4%;font-weight:800;color:#fff}
.next-car-copy{width:52%;display:flex;flex-direction:column;justify-content:center;gap:8px;text-align:left}
.next-car-copy>strong{font-size:clamp(12px,3.8cqw,22px);line-height:1.1}
.next-car-copy>strong>span{color:#67e7ff}
.next-car-diamonds{display:flex;align-items:center;gap:3%;width:95%;font-size:clamp(8px,2.2cqw,13px)}
.next-car-diamonds img{width:12%;height:13px;object-fit:contain;opacity:.4}
.next-car-preview{width:44%;height:100%;object-fit:contain}

/* Post-unlock actions: equally sized Start Driving first, then Back. */
#collection.choose-before-drive #collection-drive,#collection.choose-before-drive #collection-back{left:17%;width:66%;height:6%;min-height:44px}
#collection.choose-before-drive #collection-drive{top:84%}
#collection.choose-before-drive #collection-back{top:92%}
#collection.choose-before-drive #collection-drive img{position:absolute;left:-1.52%;top:-7.56%;width:103.16%;height:112.79%;object-fit:fill;pointer-events:none}

/* Car Upgraded artwork floats directly over the existing dimmed backdrop. */
.reward-modal .carz-modal-card{background:none;border-color:transparent;box-shadow:none}

/* Home model cards are previews, with navigation handled by the separate controls. */
#home .carz-card{cursor:inherit}
#home .carz-card.preview-locked{opacity:.48}
#home .carz-card.preview-locked img{filter:grayscale(1)}

/* Entire home preview row is decorative, including chevrons. */
#home-cars{overflow:hidden;touch-action:none;cursor:default;pointer-events:none}
.home-card-gap span{display:grid;place-items:center;width:50%;height:65%;min-height:44px;color:#ecf8ff;font-size:clamp(19px,5.4cqw,32px);text-shadow:0 0 4px #5ac7ff}

/* Crisp native question glyphs, without the stacked blurred outline. */
#race .carz-question h2{font-family:system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;font-weight:700;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;text-shadow:0 1px 1px #001322b3}

/* Strong finale focus; foreground diamonds and card remain sharp. */
.diamond-finale{background:#020812d1;backdrop-filter:blur(10px) brightness(.55);-webkit-backdrop-filter:blur(10px) brightness(.55)}
.scratch-flyover{position:absolute;z-index:24;pointer-events:none;will-change:transform,opacity;filter:drop-shadow(0 8px 12px #0008)}
.scratch-flyover>img{inset:5%;width:90%;height:90%;border-radius:14%;background:radial-gradient(ellipse,#1a5a70,#071521 75%);padding:8%;object-fit:contain}
.scratch-flyover canvas{object-fit:fill;border-radius:9%}

/* Locked models reveal only their opaque silhouette until unlocked. */
#collection .carz-card:disabled img,#home .carz-card.preview-locked img{filter:brightness(0);opacity:1}
#home .carz-card.preview-locked{opacity:1}
#home .preview-locked .home-card-heading,#home .preview-locked strong{opacity:.48}

/* Page 11: artwork is the dialog frame; no generic card surrounds it. */
.exit-modal{padding:0;background:#020812b8;backdrop-filter:blur(8px) brightness(.65);-webkit-backdrop-filter:blur(8px) brightness(.65)}
.exit-modal .carz-modal-card{position:relative;top:-3%;width:80%;height:auto;aspect-ratio:848/803;max-height:none;overflow:visible;display:block;padding:0;border:0;border-radius:0;background:none;box-shadow:none}
.exit-modal #modal-art{position:absolute;inset:0;width:100%;height:100%;max-width:none;max-height:none;object-fit:fill}
.exit-modal #modal-title{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%)}
.exit-modal #modal-copy{position:absolute;left:12%;top:40%;width:76%;height:18%;margin:0;display:grid;place-items:center;font-family:system-ui,sans-serif;font-size:clamp(13px,4.1cqw,26px);font-weight:750;line-height:1.4;text-align:center;color:#fff}
.exit-modal #modal-actions{position:absolute;left:11%;top:61%;width:78%;height:29%;display:block}
.exit-modal #modal-actions .art-button{position:absolute;left:0;top:0;width:100%;height:43%}
.exit-modal #modal-actions .art-button:nth-child(2){top:55%}
.exit-modal #modal-actions .art-button img{position:absolute;left:-1.93%;top:-8.4%;width:104.11%;height:127.48%;object-fit:fill}
.exit-modal #modal-actions .art-button:nth-child(2) img{left:-1.64%;top:-2.68%;width:102.98%;height:109.82%}
.exit-modal .art-button:focus-visible{outline:none;filter:drop-shadow(0 0 4px #8ce9ff)}

/* A clear padlock sits above each hidden model silhouette on both garage pages. */
#collection .carz-card{position:relative}
.car-lock.silhouette-lock{position:absolute;left:50%;top:36%;width:clamp(10px,3cqw,18px);aspect-ratio:.8;flex:none;margin:0;transform:translate(-50%,-50%);z-index:2;background:#d1dce2;box-shadow:0 1px 3px #0008;pointer-events:none}
.car-lock.silhouette-lock:before{border-color:#d1dce2}
#home .silhouette-lock{top:52%}

/* Keep the locked footer aligned and give the required-level line the full card width. */
#collection .carz-card:disabled>img{height:52%}
#collection .locked-car-status{display:grid;grid-template-columns:8px minmax(0,1fr);grid-template-rows:auto auto;column-gap:3px;row-gap:2px;align-items:center;justify-content:center;margin-top:4px;padding:0 2px;min-width:0}
#collection .locked-car-copy{display:contents}
#collection .locked-car-status>.car-lock{grid-column:1;grid-row:1;width:7px;aspect-ratio:.8;margin:2px 0 0;justify-self:center}
#collection .locked-car-copy>span:first-child{grid-column:2;grid-row:1;font-size:clamp(7px,2cqw,12px);line-height:1.1;text-align:center}
#collection .locked-car-copy>.unlock-level{grid-column:1/-1;grid-row:2;display:block;width:100%;font-size:clamp(5.5px,1.5cqw,9px);line-height:1.15;text-align:center;white-space:nowrap}

/* Locked status is text-only; retain the padlock over the car silhouette. */
#collection .locked-car-status{grid-template-columns:minmax(0,1fr)}
#collection .locked-car-copy>span:first-child{grid-column:1}

/* Prominent individual HUD diamond losses, after the crash presentation. */
.diamond-loss{position:absolute;inset:0;z-index:16;pointer-events:none;background:linear-gradient(#17091477,transparent 60%)}
.diamond-loss-message{left:50%;top:22%;border-color:#ff4256;box-shadow:0 0 15px #ff425688,inset 0 0 8px #d1244144;background:#100306}
.diamond-loss-message .award-check{background:#d94358}
.lost-diamond{position:absolute;object-fit:contain;filter:drop-shadow(0 0 6px #ff435b);transform-origin:center;will-change:transform,opacity}

.reward-modal #next-car-info.all-unlocked{background:none;font-size:clamp(20px,5.6cqw,32px);line-height:1.2;padding:3%;text-align:center}

.demo-view>.demo-swipe-guide{position:absolute;left:50%;top:79%;width:30%;height:auto;object-fit:contain;transform:translate(-38.75%,-50%);pointer-events:none;animation:demo-hand-swipe 2.8s ease-in-out infinite}

@keyframes demo-hand-swipe{0%,50%,100%{transform:translate(-38.75%,-50%)}25%{transform:translate(-93.75%,-50%)}75%{transform:translate(16.25%,-50%)}}

/* Paint choices follow the front edge of the home platform ellipse. */
#home .carz-paints{left:12%;top:42.3%;width:76%;height:5%}
#home-paints{position:relative;display:block}
#home-paints button{position:absolute;transform:translate(-50%,-50%);max-height:none}
#home-paints button:nth-child(1){left:0%;top:53.56%}
#home-paints button:nth-child(2){left:10%;top:73.73%}
#home-paints button:nth-child(3){left:20%;top:86.21%}
#home-paints button:nth-child(4){left:30%;top:94.12%}
#home-paints button:nth-child(5){left:40%;top:98.56%}
#home-paints button:nth-child(6){left:50%;top:100.00%}
#home-paints button:nth-child(7){left:60%;top:98.56%}
#home-paints button:nth-child(8){left:70%;top:94.12%}
#home-paints button:nth-child(9){left:80%;top:86.21%}
#home-paints button:nth-child(10){left:90%;top:73.73%}
#home-paints button:nth-child(11){left:100%;top:53.56%}

/* Paint choices follow the front edge of the My Cars platform ellipse. */
#collection .carz-paints{left:12%;top:45.3%;width:76%;height:5%}
#collection-paints{position:relative;display:block;width:100%;height:100%}
#collection-paints button{position:absolute;transform:translate(-50%,-50%);width:7.2%;height:auto;max-height:none;aspect-ratio:1}
#collection-paints button:nth-child(1){left:0%;top:53.56%}
#collection-paints button:nth-child(2){left:10%;top:73.73%}
#collection-paints button:nth-child(3){left:20%;top:86.21%}
#collection-paints button:nth-child(4){left:30%;top:94.12%}
#collection-paints button:nth-child(5){left:40%;top:98.56%}
#collection-paints button:nth-child(6){left:50%;top:100.00%}
#collection-paints button:nth-child(7){left:60%;top:98.56%}
#collection-paints button:nth-child(8){left:70%;top:94.12%}
#collection-paints button:nth-child(9){left:80%;top:86.21%}
#collection-paints button:nth-child(10){left:90%;top:73.73%}
#collection-paints button:nth-child(11){left:100%;top:53.56%}

/* Emphasize driving over the secondary collection return action. */
#collection #collection-back,#collection.choose-before-drive #collection-back{left:28%;width:44%;height:4%;min-height:0}
#collection.choose-before-drive #collection-drive{left:10%;top:83%;width:80%;height:7.2%;min-height:44px}
#collection.choose-before-drive #collection-back{top:93%}