/* Independent course cards share one row and label baseline. Selection changes
   the illustrated frame and light, never the card's layout dimensions. */
#app.setup-reference #tracks-screen .track-grid{align-items:end;isolation:isolate}
#app.setup-reference #tracks-screen .track-card{--course-frame-border:16px;--course-selected-frame-inset:calc(.41534 * var(--course-frame-border) - 8.7607%) calc(.39784 * var(--course-frame-border) - 5.255%) calc(.59534 * var(--course-frame-border) - 8.7607%);position:relative;padding:0;margin:0;border:0;border-image:none;outline:0;clip-path:none;background:none;box-shadow:none;filter:brightness(.94);transform:none;overflow:visible;isolation:isolate;transition:filter .16s ease}
#app.setup-reference #tracks-screen .track-card:before{content:'';display:block;position:absolute;inset:7px;z-index:-1;background:#030b16;border:0;box-shadow:none;clip-path:polygon(9px 0,calc(100% - 9px) 0,100% 9px,100% calc(100% - 9px),calc(100% - 9px) 100%,9px 100%,0 calc(100% - 9px),0 9px)}
#app.setup-reference #tracks-screen .track-card:after{content:'';display:block;position:absolute;inset:0;width:auto;height:auto;padding:0;border:var(--course-frame-border) solid transparent;border-image:url('../public/assets/ui-v2/modal-frame.png') 150 / var(--course-frame-border) stretch;background:none;clip-path:none;box-shadow:none;opacity:1;z-index:4;pointer-events:none}
#app.setup-reference #tracks-screen .track-card .track-card-image{display:block;position:absolute;inset:15px 15px 28px;background-size:cover;background-position:center!important;clip-path:polygon(7px 0,calc(100% - 7px) 0,100% 7px,100% 100%,0 100%,0 7px);opacity:1;transform:none}
#app.setup-reference #tracks-screen .track-card .track-copy{display:flex;position:absolute;left:15px;right:15px;bottom:14px;height:40px;align-items:center;justify-content:center;gap:0;padding:5px 10px 0;background:linear-gradient(transparent,#030b16e6 30%,#030b16);z-index:3;color:#bceeff;text-align:center}
#app.setup-reference #tracks-screen .track-copy strong{position:static;display:block;min-width:0;width:100%;margin:0;font-family:Rajdhani,sans-serif;font-size:26px;font-weight:700;font-style:italic;line-height:1;letter-spacing:.4px;white-space:nowrap;text-shadow:0 1px 4px #000;color:#edfaff}
#app.setup-reference #tracks-screen .track-card .track-number,
#app.setup-reference #tracks-screen .course-risk-dots{display:none}
#app.setup-reference #tracks-screen .track-card:hover:not(:disabled){filter:brightness(1.1);box-shadow:none}
#app.setup-reference #tracks-screen .track-card.active,
#app.setup-reference #tracks-screen .track-card.active:hover:not(:disabled){border:0;border-image:none;outline:0;clip-path:none;background:none;box-shadow:none;filter:brightness(1.04);z-index:2}
/* Match the selected PNG's inner octagon. The ordinary card's shallow
   corner cuts otherwise leave an opaque navy mat outside the neon rim.
   Insets compensate the PNG's transparent margins: its bright rim at
   y=82/1018 of 1100 aligns with the ordinary frame's 51/78px border slices. */
#app.setup-reference #tracks-screen .track-card.active:before{inset:var(--course-selected-frame-inset);clip-path:polygon(12.4% 10.4%,88.6% 10.4%,93.8% 16.7%,93.8% 83.3%,88.6% 90.1%,12.4% 90.1%,6.9% 83.3%,6.9% 16.7%)}
#app.setup-reference #tracks-screen .track-card.active .track-card-image{clip-path:polygon(8% 0,92% 0,100% 14%,100% 100%,0 100%,0 14%)}
#app.setup-reference #tracks-screen .track-card.active .track-copy{clip-path:polygon(0 0,100% 0,100% 40%,92% 100%,8% 100%,0 40%)}
#app.setup-reference #tracks-screen .track-card.active:after{content:'';inset:var(--course-selected-frame-inset);width:auto;height:auto;border:0;border-image:none;background:url('../public/assets/garage-selection-v2/frame.png') center/100% 100% no-repeat;clip-path:none;box-shadow:none;filter:none}
#app.setup-reference #tracks-screen .track-card:focus-visible:after{filter:brightness(1.2) drop-shadow(0 0 3px #66eaff)}
@media(orientation:landscape){
 #app.setup-reference #tracks-screen .track-grid{top:567px;height:224px;grid-template-rows:224px}
 #app.setup-reference #tracks-screen .track-card,
 #app.setup-reference #tracks-screen .track-card.active{height:196px}
}
@media(orientation:portrait){
 #app.setup-reference #tracks-screen .track-grid{height:166px;padding:4px 3px 4px;align-items:end}
 #app.setup-reference #tracks-screen .track-card,
 #app.setup-reference #tracks-screen .track-card.active{--course-frame-border:11px;height:128px}
 #app.setup-reference #tracks-screen .track-card{flex:0 0 168px}
 #app.setup-reference #tracks-screen .track-card .track-card-image{inset:11px 11px 24px}
 #app.setup-reference #tracks-screen .track-card .track-copy{left:11px;right:11px;bottom:10px;height:31px;padding:3px 1px 0}
 #app.setup-reference #tracks-screen .track-copy strong{font-size:19px;letter-spacing:0}
 #app.setup-reference #tracks-screen .track-disclosure{top:calc(var(--course-height) + 185px)}
}
/* Tablet portrait uses the same stacked course flow as phones. The older
   max-width:650px menu rules otherwise leave a narrow desktop side panel. */
