/* Riptide: the reef fills the screen; the HUD hugs the corners so the current stays clear. */
@font-face{font-family:Archivo;src:url('/game/fonts/archivo.woff2');font-display:swap}
@font-face{font-family:'Geist Mono';src:url('/game/fonts/geist-mono.woff2');font-display:swap}
body[data-ui=riptide]{--font-body:Archivo,Arial,sans-serif;--font-mono:'Geist Mono',ui-monospace,monospace;font-family:var(--font-body)}
body[data-ui=riptide] [hidden]{display:none!important}
body[data-ui=riptide]>header{display:flex;justify-content:space-between;align-items:center;padding:10px 4vw;border-bottom:1px solid #c2d5ce1f;background:#061d27}
body[data-ui=riptide]>header img{display:block;width:88px;height:auto}
body[data-ui=riptide]>header nav{display:flex;gap:22px;font-size:13px}
body[data-ui=riptide]>header nav a{color:#dbe6cd;text-decoration:none;text-underline-offset:5px}
body[data-ui=riptide]>header nav a:hover{text-decoration:underline}
body[data-ui=riptide] .skip{position:absolute;left:12px;top:-60px;z-index:20;padding:10px 14px;border-radius:8px;background:#e6c788;color:#061d27}
body[data-ui=riptide] .skip:focus{top:10px}
body[data-ui=riptide]{margin:0;background:#061d27;color:#f2efdf;overflow:hidden;height:100dvh;display:flex;flex-direction:column}
body[data-ui=riptide]>header{flex:none}
.game{position:relative;flex:1;min-height:0;overflow:hidden;isolation:isolate;touch-action:none;user-select:none;-webkit-user-select:none}
#sea{position:absolute;inset:0;width:100%;height:100%;display:block;outline:none}
.vignette{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 50% 55%,transparent 55%,#02121acc 100%);z-index:1}
/* A white flash when the fish breaks the surface or lands. */
.splash{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 50% 55%,transparent 42%,#d8fbff40 72%,#ffffff99 100%);opacity:0;z-index:2} /* a flash round the edges: the centre, where your fish is, stays clear */
.splash.on{animation:splash .55s ease-out}
@keyframes splash{from{opacity:.85}to{opacity:0}}

/* HUD. Panels are the site's deep water, translucent over the scene. */
.hud{position:absolute;inset:0;pointer-events:none;z-index:3;font-variant-numeric:tabular-nums}
.hud>*{position:absolute;display:flex;flex-direction:column;gap:2px;padding:10px 14px;border-radius:10px;background:#061d27b8;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.hud strong{font-size:28px;font-weight:600;letter-spacing:-.02em;line-height:1}
.hud span{font-size:12px;color:#aac0c0}
.hud small{font-size:15px;color:#aac0c0;font-weight:400}
.hud-time{top:14px;left:14px}
.hud-place{top:14px;right:14px;align-items:flex-end}
.hud-place strong{color:#e6c788;font-size:34px}
.hud-notes{bottom:14px;left:14px}
.hud-notes strong{font-size:26px}
.hud-flow{position:absolute;right:14px;bottom:14px;z-index:4;width:112px;height:112px;border-radius:50%;border:0;padding:0;background:#061d27c4;color:#f2efdf;display:grid;place-items:center;cursor:pointer;font:inherit;touch-action:none}
.flow-ring{position:absolute;inset:6px;border-radius:50%;background:conic-gradient(#8ff5e4 calc(var(--flow,0)*1turn),#f2efdf1f 0);-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 7px),#000 calc(100% - 6px));mask:radial-gradient(farthest-side,transparent calc(100% - 7px),#000 calc(100% - 6px))}
.flow-speed{display:flex;flex-direction:column;align-items:center;line-height:1}
.flow-speed b{font-size:30px;font-weight:600;font-variant-numeric:tabular-nums}
.flow-speed small{font-size:11px;color:#aac0c0;margin-top:3px}
.flow-label{position:absolute;bottom:22px;font-size:11px;color:#aac0c0}
.hud-flow.ready{box-shadow:0 0 0 2px #8ff5e4,0 0 28px #8ff5e4aa}
.hud-flow.ready .flow-label{color:#8ff5e4;font-weight:600}
.hud-flow.surging .flow-ring{background:#e6c788}
.hud-flow:focus-visible{outline:2px solid #e6c788;outline-offset:4px}

.hud-actions{position:absolute;top:14px;left:50%;transform:translateX(-50%);display:flex;gap:8px;z-index:4}
.hud-actions button{min-height:36px;padding:0 14px;border-radius:999px;border:1px solid #c2d5ce33;background:#061d27b8;color:#f2efdf;font:inherit;font-size:13px;cursor:pointer}
.hud-actions button:focus-visible{outline:2px solid #e6c788;outline-offset:3px}

/* Section banner: the place name, big, for a moment. */
.banner{position:absolute;left:50%;top:8.5%;transform:translateX(-50%);z-index:3;display:flex;flex-direction:column;align-items:center;pointer-events:none;opacity:0;text-align:center;padding:18px 44px;background:radial-gradient(ellipse at center,#02121ab3 0,#02121a66 45%,transparent 74%)} /* dark enough to hold white type over the Breach's bright water */
.banner strong{font-size:clamp(22px,2.6vw,34px);font-weight:600;letter-spacing:-.045em;line-height:1;text-shadow:0 1px 2px #02121acc,0 2px 24px #02121acc}
.banner small{font-size:13px;color:#e6c788;margin-bottom:8px}
.banner.on{animation:banner 2.2s ease-out}
@keyframes banner{0%{opacity:0;transform:translate(-50%,10px)}12%{opacity:1;transform:translate(-50%,0)}75%{opacity:1}100%{opacity:0}}

.toasts{position:absolute;left:50%;top:24%;transform:translateX(-50%);z-index:3;display:flex;flex-direction:column;align-items:center;gap:6px;pointer-events:none}
.toast{font-size:20px;font-weight:600;letter-spacing:-.02em;padding:6px 14px;border-radius:999px;background:#061d27b8;animation:toast 1.4s ease-out forwards;white-space:nowrap}
.toast.gold{color:#e6c788}.toast.aqua{color:#8ff5e4}.toast.pink{color:#ff9ad2}
/* The skip chain: a steady chip under the calls, bumped on every clean landing. */
.skip-chip{position:absolute;left:50%;top:calc(24% + 52px);transform:translateX(-50%);z-index:3;pointer-events:none;font-size:26px;font-weight:800;letter-spacing:-.02em;padding:6px 18px;border-radius:999px;background:#0b3a44d9;color:#8ff5e4;border:1px solid #8ff5e466}
.skip-chip.kick{animation:skip-kick .35s ease-out}
@keyframes skip-kick{0%{transform:translateX(-50%) scale(1.25)}100%{transform:translateX(-50%) scale(1)}}
@media(prefers-reduced-motion:reduce){.skip-chip.kick{animation:none}}
@keyframes toast{0%{opacity:0;transform:scale(.9)}12%{opacity:1;transform:scale(1)}70%{opacity:1}100%{opacity:0;transform:translateY(-14px)}}

.count{position:absolute;inset:0;display:grid;place-items:center;z-index:5;pointer-events:none;font-size:clamp(90px,16vw,190px);font-weight:600;letter-spacing:-.06em;color:#f2efdf;text-shadow:0 4px 40px #02121acc}
.count.go{color:#8ff5e4}

/* Cards: one left-aligned panel over the attract-mode race. */
.card{position:absolute;z-index:6;left:clamp(16px,5vw,64px);top:50%;transform:translateY(-50%);width:min(440px,calc(100% - 32px));max-height:calc(100% - 32px);overflow:auto;box-sizing:border-box;padding:28px 30px;border-radius:14px;background:#061d27e6;border:1px solid #c2d5ce26;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.card h1{font-size:clamp(56px,7vw,88px);line-height:.9;margin:0 0 16px;letter-spacing:-.06em}
.card h1 span{color:#8ff5e4}
.card h2{font-size:44px;line-height:1;margin:0 0 20px;color:#e6c788}
.lede{font-size:16px;line-height:1.65;color:#d3e3df;margin:0 0 22px;max-width:40ch}
.card button,.card a{min-height:48px;padding:0 20px;border-radius:999px;border:1px solid #c2d5ce40;background:transparent;color:#f2efdf;font:inherit;font-size:15px;cursor:pointer;display:inline-flex;align-items:center;text-decoration:none}
.card .primary{background:#e6c788;color:#061d27;border-color:#e6c788;font-weight:600}
/* Two tracks, one choice: the current one is filled, the other an outline you can follow. */
.card .tracks{display:flex;gap:8px;margin:0 0 18px;flex-wrap:wrap}
.card .tracks a{min-height:40px;font-size:14px;padding:0 16px}
.card .tracks a[aria-current]{background:#8ff5e41f;border-color:#8ff5e4;color:#e8fffa}
.card .tracks small{margin-left:8px;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#e6c788}
.card .primary:disabled{opacity:.6;cursor:progress}
.card :is(button,a):focus-visible{outline:2px solid #8ff5e4;outline-offset:3px}
.how{margin:24px 0 0;display:grid;gap:10px;font-size:13px}
.how div{display:grid;grid-template-columns:74px 1fr;gap:10px}
.how dt{color:#e6c788}.how dd{margin:0;color:#aac0c0}
kbd{font:12px var(--font-mono,monospace);padding:1px 6px;border-radius:4px;border:1px solid #c2d5ce40;color:#f2efdf}
.results{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:18px}
.results div{display:flex;flex-direction:column;gap:3px}
.results>div>span{font-size:12px;color:#aac0c0} /* the label only: the time's own span sits inside <strong> */
.results strong{font-size:24px;font-weight:600;font-variant-numeric:tabular-nums}
.results small{font-size:11px;color:#8ff5e4;min-height:14px}
.standings{list-style:none;margin:0 0 16px;padding:0;display:grid;gap:4px;font-size:14px;font-variant-numeric:tabular-nums}
.standings li{display:flex;justify-content:space-between;padding:6px 10px;border-radius:6px;background:#0b2933}
.standings li.you{background:#173942;color:#e6c788}
.song-sheet{margin:0 0 18px;padding:14px;border:1px solid #8ff5e433;border-radius:10px;background:#0b293380}
.song-sheet svg{width:100%;height:auto;display:block;background:#0b2933;border-radius:8px}
.song-sheet line{stroke:#f2efdf22}
.song-sheet circle.played{filter:drop-shadow(0 0 5px currentColor)}
.song-sheet figcaption{display:grid;gap:4px;font-size:12px;color:#aac0c0;margin-bottom:10px}
.song-sheet figcaption strong{font-size:16px;font-weight:600;color:#f2efdf}
.song-sheet #listen{margin-top:10px;min-height:44px;font-size:13px;color:#8ff5e4;border-color:#8ff5e455}
.song-sheet #listen:disabled{opacity:.5;cursor:default}
.actions{display:flex;flex-wrap:wrap;gap:10px}

/* Modes. */
.game[data-mode=title] :is(.hud,.hud-flow),.game[data-mode=loading] :is(.hud,.hud-flow){opacity:0;visibility:hidden}
.game[data-mode=finish] .hud-flow{opacity:0;visibility:hidden}

@media(max-width:700px){
 body[data-ui=riptide]>header{padding:8px 14px}body[data-ui=riptide]>header img{width:70px}body[data-ui=riptide]>header nav{gap:14px;font-size:12px;white-space:nowrap}
 .hud strong{font-size:22px}.hud-place strong{font-size:26px}
 .hud-notes{bottom:14px}
 .hud-flow{width:96px;height:96px}
 /* The smaller dial keeps its reading and its label apart. */
 .flow-speed b{font-size:26px}.flow-label{bottom:13px;font-size:10px}
 .card{left:12px;right:12px;width:auto;top:auto;bottom:12px;transform:none;padding:22px}
 .card h1{font-size:56px}
 .results strong{font-size:20px}
 .banner{top:18%}
 /* Calls sit below the place banner on a tall screen, so the two never stack. */
 .toasts{top:31%}.skip-chip{top:calc(31% + 46px);font-size:22px}
 .hud-actions{top:auto;bottom:128px;left:auto;right:14px;transform:none;flex-direction:column}
}
@media(prefers-reduced-motion:reduce){.splash.on,.banner.on{animation-duration:.01s}.banner.on{opacity:1}.toast{animation:none}}

/* The title belongs to the landscape. Keep its reading surface quiet and leave
   the right side of the view open for the current and the fish. */
body[data-ui=riptide]>header{height:54px;min-height:54px;box-sizing:border-box;padding:8px 3vw}
body[data-ui=riptide]>header>a{display:flex;align-items:center}
body[data-ui=riptide]>header img{height:26px;max-height:26px;width:auto}
#title-card{left:5.5vw;width:min(550px,48vw);padding:34px 0;border:0;border-radius:0;background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;overflow:visible}
.game:is([data-mode=title],[data-mode=loading])::after{content:'';position:absolute;inset:0;pointer-events:none;z-index:2;background:linear-gradient(90deg,#031c25e8,#041e2899 35%,transparent 75%)}
.finish .finish-track{margin-bottom:8px}
.eyebrow{margin:0 0 24px;font:11px var(--font-mono);text-transform:uppercase;letter-spacing:.18em;color:#e6c788}
#title-card h1{font-size:clamp(76px,9.5vw,136px);font-style:italic;letter-spacing:-.075em;margin-left:-.05em;margin-bottom:28px;text-shadow:0 3px 30px #021b2440}
#title-card h1 span{color:#f4cf77}
#title-card .lede{font-size:clamp(16px,1.45vw,20px);line-height:1.6;max-width:32ch;color:#d5e9e4}
#title-card .primary{margin-top:6px;min-width:196px;min-height:58px;border-radius:9px;background:#f2cf7f;border-color:#ffdf96;font-size:17px;justify-content:center;box-shadow:0 4px 0 #9a804c,0 12px 28px #01171b66}
.race-meta{font:10px var(--font-mono);letter-spacing:.045em;color:#bbd3cd;margin:23px 0 0}.race-meta span{color:#e6c788;padding:0 8px}
#title-card .how{margin-top:30px;border-top:1px solid #c9eee229;padding-top:18px;gap:9px;max-width:375px;font-size:12px}
.hud-notes #notes{font-size:26px;color:#f2efdf}
@media(max-width:700px){
 body[data-ui=riptide]>header{height:48px;min-height:48px;padding:7px 14px}body[data-ui=riptide]>header img{height:22px;max-height:22px}
 #title-card{left:22px;right:22px;bottom:22px;top:auto;width:auto;padding:0;transform:none}
 #title-card h1{font-size:76px;margin-bottom:16px}#title-card .eyebrow{font-size:9px;margin-bottom:18px;letter-spacing:.12em}
 #title-card .lede{font-size:16px;max-width:29ch;margin-bottom:16px}#title-card .how{margin-top:24px;font-size:11px;gap:8px}#title-card .how div{grid-template-columns:56px 1fr}
 #title-card .primary{min-height:52px;font-size:16px}#title-card .race-meta{font-size:9px;margin-top:19px}
 .game:is([data-mode=title],[data-mode=loading])::after{background:linear-gradient(0deg,#031c25f5,#041e28ad 58%,transparent)}
}
@media(max-height:650px){#title-card .how{margin-top:15px;padding-top:12px}#title-card h1{font-size:70px;margin-bottom:14px}#title-card .eyebrow{margin-bottom:16px}#title-card .lede{font-size:15px;max-width:40ch;margin-bottom:12px}#title-card .race-meta{margin-top:16px}}

/* Racing feedback stays at the periphery, with the current melody below the
   five spark cells and the full song on the finish card. */
.hud-notes{min-width:152px;gap:7px}
#live-song{display:block;width:154px;height:32px}
#live-song line{stroke:#f2efdf22}
.hud #song-live-caption{font-size:11px;color:#8ff5e4}
.chain-cells{display:flex;gap:5px;margin-top:3px}
.chain-cells i{height:5px;flex:1;background:#9be6db25;border-radius:2px;transition:background .08s}
.chain-cells i.lit{background:#8ff5e4;box-shadow:0 0 8px #8ff5e488}
.hud .race-progress{top:0;left:0;right:0;height:3px;padding:0;border-radius:0;display:flex;justify-content:space-evenly;background:linear-gradient(90deg,#f2cf7f calc(var(--progress,0)*100%),#b7ece217 0);backdrop-filter:none}
.race-progress i{width:2px;background:#072733;height:3px}
.hud .race-cue{left:50%;bottom:25px;transform:translateX(-50%);color:#f2d38e;font-size:14px;letter-spacing:.03em;white-space:nowrap}
.hud .race-cue:empty{display:none}
.speed-edge{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;transition:opacity .2s;box-shadow:inset 0 0 80px #9cffe625;background:linear-gradient(90deg,#5ce1d426,transparent 8%,transparent 92%,#5ce1d426)}
.game.boosting .speed-edge{opacity:1}
.race-skills{font-size:12px;line-height:1.5;color:#b6d7ce;margin:0 0 18px}
@media(max-width:700px){.hud-notes{min-width:140px}.hud .race-cue{bottom:180px;left:14px;transform:none;max-width:calc(100% - 156px);box-sizing:border-box;white-space:normal;font-size:12px;padding:8px 10px}.hud-notes strong small{font-size:12px}.hud-notes{gap:5px}.toast{font-size:16px}}
@media(prefers-reduced-motion:reduce){.speed-edge{display:none}.chain-cells i{transition:none}}

.chain-cells.kick{animation:chain-kick .65s ease-out}
@keyframes chain-kick{0%,30%{filter:drop-shadow(0 0 7px #a2ffeb);background:#a2ffeb}100%{background:transparent}}
@media(prefers-reduced-motion:reduce){.chain-cells.kick{animation:none}}

/* Rival markers: a small tag at the frame edge in the rival's colour, with the gap. */
.rival-marker{position:absolute;z-index:3;transform:translateX(-50%);display:flex;align-items:center;gap:6px;padding:4px 10px 4px 8px;border-radius:999px;background:#061d27c4;font-size:13px;font-weight:600;letter-spacing:-.01em;pointer-events:none;white-space:nowrap}
.rival-marker[data-edge=top]{top:13%}.rival-marker[data-edge=bottom]{bottom:15%}
/* On a phone, a rival behind rides above the sea-glass panel and the Sound and Pause column. */
@media(max-width:700px){.rival-marker[data-edge=bottom]{bottom:236px}}
/* Skipping Shoals spends its time in the air, the fish high in the frame and the hoops
   mid-screen, so its calls live in the top band, dropping below the place banner while
   it shows. On a phone the band starts under the timer and place cards. */
.toasts,.skip-chip{transition:top .2s}
.game[data-track=shoals] .toasts{top:12%}.game[data-track=shoals] .skip-chip{top:calc(12% + 52px)}
.game[data-track=shoals]:has(.banner.on) .toasts{top:24%}.game[data-track=shoals]:has(.banner.on) .skip-chip{top:calc(24% + 52px)}
@media(max-width:700px){
 .game[data-track=shoals] .toasts{top:19%}.game[data-track=shoals] .skip-chip{top:calc(19% + 46px)}
 /* A two-line place name ("Lighthouse Leap") runs the banner past 31%. */
 .game[data-track=shoals]:has(.banner.on) .toasts{top:37%}.game[data-track=shoals]:has(.banner.on) .skip-chip{top:calc(37% + 46px)}
}
.rival-marker i{width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent}
.rival-marker[data-edge=top] i{border-bottom:7px solid currentColor}.rival-marker[data-edge=bottom] i{border-top:7px solid currentColor}
.rival-marker.ember{color:#ff9a66}.rival-marker.comet{color:#c9a6ff}

/* The site bar lies over the scene, so the canvas never resizes, and it steps aside
   once the countdown starts: nothing but the race on screen while you race. */
body[data-ui=riptide]>header{position:absolute;top:0;left:0;right:0;z-index:2;border-bottom:0;background:linear-gradient(#061d27f0,#061d2700);transition:opacity .4s ease;pointer-events:none}
/* Only the logo and links take clicks, so Sound and Pause beneath the bar still work. */
body[data-ui=riptide]>header :is(a,nav){pointer-events:auto}
body[data-ui=riptide]:has(.game:is([data-mode=count],[data-mode=race]))>header{opacity:0;pointer-events:none;transition:none}
.game[data-mode=finish] .hud{opacity:0}
.game[data-mode=finish] .hud-actions{opacity:0;visibility:hidden} /* Sound and Pause would sit on the celebration under the site bar */

/* Split against your best at each place; medal line on the finish card. */
#banner-split{font-size:14px;font-weight:600;font-variant-numeric:tabular-nums}
#banner-split.ahead{color:#8cffe4}#banner-split.behind{color:#ff9ab8}
.finish .medal{margin:4px 0 0;font-size:15px;font-weight:600;color:#e6c788}
.finish .medal[data-medal=gold]{color:#ffd76a}.finish .medal[data-medal=silver]{color:#dfe7ea}.finish .medal[data-medal=bronze]{color:#e2a36c}

/* Photo finish: a stamp over the frozen line when the margin is a whisker. */
.photo{position:absolute;left:50%;top:21%;transform:translateX(-50%) rotate(-3deg);z-index:4;display:flex;flex-direction:column;align-items:center;padding:12px 26px 14px;border:2px solid #f2efdf;border-radius:6px;background:#061d27f0;pointer-events:none;animation:stamp .35s cubic-bezier(.2,1.6,.4,1) both}
.photo small{font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:#e6c788}
.photo strong{font-size:34px;font-weight:600;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
@keyframes stamp{from{opacity:0;transform:translateX(-50%) rotate(-3deg) scale(1.6)}to{opacity:1;transform:translateX(-50%) rotate(-3deg) scale(1)}}
@media(prefers-reduced-motion:reduce){.photo{animation:none}}

/* Big callouts for the moments that matter (a close shave, a pass); gold glass pulses the counter. */
.toast.big{font-size:30px;font-weight:700;font-style:italic;letter-spacing:-.03em;padding:8px 22px;background:#061d27d9}
.toast.shave{color:#8cffe4;text-shadow:0 0 18px #8cffe488}
.hud-notes.gold{animation:glass .6s ease-out}
@keyframes glass{0%{box-shadow:0 0 0 0 #ffd76acc;color:#ffd76a}100%{box-shadow:0 0 0 14px #ffd76a00}}
@media(prefers-reduced-motion:reduce){.hud-notes.gold{animation:none}}

/* A close shave flashes the frame's edges aqua and counts up under your place. */
.shave-flash{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;box-shadow:inset 0 0 110px 34px #8cffe4aa}
.shave-flash.on{animation:shaveFlash .45s ease-out}
@keyframes shaveFlash{from{opacity:1}to{opacity:0}}
.hud-place .shave-count{margin-top:6px;color:#8cffe4}.hud-place .shave-count b{font-weight:700}
.toast.big{text-transform:uppercase}
@media(prefers-reduced-motion:reduce){.shave-flash.on{animation:none}}

.toast.finish{color:#ffd76a;text-shadow:0 0 22px #ffd76a88}

/* The line: a big gold call held on screen, above the finish burst. */
.finish-call{position:absolute;left:50%;top:13%;transform:translate(-50%,-50%);z-index:5;pointer-events:none;font-size:clamp(44px,6vw,86px);font-weight:800;font-style:italic;letter-spacing:-.04em;text-transform:uppercase;color:#ffd76a;text-shadow:0 4px 0 #7a4f10,0 0 40px #ffb84a99;white-space:nowrap;padding:.25em .9em;background:radial-gradient(ellipse at center,#02121ad9 0,#02121a99 50%,transparent 76%)} /* the scrim keeps the gold arch from running through the gold words */
.finish-call.on{animation:finishCall 1s cubic-bezier(.2,1.4,.4,1) both}
@keyframes finishCall{0%{opacity:0;transform:translate(-50%,-50%) scale(1.8)}14%{opacity:1;transform:translate(-50%,-50%) scale(1)}78%{opacity:1}100%{opacity:0}}
/* The medal is for the time, so its badge sits beside the time, not the place. */
.finish .badge{display:inline-block;width:1em;height:1em;margin-left:.35em;border-radius:50%;vertical-align:-.05em;box-shadow:inset 0 -.08em 0 #0004,0 0 .3em #0006}
.finish .badge[data-medal=gold]{background:radial-gradient(circle at 35% 30%,#fff3b0,#ffd24a 45%,#b5801a)}
.finish .badge[data-medal=silver]{background:radial-gradient(circle at 35% 30%,#ffffff,#cfd8dc 45%,#7d8a90)}
.finish .badge[data-medal=bronze]{background:radial-gradient(circle at 35% 30%,#ffd9b0,#d48a4a 45%,#8a4f22)}
@media(prefers-reduced-motion:reduce){.finish-call.on{animation:none}}

#title-card .race-help{max-width:375px;margin-top:16px;color:#aac0c0;font-size:12px;line-height:1.6}
#title-card .race-help summary{cursor:pointer;color:#e6c788;width:fit-content}
#title-card .race-help p{margin:9px 0 0}
/* The fish you race as: its painted species, name and racing trait, and where to change it. */
.card .your-fish{display:flex;align-items:center;gap:12px;margin:0 0 14px;font-size:14px;line-height:1.3}
.your-fish b{display:block;font-weight:600}
.your-fish small{display:block;opacity:.75;font-size:12px}
.card .your-fish a{display:inline-block;margin-top:3px;min-height:0;padding:0;border:0;border-radius:0;background:none;font-size:12px;opacity:.85;text-decoration:underline;text-underline-offset:3px}
.your-fish .species-art{position:relative;flex:0 0 56px;height:38px}
.your-fish .species-art::before{content:"";position:absolute;width:100%;aspect-ratio:1;left:0;top:50%;transform:translateY(-50%);background:var(--fish-image) var(--fish-position)/var(--fish-size) no-repeat}

/* The buy-in: entry, pot and balance sit over the attract race, so they get the HUD's
   deep water behind them. The prize line leads the finish card, under your place. */
#title-card .game-buyin{max-width:375px;margin:0 0 16px;background:#061d27b8;border-color:#e6c78855;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
#title-card .game-buyin-refill{min-height:40px;font-size:13px}
.finish .prize{margin:-8px 0 18px;font-size:17px;font-weight:600;color:#aac0c0}
.finish .prize[data-won=true]{color:#ffd76a}
/* A first win earns the gold-fins colouring; the line links to the Cove picker. */
.finish .morph-earned{margin:-12px 0 18px;font-size:14px}
.finish .morph-earned a{display:inline;min-height:0;padding:0;border:0;border-radius:0;font-size:14px;color:#ffd76a;text-decoration:underline;text-underline-offset:4px}
@media(max-width:700px){#title-card .game-buyin{margin-bottom:12px}}