/* Dedicated wreck composition. The normal classification screen is unchanged. */
.wreck-content{display:none}
.wreck-garage-icon{display:none}
.race-results[data-outcome="wreck"] .wreck-garage-icon{display:block}
#result-screen.race-results[data-outcome="wreck"]{padding:12px;overflow-x:hidden;align-items:center}
.race-results[data-outcome="wreck"] .results-shell{width:min(1100px,calc(100vw - 24px),calc((100dvh - 24px)*1.343434));aspect-ratio:1064/792;min-height:0;padding:0;display:block;border:0;border-radius:0;background:none;box-shadow:none;animation:wreck-arrive .62s cubic-bezier(.16,.82,.25,1) both}
.race-results[data-outcome="wreck"] .results-shell:before,.race-results[data-outcome="wreck"] .results-shell:after{content:"";position:absolute;pointer-events:none;clip-path:polygon(1.8% 0,98.2% 0,100% 2.4%,100% 97.6%,98.2% 100%,1.8% 100%,0 97.6%,0 2.4%)}
.race-results[data-outcome="wreck"] .results-shell:before{inset:0;z-index:-2;background:linear-gradient(125deg,#e0feff 0,#00dcff 9%,#1883ff 37%,#c73dff 68%,#81ecff 91%,#f0ffff);box-shadow:0 0 20px #00baff88}
.race-results[data-outcome="wreck"] .results-shell:after{inset:2px;z-index:-1;background:radial-gradient(ellipse at 85% 32%,#2e163836,transparent 60%),linear-gradient(180deg,#031020e8 0,#05111bbd 25%,#04101dcc 62%,#020b18f0 100%)}
.race-results[data-outcome="wreck"] :is(.results-heading,.results-panel-art,.results-glass,.results-light-sweep,.results-podium,.results-rules,.results-classification,.results-settlement,.results-wreck-mark,.results-outcome-note,.results-highlight-strip,.results-receipt){display:none!important}
.race-results[data-outcome="wreck"] .wreck-content{position:absolute;inset:0;display:block;pointer-events:none}
.race-results[data-outcome="wreck"] .wreck-frame-art{position:absolute;inset:0;z-index:3;pointer-events:none}
.race-results[data-outcome="wreck"] .wreck-frame-art img{display:block;width:100%;height:100%;object-fit:fill}
.race-results[data-outcome="wreck"] .wreck-header{position:absolute;left:4.3%;right:3.8%;top:5.5%;height:7.5%;z-index:4;display:flex;align-items:center;gap:2.6cqw;border-bottom:1px solid #1983b366}
.race-results[data-outcome="wreck"] .wreck-brand{flex:0 0 20%;margin:0;padding:0 2.4cqw 0 0;border-right:1px solid #9beaffaa;font:400 4.5cqw/1 'Russo One',sans-serif;letter-spacing:-.17cqw;transform:skewX(-12deg);color:#f4fdff;text-shadow:0 .15cqw .2cqw #00528c,0 0 1cqw #008dff,0 0 2cqw #008dff55;white-space:nowrap}
.race-results[data-outcome="wreck"] .wreck-brand img{display:block;width:100%;height:5cqw;object-fit:contain}
.race-results[data-outcome="wreck"] .wreck-track{display:flex;flex-direction:column;gap:.6cqw;min-width:0;line-height:1.05;text-align:left}
.race-results[data-outcome="wreck"] .wreck-track strong{font:700 max(10px,1.8cqw)/1.1 Rajdhani,sans-serif;color:#66f8ff;letter-spacing:.2cqw}
.race-results[data-outcome="wreck"] .wreck-track small{font:500 max(9px,1.25cqw)/1.15 Rajdhani,sans-serif;letter-spacing:.17cqw;color:#bbd5ec;white-space:nowrap}
.race-results[data-outcome="wreck"] .wreck-header>i{align-self:stretch;flex:0 1 11cqw;margin:1cqw 1cqw 0 auto;transform:skewX(-32deg);background:repeating-linear-gradient(0deg,#0876b980 0 2px,transparent 2px 4px);border-inline:1cqw solid #0878b84d;opacity:.65}
/* The lettering sits left of the bitmap center; this small optical offset
 * centers WRECKED while containing every spark between the header and summary. */
.race-results[data-outcome="wreck"] .wreck-hero-art{position:absolute;top:13.25%;left:5%;width:94%;height:38%;z-index:2;pointer-events:none}
.race-results[data-outcome="wreck"] .wreck-hero-art img{display:block;width:100%;height:100%;object-fit:contain;object-position:center;filter:drop-shadow(0 .5cqw 1cqw #08051288)}
.race-results[data-outcome="wreck"] .wreck-summary{position:absolute;left:3.6%;top:51.5%;width:93%;height:20.3%;z-index:4;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.99fr);gap:1.3%;text-align:left}
.race-results[data-outcome="wreck"] :is(.wreck-status,.wreck-return){position:relative;isolation:isolate;display:grid;grid-template-columns:25% minmax(0,1fr);align-items:center;column-gap:3%;min-width:0;padding:4% 5%;clip-path:polygon(2.5% 0,97.5% 0,100% 8%,100% 92%,97.5% 100%,2.5% 100%,0 92%,0 8%)}
.race-results[data-outcome="wreck"] .wreck-status{background:linear-gradient(135deg,#fff3e4,#ff1557 7%,#fa315a 63%,#ff8472 97%,#fff7ed)}
.race-results[data-outcome="wreck"] .wreck-return{background:linear-gradient(125deg,#ffead3,#ff7129 6%,#ffcf57 47%,#a57a30 88%,#ffcc56)}
.race-results[data-outcome="wreck"] :is(.wreck-status,.wreck-return):before{content:"";position:absolute;inset:2px;z-index:-1;clip-path:inherit;background:radial-gradient(ellipse at 38% 110%,#af08245e,transparent 70%),linear-gradient(120deg,#210d19ef,#070c1a 48%,#250c18)}
.race-results[data-outcome="wreck"] .wreck-return:before{background:radial-gradient(ellipse at 12% 18%,#8d4d1b2b,transparent 70%),linear-gradient(120deg,#18151cef,#060d19 58%,#15131c)}
.race-results[data-outcome="wreck"] :is(.wreck-status,.wreck-return):after{content:"";position:absolute;inset:3px 3px 3px 78%;z-index:-1;background:repeating-linear-gradient(0deg,transparent 0 3px,#f4384c55 3px 4px);transform:skewX(-28deg);opacity:.65;pointer-events:none}
.race-results[data-outcome="wreck"] .wreck-return:after{background:repeating-linear-gradient(0deg,transparent 0 3px,#eaa34066 3px 4px)}
.race-results[data-outcome="wreck"] :is(.wreck-status,.wreck-return)>div{min-width:0}
.race-results[data-outcome="wreck"] :is(.wreck-status,.wreck-return) small{display:block;margin:0 0 1cqw;font:700 max(10px,1.9cqw)/1.1 Rajdhani,sans-serif;letter-spacing:.2cqw;color:#ff5863;white-space:nowrap}
.race-results[data-outcome="wreck"] .wreck-status strong{display:block;font:700 italic max(16px,3.35cqw)/1.12 'Chakra Petch',sans-serif;letter-spacing:-.06cqw;color:#fff7fa;white-space:nowrap;text-shadow:0 .12cqw .15cqw #3b1021,0 0 1.2cqw #ff4a7a44}
.race-results[data-outcome="wreck"] .wreck-warning{width:100%;height:auto;max-height:10.4cqw;fill:none;stroke:#fff0d9;stroke-width:3.4;stroke-linejoin:round;stroke-linecap:round;filter:drop-shadow(0 0 .24cqw #ffb190) drop-shadow(0 0 .55cqw #ff332a) drop-shadow(0 0 1.3cqw #ff2936)}
.race-results[data-outcome="wreck"] .wreck-return small{color:#ffdb73}
.race-results[data-outcome="wreck"] .wreck-credit-icon{display:block;width:100%;aspect-ratio:1;max-height:10.4cqw;background:url('../public/assets/hud-v8/coin.png') center/contain no-repeat;filter:drop-shadow(0 0 1.1cqw #ffad2855)}
.race-results[data-outcome="wreck"] .wreck-return-value{display:block;font:700 italic 6.4cqw/.98 'Chakra Petch',sans-serif;color:#ffeaa0;text-shadow:0 .2cqw .13cqw #755014,0 0 1.7cqw #ffb33488;font-variant-numeric:tabular-nums}
.race-results[data-outcome="wreck"] .wreck-wager{margin:1.1cqw 0 0;font:600 max(10px,1.3cqw)/1.2 Rajdhani,sans-serif;letter-spacing:.12cqw;color:#c8dfed;white-space:nowrap}
.race-results[data-outcome="wreck"] .wreck-wager :is(b,strong){font:700 italic max(13px,2cqw)/1 'Chakra Petch',sans-serif;color:#ff4e5c;letter-spacing:0}
.race-results[data-outcome="wreck"] .wreck-lost-strip{position:absolute;left:3.1%;top:73.4%;width:93.9%;height:9%;z-index:4;display:flex;align-items:center;justify-content:center;gap:3cqw;padding:0 5%;border-block:1px solid #1879b16b;background:linear-gradient(105deg,#031626e6,#030c17d9 55%,#061a2bcc);text-align:center}
.race-results[data-outcome="wreck"] .wreck-lost-strip:before,.race-results[data-outcome="wreck"] .wreck-lost-strip:after{content:"";position:absolute;top:0;bottom:0;width:3.4%;background:repeating-linear-gradient(0deg,#208eca80 0 2px,#12334a66 2px 4px);transform:skewX(-30deg);pointer-events:none}
.race-results[data-outcome="wreck"] .wreck-lost-strip:before{left:7%}.race-results[data-outcome="wreck"] .wreck-lost-strip:after{right:7%}
.race-results[data-outcome="wreck"] .wreck-lost-strip>span{font:600 max(10px,1.75cqw)/1.1 Rajdhani,sans-serif;color:#9dcbea;letter-spacing:.12cqw;white-space:nowrap}
.race-results[data-outcome="wreck"] .wreck-lost-strip>strong{font:700 italic max(20px,4.5cqw)/1 'Chakra Petch',sans-serif;color:#ff4e58;text-shadow:0 .15cqw .15cqw #5e0b1c,0 0 1.5cqw #ff263f66;white-space:nowrap;font-variant-numeric:tabular-nums}
.race-results[data-outcome="wreck"] .wreck-lost-strip>em{font:700 italic max(12px,2cqw)/1 'Chakra Petch',sans-serif;color:#ff5961;white-space:nowrap}
.race-results[data-outcome="wreck"] .results-actions{position:absolute;left:3.3%;right:3.45%;top:83.4%;height:10.8%;min-height:44px;margin:0;display:grid;grid-template-columns:minmax(0,729fr) minmax(0,610fr);gap:.8%;z-index:5}
.race-results[data-outcome="wreck"] .results-action{--wreck-button:#42ffb5;position:relative;isolation:isolate;min-height:44px;padding:0 4%;gap:2cqw;background:linear-gradient(135deg,#e9fff7,var(--wreck-button) 8%,#15b98d 63%,#d1ffde);color:#f2fff9;clip-path:polygon(2.5% 0,97.5% 0,100% 15%,100% 85%,97.5% 100%,2.5% 100%,0 85%,0 15%);border:0;font:700 italic max(16px,3.1cqw)/1.1 'Chakra Petch',sans-serif;letter-spacing:.02cqw;text-shadow:0 0 1cqw #79ffb866;transition:filter .16s,transform .16s}
.race-results[data-outcome="wreck"] .results-action:before{content:"";position:absolute;inset:2px;z-index:-1;clip-path:inherit;background:radial-gradient(ellipse at 50% 120%,#03ad5b55,transparent 75%),linear-gradient(180deg,#033726,#031d1b 55%,#06392a);box-shadow:inset 0 0 1.8cqw #11ff7544}
.race-results[data-outcome="wreck"] .results-garage{--wreck-button:#00c8ff;background:linear-gradient(135deg,#d3fcff,#00bfff 7%,#1286de 63%,#b6f3ff);color:#e8f6ff;text-shadow:0 0 1cqw #45b1ff88}
.race-results[data-outcome="wreck"] .results-garage:before{background:radial-gradient(ellipse at 50% 120%,#0079e34d,transparent 75%),linear-gradient(180deg,#032c4c,#03162c 55%,#073859);box-shadow:inset 0 0 1.8cqw #0099ff44}
.race-results[data-outcome="wreck"] .results-again>span{font:400 normal max(24px,5.2cqw)/1 Rajdhani,sans-serif}
.race-results[data-outcome="wreck"] .results-action>b{font:700 max(22px,4cqw)/1 Rajdhani,sans-serif;letter-spacing:-.35cqw;margin-left:.5cqw;color:var(--wreck-button)}
.race-results[data-outcome="wreck"] .results-action svg{width:4.6cqw;height:4.6cqw;min-width:23px;min-height:23px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linejoin:round}
.race-results[data-outcome="wreck"] .results-action:hover{filter:brightness(1.25);transform:translateY(-1px)}
.race-results[data-outcome="wreck"] .results-action:active{filter:brightness(.94);transform:translateY(1px)}
.race-results[data-outcome="wreck"] .results-action:focus-visible{outline:3px solid #fff;outline-offset:-6px;filter:brightness(1.2)}
.race-results[data-outcome="wreck"] .wreck-content:after{content:"";position:absolute;left:12%;top:31%;width:.35cqw;height:.18cqw;background:#ffefa9;box-shadow:11cqw -5cqw #ff8065,25cqw 3cqw #ffe2b0,49cqw -6cqw #ff7151,67cqw 7cqw #ffce8c,75cqw 1cqw #ff7347;z-index:3;pointer-events:none;opacity:0;animation:wreck-sparks .75s .16s ease-out both}
@keyframes wreck-arrive{from{opacity:0;transform:translateY(10px) scale(.985)}45%{opacity:1}to{opacity:1;transform:none}}
@keyframes wreck-sparks{0%{opacity:0;transform:translate(-1cqw,1cqw)}20%{opacity:1}100%{opacity:0;transform:translate(2cqw,-2cqw)}}

/* The desktop PNG already contains every border and button surface. Keep its
 * native decoration unobstructed; CSS panels below are the mobile fallback. */
@media(min-aspect-ratio:1001/1000){
 .race-results[data-outcome="wreck"] .results-shell:before{display:none}
 .race-results[data-outcome="wreck"] .results-shell:after{inset:3% 2% 4%;background:linear-gradient(180deg,#031020ad,#05111b70 40%,#020b1880)}
 .race-results[data-outcome="wreck"] :is(.wreck-status,.wreck-return,.wreck-lost-strip,.results-action){background:none;border:0;box-shadow:none}
 .race-results[data-outcome="wreck"] :is(.wreck-status,.wreck-return,.wreck-lost-strip,.results-action):before,.race-results[data-outcome="wreck"] :is(.wreck-status,.wreck-return,.wreck-lost-strip):after{display:none}
 .race-results[data-outcome="wreck"] .results-again:hover{background:#31ffa51c}
 .race-results[data-outcome="wreck"] .results-garage:hover{background:#259fff1c}
}

/* Stack content on phones instead of shrinking the reference into tiny text. */
@media(max-aspect-ratio:1/1){
 #result-screen.race-results[data-outcome="wreck"]{align-items:start;padding:12px}
 .race-results[data-outcome="wreck"] .results-shell{width:min(680px,100%);max-width:100%;aspect-ratio:auto;min-height:0;padding:18px 12px 14px;display:flex;flex-direction:column;gap:14px;overflow-x:clip;overflow-y:visible}
 .race-results[data-outcome="wreck"] .wreck-content{position:relative;inset:auto;display:grid;gap:12px;min-width:0;max-width:100%}
 .race-results[data-outcome="wreck"] .wreck-frame-art{display:none}
 .race-results[data-outcome="wreck"] .wreck-header{position:relative;inset:auto;height:auto;min-height:48px;padding:0 3px 10px;gap:14px}
 .race-results[data-outcome="wreck"] .wreck-brand{flex-basis:30%;font-size:clamp(28px,7cqw,44px);padding-right:12px;letter-spacing:-1px}
 .race-results[data-outcome="wreck"] .wreck-brand img{height:36px}
 .race-results[data-outcome="wreck"] .wreck-track{gap:5px}
 .race-results[data-outcome="wreck"] .wreck-track strong{font-size:clamp(13px,3.8cqw,20px);letter-spacing:1px}
 .race-results[data-outcome="wreck"] .wreck-track small{font-size:clamp(9px,2.5cqw,14px);letter-spacing:.6px;white-space:normal}
 .race-results[data-outcome="wreck"] .wreck-header>i{display:none}
 .race-results[data-outcome="wreck"] .wreck-hero-art{position:relative;inset:auto;width:94%;height:auto;aspect-ratio:2040/771;margin:0 1% 0 5%}
 .race-results[data-outcome="wreck"] .wreck-summary{position:relative;inset:auto;width:100%;height:auto;grid-template-columns:minmax(0,1fr);gap:10px}
 .race-results[data-outcome="wreck"] :is(.wreck-status,.wreck-return){min-height:104px;padding:13px 18px;grid-template-columns:60px minmax(0,1fr);column-gap:20px}
 .race-results[data-outcome="wreck"] :is(.wreck-status,.wreck-return) small{font-size:12px;letter-spacing:1.5px;margin-bottom:7px}
 .race-results[data-outcome="wreck"] .wreck-status strong{font-size:clamp(21px,6.5cqw,32px);letter-spacing:-.4px}
 .race-results[data-outcome="wreck"] :is(.wreck-warning,.wreck-credit-icon){width:60px;max-height:64px}
 .race-results[data-outcome="wreck"] .wreck-return-value{font-size:44px;line-height:.95}
 .race-results[data-outcome="wreck"] .wreck-wager{font-size:11px;margin-top:7px;letter-spacing:.7px}
 .race-results[data-outcome="wreck"] .wreck-wager :is(b,strong){font-size:16px}
 .race-results[data-outcome="wreck"] .wreck-lost-strip{position:relative;inset:auto;width:100%;height:auto;min-height:64px;gap:10px;padding:9px 6px;flex-wrap:wrap}
 .race-results[data-outcome="wreck"] .wreck-lost-strip:before,.race-results[data-outcome="wreck"] .wreck-lost-strip:after{opacity:.35}
 .race-results[data-outcome="wreck"] .wreck-lost-strip>span{font-size:11px;letter-spacing:.6px}
 .race-results[data-outcome="wreck"] .wreck-lost-strip>strong{font-size:29px}
 .race-results[data-outcome="wreck"] .wreck-lost-strip>em{font-size:13px}
 .race-results[data-outcome="wreck"] .results-actions{position:relative;inset:auto;flex:none;height:56px;min-height:56px;gap:10px;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr)}
 .race-results[data-outcome="wreck"] .results-action{font-size:clamp(14px,4cqw,21px);gap:8px;letter-spacing:0;padding:0 5px}
 .race-results[data-outcome="wreck"] .results-again>span{font-size:29px}
 .race-results[data-outcome="wreck"] .results-action>b{font-size:24px;letter-spacing:-2px;margin-left:0}
 .race-results[data-outcome="wreck"] .results-action svg{width:23px;height:23px}
}
@media(min-width:650px) and (max-aspect-ratio:1/1){
 .race-results[data-outcome="wreck"] .wreck-summary{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
 .race-results[data-outcome="wreck"] :is(.wreck-status,.wreck-return){min-height:126px;padding:13px 15px;grid-template-columns:52px minmax(0,1fr);column-gap:12px}
 .race-results[data-outcome="wreck"] .wreck-status strong{font-size:23px}
 .race-results[data-outcome="wreck"] :is(.wreck-warning,.wreck-credit-icon){width:52px}
 .race-results[data-outcome="wreck"] .wreck-lost-strip{min-height:70px;gap:22px}
 .race-results[data-outcome="wreck"] .wreck-lost-strip>span{font-size:15px}
}
@media(max-height:620px) and (min-aspect-ratio:1/1){
 .race-results[data-outcome="wreck"] .results-actions{top:calc(88.8% - 22px);bottom:auto;height:44px;min-height:44px}
 .race-results[data-outcome="wreck"] .results-action{font-size:max(15px,2.8cqw);gap:1.5cqw}
 .race-results[data-outcome="wreck"] .wreck-lost-strip{gap:2cqw}
 .race-results[data-outcome="wreck"] .wreck-lost-strip>span{font-size:max(9px,1.6cqw)}
 .race-results[data-outcome="wreck"] .wreck-lost-strip>strong{font-size:max(18px,4cqw)}
 .race-results[data-outcome="wreck"] .wreck-lost-strip>em{font-size:max(11px,1.8cqw)}
 .race-results[data-outcome="wreck"] :is(.wreck-status,.wreck-return){padding:3% 4%;column-gap:3%}
 .race-results[data-outcome="wreck"] .wreck-status strong{font-size:max(14px,3.1cqw)}
 .race-results[data-outcome="wreck"] .wreck-wager{font-size:max(9px,1.3cqw);letter-spacing:.04cqw}
}
@media(max-height:360px) and (min-aspect-ratio:1/1){
 #result-screen.race-results[data-outcome="wreck"]{padding:6px}
 .race-results[data-outcome="wreck"] .results-shell{width:min(1100px,calc(100vw - 12px),calc((100dvh - 12px)*1.343434));min-height:280px}
 .race-results[data-outcome="wreck"] .wreck-track small{font-size:8px}
}
@media(prefers-reduced-motion:reduce){
 .race-results[data-outcome="wreck"] .results-shell,.race-results[data-outcome="wreck"] .wreck-content:after{animation:none!important}
 .race-results[data-outcome="wreck"] .results-action{transition:none;transform:none!important}
}
#app[data-reduced-motion="true"] .race-results[data-outcome="wreck"] .results-shell,#app[data-reduced-motion="true"] .race-results[data-outcome="wreck"] .wreck-content:after{animation:none!important}
#app[data-reduced-motion="true"] .race-results[data-outcome="wreck"] .results-action{transition:none;transform:none!important}