/* OLLO — brand skin. Colors come from campaign.js as --c-* variables. */

@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; src: url('../../shared/fonts/archivo-var.woff2') format('woff2'); }

:root { --display: 900 1em/1 'Archivo', 'Arial Black', sans-serif; --line: 0.7cqw; }

body { font-family: 'Archivo', system-ui, sans-serif; background: var(--c-page); }

.backdrop { font: 600 13px/1.5 'Archivo', sans-serif; letter-spacing: 0.02em; color: color-mix(in srgb, var(--c-ink) 70%, transparent); }
.backdrop-brand img { width: 110px; height: auto; margin-bottom: 14px; }
.backdrop p { margin: 0; }
.backdrop a { color: var(--c-primary); font-weight: 800; text-decoration: none; border-bottom: 2px solid currentColor; }
@media (min-width: 700px) and (min-height: 480px) {
  body:not(.is-embed) .stage { box-shadow: 0 0 0 10px var(--c-ink), 18px 18px 0 10px var(--c-primary); }
}

.logo { width: 21cqw; height: auto; }
.tag {
  font: 800 2.7cqw/1 'Archivo', sans-serif; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 1.7cqw 2.6cqw; border: var(--line) solid var(--c-ink); border-radius: 99cqw; background: var(--c-bg);
}

/* ------------------------------------------------------------------ HUD */
.hud { padding: max(4.5cqw, env(safe-area-inset-top)) 5cqw 0; color: var(--c-ink); }
.hud-row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: 3cqw; }
.hud-label { display: block; font: 800 2.6cqw/1 'Archivo', sans-serif; letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 1cqw; }
.hud-score b { display: block; font: var(--display); font-size: 8.4cqw; font-stretch: 112%; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; transform-origin: left bottom; }
.hud-score b.bump { animation: bump 0.2s ease-out; }
.hud-mult {
  font: var(--display); font-size: 5cqw; font-stretch: 112%; padding: 1.4cqw 3cqw 1.2cqw; border-radius: 99cqw;
  background: var(--c-ink); color: var(--c-sun); opacity: 0; transform: scale(0.6) rotate(-6deg); transition: opacity 0.2s, transform 0.3s cubic-bezier(0.2, 1.6, 0.4, 1);
}
.hud-mult.is-on { opacity: 1; transform: rotate(-6deg); }
.hud-mult.bump { animation: multbump 0.35s ease-out; }
.hud-ways { display: flex; justify-content: flex-end; gap: 1.8cqw; }
.hud-ways i {
  width: 6.4cqw; height: 6.4cqw; border-radius: 50%; border: var(--line) solid var(--c-ink);
  background: color-mix(in srgb, var(--c-ink) 12%, transparent); transition: transform 0.4s cubic-bezier(0.2, 1.8, 0.4, 1), background 0.2s;
}
.hud-ways i.is-on { background: var(--way); transform: scale(1.15); box-shadow: 0.6cqw 0.6cqw 0 var(--c-ink); }

.hud-track { position: relative; height: 2.2cqw; margin-top: 4cqw; border: var(--line) solid var(--c-ink); border-radius: 99cqw; background: var(--c-white); }
.hud-track i { position: absolute; inset: 0 auto 0 0; width: 100%; border-radius: 99cqw; background: var(--c-primary); transform-origin: left; transform: scaleX(0); }
.hud-runner { position: absolute; top: 50%; left: 0; width: 4.6cqw; height: 4.6cqw; margin: -2.3cqw 0 0 -2.3cqw; border-radius: 50%; background: var(--c-sun); border: var(--line) solid var(--c-ink); }
.hud-flag { position: absolute; right: 0; top: 3.4cqw; font: 800 2.4cqw/1 'Archivo', sans-serif; letter-spacing: 0.12em; }

@keyframes bump { 0% { transform: scale(1.3); } 100% { transform: scale(1); } }
@keyframes multbump { 0% { transform: scale(1.6) rotate(-6deg); } 100% { transform: scale(1) rotate(-6deg); } }

/* ------------------------------------------------------- hint + callouts */
.hint {
  position: absolute; left: 0; right: 0; bottom: 8cqw; z-index: 3; text-align: center; pointer-events: none;
  opacity: 0; transition: opacity 0.4s;
}
.hint span { display: inline-block; font: 800 3cqw/1 'Archivo', sans-serif; letter-spacing: 0.14em; text-transform: uppercase; padding: 2.4cqw 4cqw; border-radius: 99cqw; background: var(--c-bg); color: var(--c-ink); border: var(--line) solid var(--c-ink); }
.hint span::before { content: '← '; }
.hint span::after { content: ' →'; }
.hint.is-on { opacity: 1; }

