@font-face{font-family:Titan;src:url('assets/TitanOne-Latin.woff2') format('woff2');font-display:swap}@font-face{font-family:Nunito;src:url('assets/Nunito-Latin.woff2') format('woff2');font-weight:200 1000;font-display:swap}
:root{color-scheme:dark;--navy:#062f3d;--mint:#38eed7;--gold:#ffdf64;--cream:#fff6db;--coral:#ff7553}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at top,#1b5665,#051c2b 75%);font-family:Nunito,system-ui,sans-serif;color:var(--cream)}button,input{font:inherit}button,a{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:disabled{cursor:default;opacity:.48}button[hidden],[hidden]{display:none!important}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid var(--mint);outline-offset:4px}a{color:inherit}.topbar{max-width:1420px;margin:auto;display:flex;align-items:center;gap:22px;padding:13px 22px}.brand{display:flex;align-items:center;gap:9px;text-decoration:none}.brand img{height:54px;width:55px;object-fit:contain}.brand>span{font:28px/1 Titan}.brand small{display:block;font:1000 8px Nunito;letter-spacing:1.6px;color:var(--mint);margin-top:7px}.balance-box{margin:auto;text-align:center;display:grid;gap:2px}.balance-box small{font-size:9px;font-weight:1000;letter-spacing:1.6px;color:#a8e4ed}.balance-box strong{font:29px Titan;color:var(--gold)}.balance-box span{font-size:8px;color:#a8c3cb}.toolbar{display:flex;gap:7px}.toolbar button,.toolbar a{min-height:42px;background:#123d4c;color:var(--cream);border:1px solid #658290;border-radius:8px;padding:10px 13px;font-weight:1000;font-size:11px;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;white-space:nowrap}.toolbar button:hover,.toolbar a:hover{background:#1e5665}main{max-width:1420px;padding:0 20px;margin:auto}.derby{overflow:hidden;position:relative;border:3px solid var(--gold);border-radius:25px;background:linear-gradient(#04526922,#04334233),url('assets/beach-opt-ba69cb67f16f.webp') center top/cover no-repeat,#128798;box-shadow:0 0 0 6px #0c5969,0 20px 50px #0005;padding:21px 31px 10px}.poster{text-align:center;position:relative;padding-bottom:17px}.presents{font-size:10px;font-weight:1000;letter-spacing:3px;color:var(--mint);text-shadow:0 2px #063a41}.poster h1{font:clamp(38px,4.2vw,64px)/1.05 Titan;margin:6px 0 6px;color:var(--cream);text-shadow:3px 4px #092d3d,-2px -2px #092d3d,2px -2px #092d3d,-2px 2px #092d3d;transform:rotate(-2deg)}.poster h1 span{color:var(--gold)}.poster p{font-size:9px;font-weight:1000;letter-spacing:1.7px;margin:8px 0 10px;text-shadow:0 2px #083949}.headline-stamps{display:flex;justify-content:center;gap:12px}.headline-stamps span{background:var(--mint);color:var(--navy);font-weight:1000;font-size:8px;padding:5px 13px;border:2px solid #093744;border-radius:5px;box-shadow:2px 3px #001f2955;transform:rotate(-3deg)}.headline-stamps span+span{background:var(--gold);transform:rotate(3deg)}.race-card{border:3px solid #064154;background:#f6d993;box-shadow:0 0 0 2px #ffe79c,0 8px #05394899;border-radius:17px;overflow:hidden;position:relative}.race-caption{padding:11px 20px 9px;text-align:center;background:linear-gradient(100deg,#063e4e,#076171);position:relative;z-index:2;border-bottom:3px solid #062f3d}.race-caption>span{color:var(--mint);font-size:7px;font-weight:1000;letter-spacing:2px}.race-caption strong{display:block;font:19px/1.2 Titan;color:var(--cream);margin:4px 0}.race-caption>div{font-size:10px;color:#c6f6eb}.track-wrap{position:relative;padding:19px 35px 5px 17px;background:radial-gradient(circle at 15% 30%,#fff0bd 0,transparent 35%),repeating-linear-gradient(105deg,#c98e3822 0 1px,transparent 1px 14px),linear-gradient(#f5d78e,#efc774);overflow:hidden}.track{height:336px;position:relative}.lane{height:56px;position:relative;border-bottom:1px dashed #a5763477;background:linear-gradient(90deg,#ffefc533,transparent)}.lane:last-of-type{border-bottom:none}.lane.selected{background:linear-gradient(90deg,#a0fff259,#b8ffdd28 75%,transparent)}.lane-name{position:absolute;left:0;top:8px;height:35px;min-width:35px;padding:2px 7px;border:2px solid #073744;border-radius:50%;font:17px Titan;display:grid;place-content:center;background:var(--c);color:var(--navy);box-shadow:0 2px #052f4044}.lane.selected .lane-name:after{content:'★';position:absolute;right:-9px;top:-7px;color:#036764;font-size:16px;text-shadow:0 1px #fff}.runner{position:absolute;top:-5px;left:52px;width:77px;height:60px;will-change:transform;transform:translateX(0)}.runner svg{overflow:visible;width:77px;height:62px;filter:drop-shadow(1px 5px 1px #6a4a3240)}.lane.selected .runner svg{filter:drop-shadow(0 0 3px #fff) drop-shadow(1px 5px 1px #6a4a3240)}.runner .body{transform-origin:60px 55px}.runner.running .body{animation:crab-bob .22s infinite alternate}.runner.running .legs-left{transform-origin:48px 57px;animation:left-leg .18s infinite alternate}.runner.running .legs-right{transform-origin:72px 57px;animation:right-leg .18s infinite alternate}.runner.running .claw-left{transform-origin:35px 43px;animation:right-leg .25s infinite alternate}.runner.running .claw-right{transform-origin:84px 43px;animation:left-leg .24s infinite alternate}.runner.running:after{content:'· ·';font-size:22px;position:absolute;color:#e4ab49;left:-18px;bottom:1px;animation:dust .3s infinite}.finish-line{position:absolute;right:7px;width:15px;height:100%;top:0;background:repeating-conic-gradient(#fffaf0 0% 25%,#063849 0% 50%) 0 0/14px 14px;box-shadow:-2px 0 #d9b26a,2px 0 #d9b26a;z-index:0}.start-label,.finish-label{position:absolute;top:4px;font-size:7px;font-weight:1000;letter-spacing:1.4px;color:#73562a;z-index:1}.start-label{left:67px}.finish-label{right:29px}.countdown{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);color:var(--navy);background:#fff8dcf5;border:3px solid #073f4a;box-shadow:5px 6px #043d4355;border-radius:16px;padding:15px 28px;z-index:4;text-align:center;min-width:130px;font:57px Titan;pointer-events:none}.countdown small{display:block;font:1000 9px Nunito;letter-spacing:1.5px;color:#037781;margin-bottom:6px}.photo-flash{pointer-events:none;position:absolute;inset:0;background:#fff;opacity:0;z-index:6}.photo-flash.flash{animation:flash .55s}.race-result{position:relative;z-index:2;text-align:center;background:#073c4c;padding:11px 20px 12px;display:grid;gap:3px;border-top:3px solid #042f3a;min-height:58px}.race-result strong{font:16px Titan;color:var(--gold)}.race-result span{font-size:10px}.race-result.win{background:#0b6a59}.race-result.lose{background:#572f3a}.entry-panel{background:linear-gradient(140deg,#fff6dbee,#ffebbeee);border:3px solid #083e4a;border-radius:16px;color:var(--navy);padding:14px 19px;margin-top:20px;box-shadow:0 5px #00374855}.selection-heading{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:10px}.selection-heading h2{font:19px Titan;margin:0;color:#075462}.selection-heading span{font-size:9px;font-weight:1000}.crab-choices{display:grid;grid-template-columns:repeat(6,1fr);gap:9px}.crab-choice{position:relative;min-width:0;border:2px solid #427079;border-radius:9px;color:var(--navy);background:#fef9e8;padding:6px 5px 7px;display:grid;justify-items:center;gap:2px;box-shadow:0 3px #7c9b9166}.crab-choice svg{height:42px;width:58px;overflow:visible}.crab-choice strong{font-size:10px;font-weight:1000;white-space:nowrap}.crab-choice span{font-size:8px;color:#366575}.crab-choice[aria-pressed=true]{border-color:#02696b;background:#a4f8df;box-shadow:0 3px #02696b,0 0 0 2px #05c1a233}.crab-choice[aria-pressed=true]:after{content:'YOUR CRAB';position:absolute;right:4px;top:3px;font-size:5px;font-weight:1000;color:#035a56}.crab-choice:hover:not(:disabled){transform:translateY(-2px)}.bet-row{display:flex;align-items:center;gap:16px;margin-top:15px;border-top:1px dashed #93aa94;padding-top:13px}.bet-row label{font-size:8px;font-weight:1000;letter-spacing:1px;flex:0 1 190px}.stake-field{display:flex;align-items:center;gap:5px;background:#fffdf1;border:2px solid #096175;border-radius:7px;padding:7px 8px;margin-top:5px}.stake-field input{border:0;background:none;color:var(--navy);font:20px Titan;width:100%;min-width:0}.stake-field span{font-size:7px;letter-spacing:0}.presets{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;flex:0 1 200px;align-self:end;margin-bottom:1px}.presets button{border:1px solid #338289;background:#c7f5df;color:var(--navy);font-weight:1000;border-radius:5px;min-height:38px;padding:4px 11px;font-size:10px}.presets button.active{background:var(--gold);border:2px solid #0a5360}.potential{text-align:center;margin-left:auto;display:grid;gap:2px;white-space:nowrap}.potential small{font-size:7px;letter-spacing:1px;font-weight:1000}.potential strong{font:23px Titan;color:#05727c}.potential span{font-size:7px}.race-button{border:2px solid #042e3b;background:var(--coral);color:var(--navy);box-shadow:0 4px #063544;border-radius:9px;min-width:220px;min-height:57px;padding:12px 17px;font:20px Titan;display:flex;align-items:center;justify-content:space-between;gap:15px}.race-button:hover:not(:disabled){background:#ff9272;transform:translateY(-1px)}.race-button b{font:26px Nunito}.notice{text-align:center;font-size:9px;font-weight:900;color:#246978;margin:12px 0 0;min-height:14px}.retry{display:block;margin:10px auto 0;border:2px solid #0b6873;border-radius:5px;background:#b1f6df;color:var(--navy);font-weight:1000;padding:8px}.demo-strip{display:flex;gap:12px;align-items:center;justify-content:center;padding:15px 3px 4px;font-size:8px;text-shadow:0 1px #062e39}.demo-strip b{letter-spacing:1px;color:var(--gold)}.demo-strip a{margin-left:auto;font-weight:1000}.history{padding:24px;margin:27px 0 20px;border:1px solid #4a7d87;border-radius:16px;background:#0b3545}.section-heading{display:flex;justify-content:space-between;align-items:center;gap:20px}.section-heading small{color:var(--mint);font-size:8px;letter-spacing:1.5px;font-weight:1000}.section-heading h2{font:26px Titan;margin:6px 0}.history p{font-size:11px;color:#b7d7df}.history-actions{display:flex;gap:8px}.history-actions button,.history-actions a{border:1px solid #74939b;background:#164556;color:var(--cream);border-radius:7px;padding:10px 12px;font-size:10px;font-weight:1000;text-decoration:none}.table-scroll{overflow:auto}table{width:100%;border-collapse:collapse;font-size:11px;text-align:left}th{font-size:8px;text-transform:uppercase;letter-spacing:.6px;background:#062734;color:var(--mint);padding:11px 9px}td{padding:12px 9px;border-bottom:1px solid #396373;font-variant-numeric:tabular-nums}td code{font-size:9px}td.positive{color:#7cf4ce;font-weight:1000}td.negative{color:#ff9d84;font-weight:1000}footer{max-width:1420px;margin:auto;padding:0 23px 25px;display:flex;justify-content:space-between;gap:10px;font-size:8px;color:#91b5c6}dialog{width:calc(100% - 28px);max-width:630px;background:#093b4b;color:var(--cream);border:3px solid var(--gold);border-radius:19px;padding:29px 33px;box-shadow:0 20px 80px #000a}dialog::backdrop{background:#011c2cde;backdrop-filter:blur(4px)}dialog small{font-size:9px;font-weight:1000;letter-spacing:1.5px;color:var(--mint)}dialog h2{font:30px/1.1 Titan;color:var(--gold);margin:13px 0 20px}dialog p{font-size:12px;line-height:1.65}.dialog-close{position:absolute;right:13px;top:8px;background:none;border:0;color:var(--gold);font-size:29px}.rules-figures{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.rules-figures div{background:#052e3e;border:1px solid #4f8389;border-radius:9px;text-align:center;padding:14px 5px;display:grid;gap:5px}.rules-figures strong{font:25px Titan;color:var(--mint)}.rules-figures span{font-size:9px}.rules-note{border-top:1px solid #4f8389;padding-top:15px;color:#b7d9e0}
@keyframes crab-bob{from{transform:translateY(0) rotate(-2deg)}to{transform:translateY(-3px) rotate(2deg)}}@keyframes left-leg{from{transform:rotate(-12deg)}to{transform:rotate(12deg)}}@keyframes right-leg{from{transform:rotate(11deg)}to{transform:rotate(-11deg)}}@keyframes dust{to{transform:translateX(-13px);opacity:0}}@keyframes flash{0%,100%{opacity:0}20%{opacity:.8}}
@media(max-width:1050px){.bet-row{gap:10px}.race-button{min-width:185px;font-size:18px}.presets{flex-basis:150px}.presets button{padding:4px 8px}.crab-choice strong{font-size:9px}.derby{padding:19px 22px 10px}.toolbar button,.toolbar a{font-size:10px;padding:10px}.topbar{gap:12px}.brand>span{font-size:24px}.brand small{font-size:6px}}
@media(max-width:780px){.topbar{display:grid;grid-template-columns:minmax(0,1fr) auto;padding:12px 17px;gap:9px}.brand img{height:45px;width:44px}.balance-box{margin:0;text-align:right}.balance-box strong{font-size:25px}.balance-box small{font-size:7px}.toolbar{grid-column:1/-1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}.toolbar button,.toolbar a{min-height:44px;padding:8px 4px;font-size:10px}.derby{padding:17px 16px 9px}.poster h1{font-size:43px}.poster p{font-size:7px;letter-spacing:1px}.crab-choices{grid-template-columns:repeat(3,1fr)}.crab-choice{display:grid;grid-template-columns:54px 1fr;gap:1px 3px;align-items:center;justify-items:start;padding:7px}.crab-choice svg{grid-row:1/3;width:53px;height:43px}.crab-choice strong{font-size:9px;white-space:normal}.crab-choice span{font-size:7px}.crab-choice[aria-pressed=true]:after{font-size:4px}.selection-heading{align-items:flex-start;gap:8px}.selection-heading h2{font-size:16px}.selection-heading span{font-size:7px;text-align:right;max-width:125px}.bet-row{display:grid;grid-template-columns:1fr 1fr;gap:11px}.bet-row label{grid-column:1}.presets{grid-column:1;grid-row:2;margin:0}.presets button{min-height:36px}.potential{grid-column:2;grid-row:1;margin:0;align-self:end}.race-button{grid-column:2;grid-row:2;min-width:0;min-height:42px;font-size:16px;padding:8px 11px}.stake-field{padding:6px 8px}.stake-field input{font-size:19px}.demo-strip{flex-wrap:wrap;gap:5px 10px;text-align:center;font-size:7px}.demo-strip a{margin:auto;flex-basis:100%;padding-top:3px}.history{padding:20px}.section-heading{align-items:flex-start;flex-direction:column;gap:9px}.history-actions{width:100%}.history-actions button,.history-actions a{flex:1;text-align:center}footer{flex-direction:column;font-size:7px}.track-wrap{padding-left:10px;padding-right:24px}.runner{left:44px}.finish-line{right:3px}.start-label{left:54px}.finish-label{right:18px}}
@media(max-width:480px){main{padding:0 12px}.topbar{padding:11px 12px}.brand>span{font-size:22px}.brand small{letter-spacing:1px;font-size:5px}.brand img{height:42px;width:42px}.balance-box strong{font-size:23px}.balance-box small{font-size:6px;letter-spacing:1px}.derby{padding:14px 10px 9px;border-radius:18px}.poster h1{font-size:36px}.presents{font-size:7px;letter-spacing:2px}.poster p{font-size:6px;letter-spacing:.5px;line-height:1.5}.headline-stamps{gap:8px}.headline-stamps span{font-size:6px;padding:5px 9px}.race-caption{padding:9px 7px}.race-caption strong{font-size:14px}.race-caption>span{font-size:5px;letter-spacing:1px}.race-caption>div{font-size:8px;line-height:1.5}.track{height:294px}.lane{height:49px}.lane-name{min-width:25px;height:27px;padding:1px 5px;top:10px;font-size:12px}.runner{width:64px;height:51px;top:-1px;left:31px}.runner svg{width:64px;height:51px}.track-wrap{padding:18px 19px 5px 8px}.start-label{left:40px;font-size:5px}.finish-label{right:13px;font-size:5px}.finish-line{width:12px;background-size:12px 12px;right:0}.race-result{min-height:57px;padding:10px 7px}.race-result strong{font-size:13px}.race-result span{font-size:8px;line-height:1.5}.entry-panel{padding:12px 10px;margin-top:15px}.selection-heading h2{font-size:14px}.selection-heading span{font-size:6px;max-width:110px}.crab-choices{gap:6px}.crab-choice{padding:8px 3px 6px;grid-template-columns:1fr;text-align:center;justify-items:center}.crab-choice svg{grid-row:auto;width:53px;height:39px}.crab-choice strong{font-size:8px;line-height:1.25}.crab-choice span{font-size:6px}.potential strong{font-size:20px}.potential small{font-size:6px}.potential span{font-size:6px}.race-button{font-size:14px}.bet-row{gap:9px}.presets{gap:4px}.presets button{font-size:9px;min-height:35px;padding:4px}.notice{font-size:8px;line-height:1.5}.countdown{font-size:44px;min-width:110px;padding:13px 20px}.countdown small{font-size:7px}.history{padding:16px}.section-heading h2{font-size:24px}.history p{font-size:10px}td{white-space:nowrap;font-size:10px}td code{font-size:8px}.history-actions button,.history-actions a{font-size:9px;padding:10px 7px}dialog{padding:25px 21px}dialog h2{font-size:27px}dialog p{font-size:11px}}
@media(prefers-reduced-motion:reduce){.runner.running .body,.runner.running .legs-left,.runner.running .legs-right,.runner.running .claw-left,.runner.running .claw-right,.runner.running:after{animation:none}.photo-flash.flash{animation:none}}
/* The painted beach is the race arena: animated crabs run on its open lanes. */
.derby{background:#087481;padding:0 18px 10px}.poster{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%)}.race-card{aspect-ratio:1672/941;min-height:550px;margin:0 -18px;border:0;border-radius:0;background:#f0c576 url('assets/beach-opt-ba69cb67f16f.webp') center top/100% 100% no-repeat;box-shadow:none}.race-caption{position:absolute;left:27%;right:16%;top:29%;border:1px solid #8cdebd88;border-radius:10px;background:#043b48e8;padding:8px 13px;box-shadow:0 3px #031f3544}.race-caption strong{font-size:17px}.race-caption>div{font-size:9px}.track-wrap{position:absolute;left:22%;right:8%;top:45%;height:40%;padding:0 0 0 4px;background:none}.track{height:100%}.lane{height:16.666666%;background:none;border-bottom:1px dashed #9b642f55}.lane.selected{background:linear-gradient(90deg,#8cefe552,#7cf7c91c,transparent);border-radius:8px}.lane-name{top:50%;transform:translateY(-50%);min-width:30px;height:30px;font-size:14px}.runner{top:50%;margin-top:-31px;left:42px}.finish-line{right:0;width:10px;background-size:10px 10px;opacity:.9}.start-label{top:-13px;left:42px}.finish-label{top:-13px;right:-10px}.race-result{position:absolute;left:28%;right:14%;bottom:3%;border:2px solid #93e3bd99;border-radius:12px;background:#053b49ed;padding:9px 15px;min-height:0;box-shadow:0 3px #032b3d77}.entry-panel{margin-top:15px}.demo-strip{padding-top:13px}
@media(min-width:1350px){.race-caption strong{font-size:21px}.race-caption>div{font-size:11px}.race-result strong{font-size:18px}.race-result span{font-size:11px}.runner{width:87px;height:65px;margin-top:-33px}.runner svg{width:87px;height:65px}}
@media(max-width:900px){.race-card{min-height:490px;aspect-ratio:1.6}.race-caption{left:25%;right:14%;top:29%;padding:6px 8px}.race-caption strong{font-size:14px}.race-caption>div{font-size:8px}.race-caption>span{font-size:5px;letter-spacing:1px}.track-wrap{top:46%;height:39%}.runner{width:69px;height:55px;margin-top:-27px;left:34px}.runner svg{width:69px;height:55px}.lane-name{min-width:25px;height:25px;font-size:12px}.race-result{left:27%;right:12%;bottom:3%;padding:7px 10px}.race-result strong{font-size:13px}.race-result span{font-size:8px}.entry-panel{padding:12px 14px}}
@media(max-width:600px){.derby{padding:0 10px 8px}.race-card{margin:0 -10px;aspect-ratio:auto;height:556px;min-height:0;background-size:100% auto;background-position:center top;background-color:#efc579;background-image:url('assets/beach-opt-ba69cb67f16f.webp'),repeating-linear-gradient(110deg,#fff0b022 0 1px,transparent 1px 12px)}.race-caption{left:8%;right:8%;top:153px;padding:7px 8px;border-width:2px}.race-caption strong{font-size:15px}.race-caption>div{font-size:8px}.race-caption>span{font-size:6px}.track-wrap{left:7%;right:7%;top:224px;height:260px;padding-left:0}.runner{width:68px;height:53px;margin-top:-26px;left:31px}.runner svg{width:68px;height:53px}.lane-name{min-width:23px;height:23px;font-size:11px}.start-label{left:34px}.finish-label{right:-5px}.race-result{left:7%;right:7%;bottom:10px;padding:9px 8px;min-height:50px}.race-result strong{font-size:13px}.race-result span{font-size:8px}.entry-panel{margin-top:8px;padding:12px 10px}.demo-strip{padding:13px 2px 0}}

/* Individual odds remain legible beside the race choices. */
/* Keep the independent caller control within the header at every screen size. */
.toolbar{flex-wrap:wrap;justify-content:flex-end}@media(max-width:780px){.toolbar{grid-template-columns:repeat(4,minmax(0,1fr))}.toolbar #commentary-toggle{grid-column:1/-1;grid-row:2}}
.selection-heading{align-items:center;gap:15px}.selection-heading #selected-odds{max-width:440px;font-size:11px;line-height:1.5;text-align:right}.crab-choice span{font-size:10px;line-height:1.45}.crab-choice[data-tier="favourite"]{border-color:#d4b349}.crab-choice[data-tier="outsider"]{border-color:#ad8cec}.odds-table-wrap{overflow:auto;margin:15px 0}.odds-table{width:100%;border-collapse:collapse}.odds-table th,.odds-table td{padding:8px 10px;font-size:12px;text-align:left}.odds-table tr:nth-child(even){background:#ffffff0b}@media(max-width:750px){.selection-heading{align-items:flex-start;flex-direction:column;gap:5px}.selection-heading #selected-odds{max-width:none;text-align:left;font-size:10px}.crab-choice span{font-size:8px}}@media(max-width:480px){.crab-choice span{font-size:7px}.selection-heading #selected-odds{font-size:9px}}

/* Readable odds, prizes and touch controls on narrow screens. */
@media(max-width:600px){
 .crab-choices{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
 .crab-choice{min-height:116px;padding:9px 7px}
 .crab-choice strong{font-size:12px;line-height:1.3}
 .crab-choice span{font-size:11px;line-height:1.4}
 .selection-heading #selected-odds{font-size:12px;line-height:1.5}
 .race-caption>div,.race-result span{font-size:11px;line-height:1.45}
 .race-caption>span{font-size:9px}
 .race-caption{top:142px}
 .race-result{padding:8px;min-height:57px}
 .notice,.potential span,.potential small{font-size:11px;line-height:1.5}
 .presets button,.history-actions button,.history-actions a,.toolbar button,.toolbar a{min-height:44px;font-size:11px}
 .demo-strip span,.demo-strip a{font-size:10px;line-height:1.5}
 dialog p{font-size:13px;line-height:1.6}
 .dialog-close{min-width:44px;min-height:44px}
}

/* Live places follow the crabs. The winner is marked only when it crosses. */
.lane.lane-leading .lane-name{background:#ffda65;color:#063d48;border-color:#fff3b9;box-shadow:0 0 14px #ffd34b66}
.lane.lane-leading .runner{filter:drop-shadow(0 3px 3px #4c341644)}

@keyframes flash{0%,100%{opacity:0}20%{opacity:.28}}
@media(max-width:600px){.race-caption strong{line-height:1.25}.race-card{height:574px}.track-wrap{top:235px}.race-result{bottom:9px;min-height:68px}.race-result strong{font-size:14px;line-height:1.2}}
@media(prefers-reduced-motion:reduce){.dealer-zone{transition:none}}

/* Leave a visible run-out beyond the chequered line on every screen. */
.finish-line{left:92%;right:auto}.finish-label{right:4%;transform:translateX(50%)}
.lane.lane-winner .lane-name{background:#fff2a8;border-color:#fff;box-shadow:0 0 0 3px #ffd25580,0 0 20px #ffe16b}
.lane.lane-winner .lane-name:before{content:"★";position:absolute;left:-10px;top:-9px;font-size:13px;color:#ffef8b;text-shadow:1px 1px #063744}
.lane.lane-winner .runner:before{content:'1ST';position:absolute;top:-7px;left:37%;z-index:2;background:#ffe16b;color:#063744;border:1px solid #fff7c7;border-radius:4px;padding:1px 4px;font:1000 10px Nunito;box-shadow:0 2px 5px #06374455}


/* Mobile arcade layout: keep the race readable and the betting desk thumb-sized. */
@media (max-width: 600px) {
  body { min-width: 320px; }
  .topbar { padding: 9px 12px; gap: 7px 10px; }
  .brand small { display: none; }
  .brand img { width: 38px; height: 38px; }
  .brand > span { font-size: 22px; }
  .balance-box strong { font-size: 24px; }
  .balance-box small { font-size: 8px; letter-spacing: .45px; }
  .balance-box span { font-size: 9px; }
  .toolbar { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 5px; }
  .toolbar > * { grid-column: span 2; min-height: 44px; padding: 7px 4px; font-size: 11px; }
  .toolbar > a:first-child { grid-column: 1 / span 2; grid-row: 1; }
  .toolbar #sound-toggle { grid-column: 3 / span 2; grid-row: 1; }
  .toolbar #rules-open { grid-column: 5 / span 2; grid-row: 1; }
  .toolbar #commentary-toggle { grid-column: 1 / span 3; grid-row: 2; }
  .toolbar > a:last-child { grid-column: 4 / span 3; grid-row: 2; }
  main { padding: 0 10px; }
  .derby { padding-inline: 9px; border-radius: 16px; }
  .race-card { margin-inline: -9px; height: 510px; scroll-margin-top: 9px; }
  .race-caption { top: 116px; left: 5%; right: 5%; padding: 7px 8px; }
  .race-caption > span { font-size: 8px; letter-spacing: .7px; }
  .race-caption strong { font-size: 15px; line-height: 1.25; }
  .race-caption > div { font-size: 11px; line-height: 1.35; }
  .track-wrap { top: 203px; height: 230px; left: 5%; right: 5%; }
  .runner { width: 60px; height: 47px; margin-top: -23px; left: 29px; }
  .runner svg { width: 60px; height: 47px; }
  .lane-name { min-width: 22px; height: 22px; font-size: 11px; }
  .start-label, .finish-label { font-size: 7px; letter-spacing: .6px; }
  .start-label { left: 30px; }
  .race-result { left: 5%; right: 5%; bottom: 8px; min-height: 62px; padding: 7px 8px; }
  .race-result strong { font-size: 14px; line-height: 1.2; }
  .race-result span { font-size: 11px; line-height: 1.35; }
  #race-share:empty { display: none; }
  #race-share .cws-trigger { width: 100%; }
  .entry-panel { padding: 12px 10px; margin-top: 10px; }
  .selection-heading h2 { font-size: 18px; }
  .selection-heading #selected-odds { font-size: 12px; line-height: 1.45; }
  .crab-choices { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
  .crab-choice { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 3px; min-height: 118px; padding: 8px 5px; }
  .crab-choice svg { width: 54px; height: 39px; flex: none; }
  .crab-choice strong { font-size: 11px; line-height: 1.25; white-space: normal; }
  .crab-choice span { font-size: 10px; line-height: 1.35; }
  .crab-choice[aria-pressed=true]:after { font-size: 6px; top: 2px; right: 3px; }
  .bet-row { gap: 10px; margin-top: 12px; padding-top: 12px; }
  .bet-row label { font-size: 10px; letter-spacing: .45px; }
  .stake-field { min-height: 48px; padding: 8px; }
  .stake-field input { font-size: 23px; min-height: 44px; }
  .stake-field span { font-size: 8px; }
  .potential { min-width: 0; white-space: normal; }
  .potential strong { font-size: 23px; overflow-wrap: anywhere; }
  .potential small, .potential span { font-size: 10px; line-height: 1.35; }
  .presets { grid-column: 1 / -1; grid-row: 2; gap: 7px; }
  .presets button { min-height: 44px; font-size: 12px; padding: 6px; }
  .race-button { grid-column: 1 / -1; grid-row: 3; min-height: 54px; font-size: 19px; padding: 10px 14px; }
  .notice { font-size: 12px; line-height: 1.45; margin-top: 12px; }
  .retry { min-height: 44px; padding: 10px 14px; font-size: 12px; }
  .demo-strip { gap: 7px; padding: 12px 2px 5px; }
  .demo-strip b { font-size: 9px; }
  .demo-strip a { min-height: 44px; display: flex; justify-content: center; align-items: center; padding: 7px; }
  .history { padding: 17px 12px; margin-top: 20px; scroll-margin-top: 12px; }
  .history p { font-size: 12px; line-height: 1.5; }
  .history-actions { gap: 7px; }
  .history-actions button, .history-actions a { min-height: 44px; font-size: 11px; display: flex; align-items: center; justify-content: center; padding: 9px 7px; }
  .table-scroll { max-width: 100%; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }
  td { font-size: 11px; padding: 12px 9px; }
  th { font-size: 9px; }
  footer { font-size: 9px; line-height: 1.5; padding: 0 14px max(18px, env(safe-area-inset-bottom)); }
  dialog { max-height: calc(100svh - 24px); overflow-y: auto; padding: 28px 20px 20px; }
  dialog h2 { padding-right: 20px; }
  .odds-table th, .odds-table td { white-space: normal; font-size: 11px; padding: 9px 6px; }
}
@media (orientation: landscape) and (max-height: 540px) and (min-width: 601px) and (max-width: 1000px) {
  .topbar { display: flex; flex-wrap: wrap; padding: 7px 15px; gap: 8px; }
  .brand img { width: 33px; height: 33px; }
  .brand small, .balance-box span { display: none; }
  .brand > span { font-size: 21px; }
  .balance-box { margin-left: auto; }
  .balance-box strong { font-size: 22px; }
  .toolbar { display: flex; width: 100%; flex-wrap: nowrap; justify-content: stretch; gap: 6px; }
  .toolbar > * { flex: 1; min-height: 44px; font-size: 11px; padding: 7px; }
  .toolbar #commentary-toggle { flex: 1.6; }
  .race-card { min-height: 0; height: 400px; aspect-ratio: auto; background-size: 100% 100%; }
  .race-caption { top: 13px; left: 29%; right: 5%; padding: 5px 8px; }
  .race-caption strong { font-size: 14px; }
  .race-caption > div { font-size: 11px; }
  .track-wrap { top: 104px; left: 14%; right: 6%; height: 224px; }
  .race-result { left: 14%; right: 6%; bottom: 8px; min-height: 57px; }
  .race-result span { font-size: 11px; }
  .crab-choices { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .presets button, .race-button, .history-actions > *, .retry { min-height: 44px; }
  .stake-field input { font-size: 23px; min-height: 44px; }
  .crab-choice { min-height: 70px; }
  .crab-choice strong { font-size: 12px; }
  .crab-choice span { font-size: 11px; }
  dialog { max-height: calc(100svh - 20px); overflow-y: auto; }
}