/* Native-size type and controls over an adaptive, full-bleed world. */
:root { --safe-t: env(safe-area-inset-top, 0px); --safe-r: env(safe-area-inset-right, 0px); --safe-b: env(safe-area-inset-bottom, 0px); --safe-l: env(safe-area-inset-left, 0px); }
#rs-title-screen { position: fixed; inset: 0; z-index: 100; overflow: hidden; background: #0c2a47; color: #f6ead2; isolation: isolate; transition: opacity .45s ease, visibility .45s; }
#rs-title-screen.is-leaving { opacity: 0; visibility: hidden; pointer-events: none; }
.title-dunes { position: absolute; bottom: calc(40px - 12vw); left: 0; width: 100%; height: auto; z-index: -1; pointer-events: none; }
[data-treatment=poster] .title-dunes { display: none; }
.title-sky { position: absolute; inset: 0; z-index: -2; background: url(../art/grain.jpg) center / 480px; mix-blend-mode: soft-light; opacity: .24; }
.title-art { position: absolute; right: -1%; bottom: -12%; height: 122%; width: auto; aspect-ratio: 2 / 3; object-fit: cover; object-position: right center; z-index: -1; mask-image: linear-gradient(90deg, transparent, #000 25%); }
.title-copy { position: absolute; left: max(7vw, calc(var(--safe-l) + 24px)); top: 50%; transform: translateY(-51%); }
.title-eyebrow, .title-load, .title-best { font-family: Aduma, sans-serif; }
.title-eyebrow { font-size: clamp(13px, 1.5vw, 23px); letter-spacing: .1em; text-transform: uppercase; color: #c5cc69; margin-bottom: 3vh; }
#rs-game-title { font: 700 clamp(64px, 10.5vw, 175px)/.79 Sprat, Georgia, serif; letter-spacing: -.065em; transform: rotate(-5deg); margin: 0 0 5vh; text-shadow: -3px 3px 0 #f46f6a; }
#rs-game-title > span { display: block; }
#rs-game-title > span + span { margin: .1em 0 0 .38em; color: #f46f6a; text-shadow: -3px 3px 0 #f6ead2; }
.title-star { display: inline-block; font-size: .52em; vertical-align: top; color: #c5cc69; text-shadow: none; margin: -.08em 0 0 .15em; transform: rotate(14deg); }
.title-play { display: flex; justify-content: space-between; align-items: center; gap: 48px; min-width: 220px; padding: 16px 24px; background: #c5cc69; color: #0c2a47; border: 0; border-radius: 4px; box-shadow: -4px 5px 0 #f46f6a; font: 700 clamp(20px, 2vw, 30px) Sprat, serif; cursor: pointer; transition: transform .16s, box-shadow .16s; }
.title-play:hover { transform: translate(2px, -2px); box-shadow: -6px 7px 0 #f46f6a; }
.title-play:active { transform: translate(-2px, 3px); box-shadow: -2px 2px 0 #f46f6a; }
.title-load { font-size: clamp(13px, 1.25vw, 18px); margin-top: 18px; opacity: .8; min-height: 1.3em; }
.title-best { font-size: 14px; color: #c5cc69; margin-top: 8px; }
.title-orbit { position: absolute; top: 14%; right: 9%; border: 1px solid #c5cc6980; border-radius: 50%; width: clamp(72px, 8vw, 114px); aspect-ratio: 1; display: grid; place-content: center; text-align: center; font: 600 clamp(10px, 1vw, 15px)/1.3 Aduma, sans-serif; letter-spacing: .08em; transform: rotate(14deg); color: #c5cc69; }
.title-brands { position: absolute; bottom: max(24px, calc(var(--safe-b) + 12px)); left: max(32px, calc(var(--safe-l) + 16px)); right: max(32px, calc(var(--safe-r) + 16px)); }
.title-music { position: absolute; top: max(12px, calc(var(--safe-t) + 8px)); left: 50%; transform: translateX(-50%); display: flex; align-items: center; min-height: 44px; white-space: nowrap; font: 500 16px/1.3 Aduma, sans-serif; }
#rs-controls { position: fixed; z-index: 110; top: max(12px, calc(var(--safe-t) + 8px)); right: max(20px, calc(var(--safe-r) + 12px)); display: flex; gap: 6px; }
#rs-controls button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; color: #f6ead2; background: #0c2a47; border: 1px solid #f6ead2; border-radius: 3px; min-height: 44px; min-width: 44px; padding: 0 12px; font: 600 14px Aduma, sans-serif; cursor: pointer; }
#rs-controls svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
#rs-controls button:hover { color: #c5cc69; border-color: #c5cc69; }
.sound-control .sound-slash, .sound-control.is-muted .sound-waves { display: none; }
.sound-control.is-muted .sound-slash { display: block; }
#rs-controls button[hidden] { display: none; }
#rs-controls .control-label { display: none; }
#rs-controls button { width: 44px; padding: 0; }
:where(#rs-title-screen, #rs-controls, #rs-rotate) button:focus-visible { outline: 3px solid #f46f6a; outline-offset: 5px; }
.rs-riding #rs-controls { top: auto; bottom: max(8px, calc(var(--safe-b) + 6px)); }
.rs-riding #rs-controls button { width: 44px; padding: 0; }
.rs-riding #rs-controls .control-label { display: none; }
.rs-finished #rs-controls, .rs-gate #rs-controls { display: none; }
/* Padding reserves room for the fixed HUD and controls when clamping feedback. */
#rs-ride-hud { position: fixed; inset: 0; z-index: 80; pointer-events: none; color: #f6ead2; font-family: Aduma, sans-serif; display: none; padding: max(116px, calc(var(--safe-t) + 106px)) max(14px, calc(var(--safe-r) + 12px)) max(62px, calc(var(--safe-b) + 60px)) max(14px, calc(var(--safe-l) + 12px)); }
.rs-riding #rs-ride-hud { display: block; }
.ride-music { position: absolute; bottom: max(14px, calc(var(--safe-b) + 8px)); left: max(22px, calc(var(--safe-l) + 12px)); max-width: calc(100% - 150px - var(--safe-l) - var(--safe-r)); padding: 3px 6px; background: #0c2a47; color: #f6ead2; font: 500 clamp(13px, 1.1vw, 16px)/1.3 Aduma, sans-serif; }
.ride-goal, .ride-score { position: absolute; top: max(18px, calc(var(--safe-t) + 8px)); }
.ride-goal { left: max(22px, calc(var(--safe-l) + 12px)); }
.hud-label { font-size: clamp(11px, 1.1vw, 16px); letter-spacing: .09em; text-transform: uppercase; display: block; opacity: .8; }
.ride-goal strong, .ride-score strong { font: 700 clamp(25px, 3vw, 43px)/1.2 Sprat, serif; font-variant-numeric: tabular-nums; }
.ride-flips small { font: 400 .55em Aduma, sans-serif; opacity: .65; }
.goal-dots { display: flex; gap: 5px; margin-top: 4px; }
.goal-dots i { width: 17px; height: 4px; background: #f6ead245; border-radius: 2px; }
.goal-dots i.is-done { background: #c5cc69; }
.goal-done .ride-flips { color: #c5cc69; }
.ride-score { right: max(22px, calc(var(--safe-r) + 12px)); text-align: right; }
.ride-counts { display: block; font-size: clamp(10px, 1vw, 14px); opacity: .8; }
.ride-route { position: absolute; top: max(24px, calc(var(--safe-t) + 12px)); left: 50%; transform: translateX(-50%); width: clamp(150px, 24vw, 380px); font-size: clamp(11px, 1vw, 15px); }
.ride-route > div:first-child { display: flex; justify-content: space-between; gap: 16px; margin-bottom: 9px; }
.ride-route time { color: #c5cc69; font-variant-numeric: tabular-nums; }
.route-line { height: 3px; background: #f6ead235; overflow: hidden; }
.route-line i { display: block; width: 100%; height: 100%; background: #c5cc69; transform-origin: left center; transform: scaleX(0); }
.ride-coach { position: absolute; top: max(72px, calc(var(--safe-t) + 66px)); left: 50%; transform: translateX(-50%); background: #0c2a47; color: #f6ead2; border: 1px solid #c5cc69; border-radius: 2px; padding: 8px 18px; white-space: nowrap; font: 600 clamp(14px, 1.5vw, 22px) Aduma, sans-serif; }
.ride-coach[hidden] { display: none; }
.ride-feedback { position: absolute; left: 0; top: 0; width: max-content; max-width: min(38vw, 300px); display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.ride-feedback p { margin: 0; max-width: 100%; padding: 6px 11px; background: #f6ead2; border-left: 4px solid #f46f6a; color: #0c2a47; font: 600 clamp(15px, 1.4vw, 21px)/1.2 Aduma, sans-serif; text-align: left; overflow-wrap: anywhere; }
.ride-feedback p[data-reward=artist] { background: #c5cc69; }
.ride-feedback p[data-reward=artist] span { display: inline-block; margin-inline-start: .6em; white-space: nowrap; }
.ride-feedback p[data-reward=prize] { display: flex; align-items: center; gap: 7px; }
.ride-feedback p[data-reward=prize] img { width: 32px; height: 32px; flex: none; object-fit: contain; }
.ride-feedback p.is-rough { background: #f46f6a; border-left-color: #f6ead2; }
.ride-feedback p[hidden] { display: none; }
/* Alternate direction: a bright printed title facing a close-up of the rider. */
#rs-title-screen[data-treatment=poster] { background: #f6ead2; color: #0c2a47; }
[data-treatment=poster] .title-sky { background: url(../art/grain.jpg) center / 420px; mix-blend-mode: multiply; opacity: .13; }
[data-treatment=poster] .title-art { height: 115%; width: 58%; bottom: -6%; object-fit: cover; object-position: 42% 55%; mask-image: none; clip-path: polygon(16% 0, 100% 0, 100% 100%, 0 100%); }
[data-treatment=poster] .title-copy { left: max(6vw, calc(var(--safe-l) + 24px)); }
[data-treatment=poster] .title-eyebrow, [data-treatment=poster] .title-best { color: #0c2a47; }
[data-treatment=poster] #rs-game-title { font-size: clamp(64px, 10vw, 160px); transform: rotate(-7deg); text-shadow: -3px 3px #c5cc69; }
[data-treatment=poster] #rs-game-title > span + span { margin-left: .12em; text-shadow: -3px 3px #0c2a47; }
[data-treatment=poster] .title-star { color: #0c2a47; }
[data-treatment=poster] .title-orbit { color: #f6ead2; border-color: #f6ead280; right: 5%; }
[data-treatment=poster] .title-play { background: #0c2a47; color: #f6ead2; }
[data-treatment=poster] .title-brands img:first-child { filter: brightness(0) saturate(100%); opacity: .85; }
@media (max-height: 520px) and (orientation: landscape) {
  .title-copy { left: max(6vw, calc(var(--safe-l) + 18px)); top: 49%; }
  .title-eyebrow { font-size: 12px; margin-bottom: 14px; }
  #rs-game-title, [data-treatment=poster] #rs-game-title { font-size: clamp(48px, 17vh, 86px); margin-bottom: 18px; }
  .title-play { min-width: 184px; padding: 11px 18px; font-size: 21px; }
  .title-load { margin-top: 12px; font-size: 12px; }
  .title-best { display: none; }
  .title-music { top: max(8px, calc(var(--safe-t) + 6px)); min-height: 36px; font-size: 12px; }
  .ride-music { bottom: max(8px, calc(var(--safe-b) + 6px)); }
  .title-brands { bottom: max(12px, calc(var(--safe-b) + 6px)); }
  .title-art { right: 0; height: 133%; bottom: -15%; width: auto; }
  .title-orbit { top: 20%; right: 9%; width: 65px; font-size: 9px; }
  #rs-controls button { min-height: 44px; font-size: 12px; padding: 0 11px; }
  .ride-goal, .ride-score { top: max(12px, calc(var(--safe-t) + 6px)); }
  .ride-route { top: max(16px, calc(var(--safe-t) + 10px)); }
  .ride-coach { top: max(58px, calc(var(--safe-t) + 52px)); padding: 6px 14px; }
  #rs-ride-hud { padding-top: max(96px, calc(var(--safe-t) + 88px)); }
  .ride-feedback { gap: 5px; }
  .ride-feedback p { padding: 5px 8px; }
}
@media (orientation: portrait) {
  .title-art { width: 100%; height: 85%; bottom: -1%; right: 0; object-fit: cover; object-position: center 38%; mask-image: linear-gradient(transparent, #000 13%, #000 73%, transparent); }
  .title-copy, [data-treatment=poster] .title-copy { inset: max(88px, calc(var(--safe-t) + 90px)) 24px max(200px, calc(var(--safe-b) + 186px)); transform: none; text-align: center; display: flex; flex-direction: column; align-items: center; }
  .title-eyebrow { font-size: 13px; margin-bottom: 20px; }
  #rs-game-title, [data-treatment=poster] #rs-game-title { font-size: clamp(64px, 20vw, 110px); line-height: .83; margin-bottom: 0; }
  #rs-game-title > span + span, [data-treatment=poster] #rs-game-title > span + span { margin-left: .4em; }
  .title-play { margin-top: auto; width: min(280px, 80vw); padding: 15px 22px; font-size: 24px; }
  .title-load { font-size: 14px; margin-top: 17px; text-shadow: 0 1px 5px #0c2a47; }
  .title-best { display: none; }
  .title-orbit { display: none; }
  .title-music { top: max(64px, calc(var(--safe-t) + 64px)); min-height: 0; font-size: 14px; }
  .title-brands { bottom: max(20px, calc(var(--safe-b) + 12px)); left: max(24px, calc(var(--safe-l) + 16px)); right: max(24px, calc(var(--safe-r) + 16px)); }
  [data-treatment=poster] .title-art { height: 65%; width: 100%; bottom: 0; object-position: center 48%; clip-path: polygon(0 4%, 100% 0, 100% 100%, 0 100%); mask-image: linear-gradient(#000 70%, transparent); }
  [data-treatment=poster] .title-load { color: #f6ead2; }
  [data-treatment=poster] .title-brands img { filter: none; }
  [data-treatment=poster] .title-brands img:last-child { filter: brightness(0) saturate(100%); }
  [data-treatment=poster] .title-copy { z-index: 2; }
}
@media (prefers-reduced-motion: reduce) { #rs-title-screen, .title-play { transition: none; } }

@media (min-aspect-ratio: 5/2) {
  .title-copy, [data-treatment=poster] .title-copy { left: max(6vw, calc(50% - 640px)); }
  .title-art { height: 140%; right: max(0px, calc(50% - 860px)); mask-image: linear-gradient(90deg, transparent, #000 25%, #000 85%, transparent); }
  .title-orbit { display: none; }
  [data-treatment=poster] .title-art { width: 48%; height: 140%; right: 0; object-fit: contain; object-position: center; background: #0c2a47; }
}

/* The title shares the ride's actual paper sky, dunes and character palette.
   The complete silhouette fits the frame; background art can run edge to edge. */
#rs-title-screen[data-treatment=night] { transition: transform .3s cubic-bezier(.65, 0, .35, 1), visibility .3s; }
#rs-title-screen[data-treatment=night].is-leaving { opacity: 1; transform: translateY(-102%); }
[data-treatment=night] .title-sky { background: url(../art/delivery-v1/sky.webp) center / cover; opacity: 1; mix-blend-mode: normal; }
[data-treatment=night] .title-art { right: 6%; bottom: 15%; height: 78%; width: 48%; aspect-ratio: auto; object-fit: contain; object-position: center; mask-image: none; }
[data-treatment=night] .title-orbit { top: 15%; right: 4%; width: 90px; border: 1px solid #c5cc69; }
[data-treatment=night] .title-brands img { filter: brightness(0); }
@media (max-height: 520px) and (orientation: landscape) {
  [data-treatment=night] .title-art { right: 7%; bottom: 30%; height: 69%; width: 44%; }
  [data-treatment=night] .title-dunes { width: max(100%, 700px); left: 50%; transform: translateX(-50%); bottom: -10px; }
  [data-treatment=night] .title-orbit { display: none; }
}
@media (orientation: portrait) {
  [data-treatment=night] .title-art { top: calc(29% + var(--safe-t) * 1.25); bottom: auto; left: 0; width: 100%; height: calc(34% - var(--safe-t) * 1.8); }
  [data-treatment=night] .title-dunes { width: auto; height: max(460px, 43vw); left: 50%; transform: translateX(-50%); bottom: -12px; }
  [data-treatment=night] .title-load { text-shadow: none; }
}
@media (orientation: portrait) and (max-height: 740px) {
  [data-treatment=night] .title-copy { top: max(82px, calc(var(--safe-t) + 84px)); bottom: max(190px, calc(var(--safe-b) + 176px)); }
  .title-music { top: max(60px, calc(var(--safe-t) + 62px)); font-size: 13px; }
  [data-treatment=night] .title-eyebrow { font-size: 11px; margin-bottom: 12px; }
  [data-treatment=night] #rs-game-title { font-size: clamp(54px, 17vw, 70px); line-height: .8; }
  [data-treatment=night] .title-art { top: 31%; height: 27%; }
  [data-treatment=night] .title-play { font-size: 22px; padding: 12px 18px; }
  [data-treatment=night] .title-load { font-size: 12px; margin-top: 13px; }
}
@media (orientation: portrait) and (max-height: 600px) {
  [data-treatment=night] .title-art { top: 34%; height: 18%; }
  [data-treatment=night] #rs-game-title { font-size: clamp(50px, 16vw, 64px); }
}
@media (orientation: portrait) and (min-width: 600px) {
  [data-treatment=night] .title-copy { bottom: max(240px, calc(var(--safe-b) + 226px)); }
}
@media (min-aspect-ratio: 5/2) {
  [data-treatment=night] .title-art { right: max(6%, calc(50% - 720px)); width: 42%; height: 82%; }
  [data-treatment=night] .title-dunes { bottom: calc(16vh - 24vw + 100px); }
}
[data-treatment=night] .title-load { width: fit-content; max-width: 100%; padding: 4px 7px; background: #0c2a47; color: #f6ead2; opacity: 1; }
@media (prefers-reduced-motion: reduce) { #rs-title-screen[data-treatment=night] { transition: none; } }
.title-play:disabled { cursor: wait; background: #f6ead2; color: #0c2a47; }
.title-play:focus-visible { outline: 3px solid #f6ead2; outline-offset: 5px; }

.rs-avif [data-treatment=night] .title-sky { background-image: url(../art/delivery-v1/sky.avif); }

/* Android's address bar can leave only 300px in landscape. Reserve the top
   controls and keep the title, instructions and brands in separate columns. */
@media (max-height: 360px) and (orientation: landscape) {
  [data-treatment=night] .title-copy { top: 64px; transform: none; }
  [data-treatment=night] .title-eyebrow { display: none; }
  [data-treatment=night] #rs-game-title { font-size: 44px; margin-bottom: 10px; }
  [data-treatment=night] .title-contest { font-size: 12px; min-height: 26px; padding: 4px 8px; margin-bottom: 6px; }
  [data-treatment=night] .title-play { font-size: 19px; min-width: 200px; padding: 8px 16px; }
  [data-treatment=night] .title-load { font-size: 11px; margin-top: 8px; }
  [data-treatment=night] .title-copy > .rs-legal-links { position: static; transform: none; width: fit-content; font-size: 11px; margin: 0; }
  [data-treatment=night] .title-copy > .rs-legal-links a { min-height: 24px; }
  [data-treatment=night] .title-art { right: 7%; bottom: 28%; height: 62%; width: 40%; }
  [data-treatment=night] .title-brands { left: auto; right: max(24px, calc(var(--safe-r) + 16px)); bottom: 16px; width: 44%; gap: 12px; }
  [data-treatment=night] .title-brands img:first-child { width: 110px; }
  [data-treatment=night] .title-brands img:nth-child(2) { width: 64px; }
  [data-treatment=night] .title-brands img:last-child { width: 155px; }
}