.callout { position: absolute; left: 0; right: 0; top: 20cqh; z-index: 6; display: grid; justify-items: center; pointer-events: none; opacity: 0; }
.callout b {
  display: block; font: var(--display); font-size: 10.5cqw; font-stretch: 125%; text-transform: uppercase; letter-spacing: -0.02em;
  padding: 2.4cqw 5cqw 2cqw; background: var(--way, var(--c-sun)); color: var(--way-ink, var(--c-ink));
  border: var(--line) solid var(--c-ink); box-shadow: 1.4cqw 1.4cqw 0 var(--c-ink);
}
.callout small { display: block; margin-top: -1cqw; font: 800 3.4cqw/1 'Archivo', sans-serif; letter-spacing: 0.16em; text-transform: uppercase; padding: 1.8cqw 3.4cqw; background: var(--c-ink); color: var(--c-bg); transform: rotate(3deg); }
.callout.is-on { animation: callout 1.25s cubic-bezier(0.2, 0.9, 0.2, 1) forwards; }
@keyframes callout {
  0% { opacity: 0; transform: scale(0.3) rotate(-14deg); }
  16% { opacity: 1; transform: scale(1.1) rotate(-5deg); }
  26% { transform: scale(1) rotate(-5deg); }
  80% { opacity: 1; transform: scale(1) rotate(-5deg); }
  100% { opacity: 0; transform: scale(0.9) rotate(-5deg) translateY(-8cqw); }
}

.countdown { position: absolute; inset: 0; z-index: 6; display: grid; place-items: center; pointer-events: none; font: var(--display); font-size: 50cqw; font-stretch: 125%; color: var(--c-bg); -webkit-text-stroke: 1cqw var(--c-ink); paint-order: stroke fill; text-shadow: 2.4cqw 2.4cqw 0 var(--c-ink); }
.countdown span { grid-area: 1 / 1; animation: count 0.7s cubic-bezier(0.2, 0.9, 0.2, 1) forwards; }
.countdown span.is-go { font-size: 34cqw; color: var(--c-sun); text-transform: uppercase; }
@keyframes count {
  0% { opacity: 0; transform: scale(0.3) rotate(-12deg); }
  25% { opacity: 1; transform: scale(1.05) rotate(-4deg); }
  75% { opacity: 1; transform: scale(1) rotate(-4deg); }
  100% { opacity: 0; transform: scale(1.4) rotate(-4deg); }
}

/* -------------------------------------------------------------- loading */
.screen--loading { align-items: center; justify-content: center; gap: 7cqw; background: var(--c-bg); z-index: 9; }
.screen--loading .logo { width: 38cqw; }
.loader { width: 30cqw; height: 2cqw; border: var(--line) solid var(--c-ink); border-radius: 99cqw; overflow: hidden; background: var(--c-white); }
.loader i { display: block; width: 45%; height: 100%; background: var(--c-primary); animation: load 0.9s ease-in-out infinite; }
@keyframes load { from { transform: translateX(-110%); } to { transform: translateX(230%); } }

/* ---------------------------------------------------------------- intro */
.screen--intro, .screen--end {
  padding: max(6cqw, env(safe-area-inset-top)) 6cqw max(5.5cqw, env(safe-area-inset-bottom));
  background: var(--c-bg); color: var(--c-ink); overflow: hidden;
}
.intro-top { display: flex; justify-content: space-between; align-items: center; position: relative; z-index: 3; }

.hero { position: relative; flex: 1; min-height: 0; margin: 5cqw -6cqw 0; padding: 0 6cqw; }
.hero-sun { position: absolute; right: -14cqw; top: 2%; width: 66cqw; aspect-ratio: 1; border-radius: 50%; background: var(--c-sun); transform: scale(0); animation: sun 0.9s 0.15s cubic-bezier(0.2, 1.3, 0.4, 1) forwards; }
@keyframes sun { to { transform: scale(1); } }

.title { position: relative; margin: 0; font: var(--display); font-size: 25.5cqw; line-height: 0.83; font-stretch: 125%; text-transform: uppercase; letter-spacing: -0.035em; opacity: 0; animation: slam 0.7s 0.25s cubic-bezier(0.2, 0.9, 0.2, 1) forwards; }
@keyframes slam { from { opacity: 0; transform: translateX(-12cqw); } to { opacity: 1; transform: none; } }

.tape { position: absolute; left: -12cqw; right: -12cqw; bottom: 7%; transform: rotate(-9deg); background: var(--c-primary); color: var(--c-bg); border-block: var(--line) solid var(--c-ink); overflow: hidden; white-space: nowrap; }
.tape span { display: inline-block; padding: 2.2cqw 0; font: 800 3.6cqw/1 'Archivo', sans-serif; font-stretch: 112%; letter-spacing: 0.06em; text-transform: uppercase; animation: tape 14s linear infinite; }
@keyframes tape { to { transform: translateX(-33.333%); } }