@media(orientation:portrait) and (min-width:651px){
 #app.setup-reference[data-screen="tracks"] .topbar{position:relative;height:136px;padding:0 16px;display:block;background:linear-gradient(#010714b3,transparent)}
 #app.setup-reference[data-screen="tracks"] .brand{position:absolute;left:16px;top:0;width:300px;height:82px;transform:none}
 #app.setup-reference[data-screen="tracks"] .setup-context{position:absolute;left:16px;right:16px;top:83px;max-width:none;display:flex;align-items:center;gap:14px}
 #app.setup-reference[data-screen="tracks"] .setup-context h1{position:static;margin:0;font-size:24px;letter-spacing:1px;white-space:normal}
 #app.setup-reference[data-screen="tracks"] .setup-back{display:grid;flex:0 0 48px;width:48px;height:44px;padding:7px}
 #app.setup-reference[data-screen="tracks"] .setup-back svg{width:23px;height:27px}
 #app.setup-reference[data-screen="tracks"] .top-actions{position:absolute;left:auto;right:16px;top:17px;margin:0;display:flex;align-items:center;gap:8px}
 #app.setup-reference[data-screen="tracks"] .wallet{position:relative;inset:auto;min-width:132px;height:51px;padding:6px 10px;gap:6px}
 #app.setup-reference[data-screen="tracks"] .wallet .coin-symbol{width:28px;height:31px}
 #app.setup-reference[data-screen="tracks"] .wallet strong{font-size:24px}
 #app.setup-reference[data-screen="tracks"] .icon-button,
 #app.setup-reference[data-screen="tracks"] #sound-button{display:grid;width:44px;height:44px;min-width:44px;padding:8px;font-size:22px}
 #app.setup-reference[data-screen="tracks"] #help-button{display:none}
 #app.setup-reference #tracks-screen.setup-screen{--course-height:clamp(330px,42dvh,460px);position:absolute;inset:136px 16px calc(var(--wager-footer-height) + 6px);padding:0;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#2698d9 #031227}
 #app.setup-reference #tracks-screen .track-feature{position:absolute;inset:0 0 auto;height:var(--course-height);min-height:0;padding:7px;display:block}
 #app.setup-reference #tracks-screen .track-feature-image{inset:7px;background-size:cover}
 #app.setup-reference #tracks-screen .track-feature-title{inset:8px 8px auto;width:auto;max-width:none;padding:16px 20px;gap:12px}
 #app.setup-reference #tracks-screen .track-feature-title h2{font-size:32px;line-height:1;letter-spacing:.5px}
 #app.setup-reference #tracks-screen .track-feature-title small{font-size:11px;letter-spacing:2.2px}
 #app.setup-reference #tracks-screen .track-feature-title .setup-icon{width:45px;height:45px}
 #app.setup-reference #tracks-screen .course-arrow{top:calc(var(--course-height) * .34);width:44px;height:72px}
 #app.setup-reference #tracks-screen .course-arrow.previous{left:9px}
 #app.setup-reference #tracks-screen .course-arrow.next{right:9px}
 #app.setup-reference #tracks-screen .track-grid{position:absolute;left:0;right:0;top:calc(var(--course-height) + 12px);bottom:auto;width:auto;height:166px;display:flex;align-items:end;gap:12px;padding:4px 4px 4px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x proximity;scrollbar-width:thin;scrollbar-color:#2da5e1 #051122}
 #app.setup-reference #tracks-screen .track-card{flex:0 0 clamp(180px,28vw,238px);width:auto;scroll-snap-align:center}
 #app.setup-reference #tracks-screen .track-copy strong{font-size:22px}
 #app.setup-reference #tracks-screen .track-disclosure{position:absolute;left:0;right:0;top:calc(var(--course-height) + 185px);bottom:auto;height:28px;display:block;text-align:center;font-size:8px;line-height:1.5}
 #app.setup-reference #tracks-screen .track-disclosure strong{display:block;font-size:9px;letter-spacing:1.4px}
 #app.setup-reference[data-screen="tracks"] #setup-footer.setup-footer{left:50%;right:auto;width:var(--wager-panel-width);transform:translateX(-50%);grid-template-columns:90px minmax(0,1fr);gap:4px 10px}
}
#app.setup-reference #tracks-screen .track-disclosure{display:none}
#app.setup-reference[data-reduced-motion="true"] #tracks-screen .track-card{transition:none}
@media(prefers-reduced-motion:reduce){#app.setup-reference #tracks-screen .track-card{transition:none}}