/* Supplied hover illustrations retain their native pixels and transparency.
   SELECT COURSE keeps its live label; RACE already contains its original text. */
#app.setup-reference #setup-footer :is(#select-course,#race-button){isolation:isolate}
#app.setup-reference #setup-footer #select-course{--button-hover-art:url('../public/assets/button-hover-v2/course.png')}
#app.setup-reference #setup-footer #race-button{--button-hover-art:url('../public/assets/button-hover-v2/race.png')}
#app.setup-reference #setup-footer :is(#select-course,#race-button)::after{content:'';display:block;position:absolute;inset:0;z-index:0;pointer-events:none;background:var(--button-hover-art) center/100% 100% no-repeat;border:0;box-shadow:none;clip-path:none;mask:none;opacity:0;animation:none;transition:none}
#app.setup-reference #setup-footer :is(#select-course,#race-button)>span,
#app.setup-reference #setup-footer :is(#select-course,#race-button)>b{position:relative;z-index:1}
#app.setup-reference #setup-footer :is(#select-course,#race-button):enabled:not([aria-busy="true"]):is(:hover,:focus-visible){box-shadow:none;filter:none;outline:0;transform:none}
#app.setup-reference #setup-footer :is(#select-course,#race-button):enabled:not([aria-busy="true"]):is(:hover,:focus-visible)::before{content:none}
#app.setup-reference #setup-footer :is(#select-course,#race-button):enabled:not([aria-busy="true"]):is(:hover,:focus-visible)::after{opacity:1}
@media(orientation:landscape){
 #app.setup-reference #setup-footer :is(#select-course,#race-button){overflow:visible}
 #app.setup-reference #setup-footer :is(#select-course,#race-button)::before{content:none}
 /* The native buttons cover their illustrated frames, not just the central
    lettering. Keep the existing art origins and label centres unchanged.
    Course starts below the car shelf; its upper 20px are only hover glow. */
 #app.setup-reference #setup-footer #select-course{left:550px;top:774px;width:560px;height:160px;padding:0 6px 20px}
 #app.setup-reference #setup-footer #race-button{left:1219px;top:794px;width:443px;height:136px;padding:2px 0 0 7px}
 #app.setup-reference #setup-footer #select-course::after{inset:auto;left:0;top:-20px;width:560px;height:180px}
 #app.setup-reference #setup-footer #race-button::after{inset:0;width:443px;height:136px}
 /* Preparation keeps its existing small label mask inside the larger target. */
 #app.setup-reference #setup-footer #race-button[aria-busy="true"]{background-size:320px 60px;background-position:65px 39px;background-repeat:no-repeat}
}
@media(orientation:portrait){
 #app.setup-reference #setup-footer :is(#select-course,#race-button)::after{inset:0;width:auto;height:auto;background-size:100% 100%}
 /* Compact layouts already use live lettering. Keep it unchanged by showing
    only the illustrated rim around the existing gold face and label. */
 #app.setup-reference #setup-footer #race-button::after{mask-image:linear-gradient(to right,#000 15%,transparent 19% 80%,#000 84%),linear-gradient(to bottom,#000 23%,transparent 29% 68%,#000 74%);mask-composite:add}
}