.hero-shoe { position: absolute; right: -9cqw; top: max(45%, 50cqw); width: 98cqw; max-width: none; height: auto; transform: rotate(-13deg); filter: drop-shadow(1.6cqw 2.2cqw 0 color-mix(in srgb, var(--c-ink) 22%, transparent)); opacity: 0; animation: shoe-in 0.9s 0.45s cubic-bezier(0.2, 1.2, 0.3, 1) forwards, shoe-float 3.6s 1.4s ease-in-out infinite; }
@keyframes shoe-in { from { opacity: 0; transform: translate(60cqw, 10cqw) rotate(10deg); } to { opacity: 1; transform: rotate(-13deg); } }
@keyframes shoe-float { 0%, 100% { transform: rotate(-13deg); } 50% { transform: translateY(-2.6cqw) rotate(-10.5deg); } }

/* Restart CSS entrance animations whenever the screen is shown again. */
.stage:not([data-state='intro']) .screen--intro :is(.hero-sun, .title, .hero-shoe),
.stage:not([data-state='ended']) .screen--end :is(.hero-sun, .hero-shoe) { animation: none; }

.body { margin: 4.5cqw 0; font: 600 4.1cqw/1.3 'Archivo', sans-serif; max-width: 72cqw; }
.demo-note { margin: 3.2cqw 0 0; text-align: center; font: 700 2.3cqw/1 'Archivo', sans-serif; letter-spacing: 0.14em; text-transform: uppercase; color: color-mix(in srgb, var(--c-ink) 50%, transparent); }

/* -------------------------------------------------------------- buttons */
.btn { display: flex; align-items: center; justify-content: center; gap: 3cqw; width: 100%; text-transform: uppercase; transition: transform 0.12s, box-shadow 0.12s, background 0.15s; }
.btn--primary {
  height: 15cqw; border-radius: 3.4cqw; background: var(--c-ink); color: var(--c-bg);
  font: var(--display); font-size: 5cqw; font-stretch: 118%; letter-spacing: 0.01em;
  box-shadow: 1.4cqw 1.4cqw 0 var(--c-primary);
}
.btn--primary svg { width: 6cqw; height: 6cqw; transition: transform 0.2s; }
.btn--primary:hover svg { transform: translateX(1.2cqw); }
.btn--primary:active { transform: translate(1cqw, 1cqw); box-shadow: 0.4cqw 0.4cqw 0 var(--c-primary); }
.btn--ghost { height: 10cqw; margin-top: 2.4cqw; font: 800 3.4cqw/1 'Archivo', sans-serif; letter-spacing: 0.12em; text-decoration: underline; text-underline-offset: 1.2cqw; text-decoration-thickness: 0.6cqw; }

.mute { background: var(--c-bg); color: var(--c-ink); border: var(--line) solid var(--c-ink); opacity: 1; }

/* ------------------------------------------------------------------ end */
.end-hero { position: relative; flex: 1; min-height: 0; margin: 0 -6cqw; }
.end-hero .hero-sun { right: auto; left: 50%; top: 50%; width: 52cqw; margin: -26cqw 0 0 -26cqw; }
.end-hero .hero-shoe { right: auto; left: 50%; bottom: auto; top: 50%; width: 80cqw; margin: -24cqw 0 0 -40cqw; }
.end-title { margin: 0 0 4cqw; font: var(--display); font-size: 13.4cqw; line-height: 0.86; font-stretch: 125%; text-transform: uppercase; letter-spacing: -0.03em; }
.stats { display: grid; grid-template-columns: 1.3fr 1fr 1fr; border: var(--line) solid var(--c-ink); border-radius: 3.4cqw; background: var(--c-white); overflow: hidden; margin-bottom: 3cqw; }
.stats > div { padding: 3cqw 3.4cqw 2.8cqw; }
.stats > div + div { border-left: var(--line) solid var(--c-ink); }
.stats b { display: block; font: var(--display); font-size: 7.4cqw; font-stretch: 112%; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.stats > div:first-child b { color: var(--c-primary); }
.stats span { display: block; margin-top: 1.2cqw; font: 800 2.3cqw/1 'Archivo', sans-serif; letter-spacing: 0.12em; text-transform: uppercase; color: color-mix(in srgb, var(--c-ink) 60%, transparent); }
.reward { padding: 3.6cqw 4cqw; margin-bottom: 4cqw; border-radius: 3.4cqw; background: var(--c-primary); color: var(--c-bg); border: var(--line) solid var(--c-ink); }
.reward-label { display: inline-block; font: 800 2.4cqw/1 'Archivo', sans-serif; letter-spacing: 0.12em; text-transform: uppercase; padding: 1.2cqw 2cqw; border-radius: 99cqw; background: var(--c-sun); color: var(--c-ink); margin-bottom: 2cqw; }
.reward strong { display: block; font: 700 4.2cqw/1.2 'Archivo', sans-serif; }