.race-viewport{width:100%;height:100%}
.mobile-pan-hint{display:none}
@media(max-width:1000px){
 html,html.fit-screen,html.fit-screen body{height:auto;min-height:100%;width:100%;overflow-x:hidden;overflow-y:auto}
 body{background-color:#102a58;display:flex;flex-direction:column;padding-bottom:env(safe-area-inset-bottom)}
 html #gameContent,html.fit-screen #gameContent{position:static;width:100%;max-width:100%;margin:0;transform:none;order:0}
 html header,html.fit-screen header{height:auto;min-height:0;display:flex;flex-wrap:wrap;gap:10px;padding:10px 12px}
 html header .brand,html.fit-screen header .brand{font-size:20px;letter-spacing:2px}
 html .brand img,html.fit-screen .brand img{width:38px;height:44px}
 html nav,html.fit-screen nav{margin:0;display:flex;flex-wrap:wrap;width:100%;gap:6px}
 html nav button,html.fit-screen nav button{min-height:44px;padding:8px 10px;font-size:12px;flex:1;white-space:nowrap}
 html main,html.fit-screen main{padding:0 10px;max-width:100%}
 html .stage,html.fit-screen .stage{height:auto;display:grid;grid-template-columns:minmax(0,1fr);gap:12px;padding:10px 0 14px;--wheel-stage-size:min(78vw,330px)}
 html .wheel-column{height:auto;justify-self:center;order:0}
 html .stage .wheel-column .wheel-wrap{width:var(--wheel-stage-size);height:var(--wheel-stage-size);margin:0;transform:none}
 html .wheel-wrap::before,html .wheel-wrap::after{inset:0;transform:none}
 html .stage .wheel-wrap canvas{width:100%;height:100%;transform:none}
 html .right-panel,html.fit-screen .right-panel{max-width:480px;width:100%;padding:0;justify-self:center;order:1}
 html .hand{gap:7px;margin-top:8px}
 html .hand img,html.fit-screen .hand img{width:calc((100% - 28px)/5);height:auto;aspect-ratio:537/750;object-fit:contain}
 html .panel-heading span{display:inline}
 html #handName{height:auto;min-height:16px;margin:8px 0;font-size:11px}
 html #bonus{min-height:66px;height:auto;padding:10px;gap:9px}
 html #bonus b{font-size:16px;letter-spacing:.3px}
 html #bonus small{font-size:10px}
 html .auto-bonus{min-height:40px;margin:4px 0;display:flex;align-items:center;font-size:12px}
 html .auto-bonus input{width:22px;height:22px;flex-shrink:0}
 html .betting,html.fit-screen .betting{padding:10px 8px 0;transform:none;opacity:1;min-width:0}
 html .betting-heading,html.fit-screen .betting-heading{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;min-height:0}
 html .betting-heading>div:first-child,html.fit-screen .betting-heading>div:first-child{width:100%;text-align:center}
 html .bet-announcement{position:relative;left:auto;top:auto;transform:none;order:1;width:100%;justify-content:center;min-height:48px}
 html .spot-modes{order:2;display:flex;flex-wrap:wrap;justify-content:center;width:100%;gap:5px}
 html .spot-modes button{min-height:44px;font-size:11px;padding:8px}
 html #racetrackToggle{flex-basis:140px;width:140px;height:46px;font-size:13px}
 .mobile-pan-hint{display:block;text-align:center;color:#c4d8ea;font-size:11px;line-height:1.5;margin:10px 2px}
 html .table-scroll,html.fit-screen .table-scroll{overflow:auto;max-width:100%;overscroll-behavior-x:contain;scrollbar-width:thin;scrollbar-color:#d3b971 #102744}
 html .table-surface,html.fit-screen .table-surface{min-width:0;width:100%}
 html .layout,html.fit-screen .layout{min-width:0;width:100%;height:auto;aspect-ratio:4.5/18.5;margin:4px 0 12px}
 html .spot{touch-action:pan-x pan-y}
 html .spot:has(.stake:not(.bet-preview)){touch-action:none}
 html .bet-info{height:auto;min-height:28px;font-size:10px;padding:7px 2px;overflow-wrap:anywhere}
 html .controls,html.fit-screen .controls{display:flex;flex-direction:column;gap:12px;padding:12px 0;align-items:stretch}
 html .controls>.account-summary,html.fit-screen .controls>.account-summary{width:100%;max-width:none;order:0}
 html .account-frame{padding:8px 5px;min-height:55px}
 html .account-frame strong{font-size:19px}
 html .account-summary-heading button{min-height:36px;font-size:11px}
 html .controls>.chips,html.fit-screen .controls>.chips{width:100%;order:1;display:flex;justify-content:center;gap:6px;padding:7px 0;margin:0}
 html .chip,html.fit-screen .chip{width:40px;height:40px;flex:0 0 40px;font-size:13px}
 html .controls-end,html.fit-screen .controls-end{width:100%;order:2;display:block}
 html .actions,html.fit-screen .actions{width:100%;margin:0;display:flex;gap:7px;flex-wrap:nowrap}
 html .actions button{flex:1;min-width:0;width:auto;min-height:48px;height:auto;font-size:16px}
 html .table-statistics,html:not(.fit-screen) .table-statistics{display:block;width:100%;max-width:none;padding:18px 0;opacity:1}
 html .quarter-stats{gap:6px}html .suit-stats{gap:5px}
 html .quarter-stat,html .suit-stat{min-width:0}
 html footer,html.fit-screen footer{height:auto;min-height:48px;flex-wrap:wrap;gap:8px;padding:8px 0}
 html footer .footer-round,html.fit-screen footer .footer-round{display:flex}
 html .recent-rail{position:static;order:1;width:auto;height:auto;padding:12px 10px;border:0;background:#102744;margin:0 10px;border-radius:10px}
 html .rail-title{font-size:12px;margin-bottom:8px}.rail-title br{display:none}
 html .recent-rail .recent{display:flex;overflow-x:auto;gap:6px;padding-bottom:6px}
 html .recent-rail .recent>div{flex:0 0 66px;height:68px;font-size:24px}
 html .temperature-rail{position:static;order:2;width:auto;height:auto;margin:12px 10px;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:10px;border:0;background:none}
 html .temperature-group{padding:8px;border-radius:10px}
 html .temperature-list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:auto;gap:6px}
 html .stat-ball{width:58px;max-width:100%;height:auto;aspect-ratio:1}
 html #temperatureWindow{text-align:center;margin-bottom:12px}
 html .racetrack{aspect-ratio:auto;height:auto;container-type:normal;display:flex;flex-direction:column}
 html .race-viewport{overflow-x:auto;width:100%;height:auto;overscroll-behavior-x:contain}
 html #raceSvg{width:100%;height:auto;aspect-ratio:520/1500;max-width:100%;overflow:hidden}
 html .race-controls{position:static;order:-1;width:100%;padding:12px;gap:8px;margin-bottom:10px;pointer-events:auto}
 html .race-controls>small:first-child{font-size:12px}html .race-controls>span,html .race-controls>small:last-child{font-size:11px}
 html .race-controls>b{font-size:17px}html .race-controls p{font-size:13px;line-height:1.6}
 html .race-stepper{gap:22px}html .race-stepper button{width:48px;height:48px;font-size:30px}html .race-stepper strong{font-size:32px}
 html.spin-focus .stage .wheel-column .wheel-wrap,html.spin-focus.fit-screen .stage .wheel-column .wheel-wrap{transform:scale(1.03);transform-origin:center}
 html.spin-focus .stage .right-panel{opacity:.8;pointer-events:auto}
 html.spin-focus .betting{transform:none;opacity:.85;pointer-events:auto}
 html #payoutPopup{max-width:95%;width:95%}html #payoutAmount{font-size:27px}
 html #pokerCelebration{width:min(90vw,80dvh);height:min(90vw,80dvh);padding:18px;gap:16px}
 html #pokerCelebration strong{font-size:25px}html #pokerCelebration b{font-size:22px;padding:12px 6px}
 html dialog{max-height:90dvh;max-width:94vw;padding:24px 16px;overflow:auto}html dialog input{font-size:16px}
 html #toast{bottom:16px;width:max-content;max-width:92vw;font-size:13px}
 @media(min-width:600px){
  html .stage,html.fit-screen .stage{grid-template-columns:1fr 1fr;align-items:center;--wheel-stage-size:min(36vw,300px)}
  html .chip,html.fit-screen .chip{width:46px;height:46px;flex-basis:46px}
  html .temperature-rail{grid-template-columns:1fr 1fr}html #temperatureWindow{grid-column:1/-1}
 }
}

@media(max-width:1000px){
 html #layout .spot.split,html #layout .spot.corner{width:calc(100cqw / 9)!important;height:calc(100cqw / 9)!important}
 html #layout .stake,html #layout .spot.winner::after{width:calc(100cqw / 9);height:calc(100cqw / 9)}
 html #layout .stake{font-size:15px!important}
 html #layout .spot.straight{font-size:clamp(23px,7cqw,36px)}
 html #layout .spot.quarter,html #layout .spot.red:not(.straight):not(.suit),html #layout .spot.black:not(.straight):not(.suit){font-size:16px}
 html .winning-dolly{width:9cqw;height:9cqw}
 html .table-scroll{overflow:visible}
 html .race-viewport{overflow:visible}
 html .race-face{font-size:27px}
 html .race-quarter-label{font-size:20px;letter-spacing:1px}
}

/* Keep the complete betting table and its controls within the phone viewport. */
@media(max-width:1000px){
 html .betting{--mobile-table-height:clamp(280px,calc(100dvh - 330px),650px)}
 html .layout,html.fit-screen .layout{height:var(--mobile-table-height);aspect-ratio:auto;margin:4px 0}
 html .betting-heading>div:first-child,html.fit-screen .betting-heading>div:first-child,.mobile-pan-hint,html .bet-info{display:none}
 html .bet-announcement{height:38px;min-height:38px}
 html .betting-heading,html.fit-screen .betting-heading{gap:4px}
 html .spot-modes{flex-wrap:nowrap;gap:3px}
 html .spot-modes button{font-size:10px;padding:5px;min-height:36px}
 html #racetrackToggle{width:120px;flex-basis:120px;height:40px;font-size:12px}
 html #layout .spot.straight,html #layout .spot.suit{font-size:clamp(14px,calc(var(--mobile-table-height)/28),25px)}
 html #layout .spot.quarter,html #layout .spot.red:not(.straight):not(.suit),html #layout .spot.black:not(.straight):not(.suit){font-size:clamp(9px,2.8cqw,13px);letter-spacing:0;padding:3px;overflow-wrap:normal}
 html #layout .spot.split,html #layout .spot.corner{width:min(9cqw,calc(var(--mobile-table-height)/30))!important;height:min(9cqw,calc(var(--mobile-table-height)/30))!important}
 html #layout .stake,html #layout .spot.winner::after{width:min(9cqw,calc(var(--mobile-table-height)/30));height:min(9cqw,calc(var(--mobile-table-height)/30));border-width:1px}
 html #layout .stake{font-size:clamp(8px,calc(var(--mobile-table-height)/55),12px)!important}
 html .winning-dolly{width:calc(var(--mobile-table-height)/25);height:calc(var(--mobile-table-height)/25);min-width:0;min-height:0}
 html .controls,html.fit-screen .controls{gap:6px;padding:6px 0}
 html .account-summary-heading{margin:0}html .account-summary-heading button{min-height:24px;padding:3px 6px}
 html .account-frame{min-height:40px;padding:4px 5px}html .account-frame strong{font-size:17px}
 html .controls>.chips,html.fit-screen .controls>.chips{padding:5px 0;gap:6px}
 html .chip,html.fit-screen .chip{width:36px;height:36px;flex-basis:36px}
 html .actions button{min-height:36px;font-size:14px}
}