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

@font-face { font-family: 'Barlow Condensed'; font-style: italic; font-weight: 900; font-display: swap; src: url('../../shared/fonts/barlow-condensed-900i.woff2') format('woff2'); }
@font-face { font-family: 'Barlow Condensed'; font-style: italic; font-weight: 700; font-display: swap; src: url('../../shared/fonts/barlow-condensed-700i.woff2') format('woff2'); }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 600; font-display: swap; src: url('../../shared/fonts/barlow-condensed-600.woff2') format('woff2'); }

body {
  font-family: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  background:
    radial-gradient(60vw 60vh at 85% 10%, color-mix(in srgb, var(--c-secondary) 45%, transparent), transparent 70%),
    radial-gradient(50vw 50vh at 10% 95%, color-mix(in srgb, var(--c-primary) 16%, transparent), transparent 70%),
    var(--c-page);
}

.backdrop { font: 600 15px/1.45 'Barlow Condensed', sans-serif; letter-spacing: 0.04em; text-transform: uppercase; color: color-mix(in srgb, var(--c-text) 62%, transparent); }
.backdrop-brand img { width: 128px; height: auto; margin-bottom: 14px; }
.backdrop p { margin: 0; }
.backdrop a { color: var(--c-primary); text-decoration: none; border-bottom: 1px solid currentColor; }

.logo { width: 24cqw; height: auto; }

/* ------------------------------------------------------------------ HUD */
.hud { padding: max(4.5cqw, env(safe-area-inset-top)) 5cqw 0; }
.hud-row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
.hud-label { display: block; font: normal 600 3cqw/1 'Barlow Condensed', sans-serif; letter-spacing: 0.22em; text-transform: uppercase; opacity: 0.6; margin-bottom: 1cqw; }
.hud-score b, .hud-combo b { display: block; font: italic 900 8.6cqw/0.9 'Barlow Condensed', sans-serif; font-variant-numeric: tabular-nums; }
.hud-score b { color: var(--c-primary); transform-origin: left center; }
.hud-score b.bump { animation: bump 0.22s ease-out; }
.hud-combo { text-align: right; transition: opacity 0.2s; opacity: 0.35; }
.hud-combo.is-on { opacity: 1; }
.hud-combo b { transform-origin: right center; }
.hud-combo.bump b { animation: bump 0.3s ease-out; color: var(--c-primary); }

.hud-timer {
  width: 17cqw; height: 17cqw;
  display: grid; place-items: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--c-bg) 60%, transparent);
  box-shadow: inset 0 0 0 0.6cqw color-mix(in srgb, var(--c-text) 16%, transparent);
  transform: skewX(-6deg);
}
.hud-timer b { font: italic 900 9.4cqw/1 'Barlow Condensed', sans-serif; font-variant-numeric: tabular-nums; padding-right: 0.6cqw; }
.hud-timer.is-low { box-shadow: inset 0 0 0 0.8cqw var(--c-danger), 0 0 6cqw color-mix(in srgb, var(--c-danger) 60%, transparent); animation: pulse 0.5s ease-in-out infinite; }
.hud-timer.is-low b { color: var(--c-danger); }

.hud-bar { height: 1.2cqw; margin-top: 3.4cqw; background: color-mix(in srgb, var(--c-text) 14%, transparent); transform: skewX(-24deg); overflow: hidden; }
.hud-bar i { display: block; height: 100%; width: 100%; background: var(--c-primary); transform-origin: left; box-shadow: 0 0 3cqw var(--c-primary); }

.hud-rush {
  position: relative; width: max-content; margin: 3cqw auto 0; padding: 1.4cqw 5cqw 1.8cqw;
  background: var(--c-gold); color: #1d0e00; transform: skewX(-12deg) scale(0.6); opacity: 0;
  font: italic 900 5.4cqw/1 'Barlow Condensed', sans-serif; letter-spacing: 0.04em; text-transform: uppercase;
  transition: opacity 0.2s, transform 0.35s cubic-bezier(0.2, 1.6, 0.4, 1);
  box-shadow: 0 0 8cqw color-mix(in srgb, var(--c-gold) 70%, transparent);
}
.hud-rush.is-on { opacity: 1; transform: skewX(-12deg) scale(1); }
.hud-rush i { position: absolute; left: 0; bottom: 0; height: 0.9cqw; width: 100%; background: #1d0e00; transform-origin: left; }

@keyframes bump { 0% { transform: scale(1.35); } 100% { transform: scale(1); } }
@keyframes pulse { 50% { transform: skewX(-6deg) scale(1.08); } }

/* ------------------------------------------------------- hint + callouts */
.hint {
  position: absolute; left: 0; right: 0; bottom: 46cqw; z-index: 3; text-align: center;
  font: normal 600 3.6cqw/1 'Barlow Condensed', sans-serif; letter-spacing: 0.3em; text-transform: uppercase;
  opacity: 0; transition: opacity 0.4s; pointer-events: none;
}
.hint span::before, .hint span::after { content: '‹‹'; margin: 0 3cqw; color: var(--c-primary); letter-spacing: 0; }
.hint span::after { content: '››'; }
.hint.is-on { opacity: 0.85; animation: nudge 1s ease-in-out infinite; }
@keyframes nudge { 50% { transform: translateX(2.5cqw); } }

.callout {
  position: absolute; left: 0; right: 0; top: 33cqh; z-index: 6; text-align: center; pointer-events: none;
  font: italic 900 15cqw/0.9 'Barlow Condensed', sans-serif; text-transform: uppercase; color: var(--c-primary);
  text-shadow: 0 0 8cqw color-mix(in srgb, var(--c-primary) 65%, transparent), 0.8cqw 0.8cqw 0 var(--c-ink);
  opacity: 0;
}
.callout.is-on { animation: callout 1s cubic-bezier(0.2, 0.9, 0.2, 1) forwards; }
.callout.is-gold { color: var(--c-gold); text-shadow: 0 0 8cqw color-mix(in srgb, var(--c-gold) 70%, transparent), 0.8cqw 0.8cqw 0 #2a1200; }
@keyframes callout {
  0% { opacity: 0; transform: scale(0.4) rotate(-8deg); }
  18% { opacity: 1; transform: scale(1.12) rotate(-5deg); }
  30% { transform: scale(1) rotate(-5deg); }
  75% { opacity: 1; transform: scale(1) rotate(-5deg); }
  100% { opacity: 0; transform: scale(1.06) rotate(-5deg) translateY(-6cqw); }
}

.countdown {
  position: absolute; inset: 0; z-index: 6; display: grid; place-items: center; pointer-events: none;
  font: italic 900 56cqw/1 'Barlow Condensed', sans-serif; color: var(--c-primary);
  text-shadow: 0 0 14cqw color-mix(in srgb, var(--c-primary) 60%, transparent), 1.4cqw 1.4cqw 0 var(--c-secondary);
}
.countdown span { grid-area: 1 / 1; animation: count 0.72s cubic-bezier(0.2, 0.9, 0.2, 1) forwards; }
.countdown span.is-go { font-size: 38cqw; color: var(--c-text); }
@keyframes count {
  0% { opacity: 0; transform: scale(2.2) skewX(-4deg); }
  25% { opacity: 1; transform: scale(1); }
  70% { opacity: 1; transform: scale(0.96); }
  100% { opacity: 0; transform: scale(0.7); }
}

/* -------------------------------------------------------------- loading */
.screen--loading { align-items: center; justify-content: center; gap: 7cqw; background: var(--c-bg); z-index: 9; }
.screen--loading .logo { width: 42cqw; }
.loader { width: 34cqw; height: 1cqw; background: color-mix(in srgb, var(--c-text) 15%, transparent); transform: skewX(-24deg); overflow: hidden; }
.loader i { display: block; width: 40%; height: 100%; background: var(--c-primary); animation: load 0.9s ease-in-out infinite; }
@keyframes load { from { transform: translateX(-110%); } to { transform: translateX(260%); } }

/* ---------------------------------------------------------------- intro */
.screen--intro { padding: max(6cqw, env(safe-area-inset-top)) 6.5cqw max(6cqw, env(safe-area-inset-bottom)); }
.intro-top { display: flex; justify-content: space-between; align-items: center; }
.pill {
  font: normal 600 3cqw/1 'Barlow Condensed', sans-serif; letter-spacing: 0.2em; text-transform: uppercase;
  padding: 1.8cqw 3cqw; border: 0.4cqw solid color-mix(in srgb, var(--c-text) 35%, transparent); border-radius: 99cqw;
}

.hero { position: relative; flex: 1; min-height: 0; margin: 2cqw -6.5cqw 0; }
.hero-slash {
  position: absolute; left: -20%; right: -20%; top: 26%; height: 46%;
  background: linear-gradient(90deg, var(--c-secondary), color-mix(in srgb, var(--c-secondary) 40%, var(--c-accent)));
  transform: rotate(-16deg);
  box-shadow: 0 3.2cqw 0 -1.8cqw var(--c-primary), 0 0 20cqw color-mix(in srgb, var(--c-secondary) 70%, transparent);
  opacity: 0; animation: slash 0.8s 0.1s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}
@keyframes slash { from { opacity: 0; transform: rotate(-16deg) translateX(-40%); } to { opacity: 1; transform: rotate(-16deg); } }

.hero-can { position: absolute; width: auto; max-width: none; filter: drop-shadow(0 4cqw 8cqw rgba(0, 0, 0, 0.55)); }
.hero-can--a { height: 94%; left: 50%; top: 3%; --r: 13deg; --x: -50%; animation: float 4.2s ease-in-out infinite; z-index: 2; }
.hero-can--b { height: 56%; left: 9%; top: 8%; --r: -22deg; --x: 0%; animation: float 5.2s -1.4s ease-in-out infinite; filter: blur(0.35cqw) brightness(0.8) drop-shadow(0 3cqw 6cqw rgba(0, 0, 0, 0.5)); }
.hero-can--c { height: 50%; right: 8%; top: 40%; --r: 30deg; --x: 0%; animation: float 4.8s -2.6s ease-in-out infinite; filter: blur(0.5cqw) brightness(0.75) drop-shadow(0 3cqw 6cqw rgba(0, 0, 0, 0.5)); }
@keyframes float {
  0%, 100% { transform: translate(var(--x), 0) rotate(var(--r)); }
  50% { transform: translate(var(--x), -3.2%) rotate(calc(var(--r) + 3deg)); }
}

.title { margin: 3cqw 0 0; font: italic 900 21cqw/0.8 'Barlow Condensed', sans-serif; text-transform: uppercase; letter-spacing: -0.01em; color: var(--c-primary); text-shadow: 0 0 12cqw color-mix(in srgb, var(--c-primary) 35%, transparent); }
.body { margin: 3.5cqw 0 5cqw; font: normal 600 4.7cqw/1.2 'Barlow Condensed', sans-serif; letter-spacing: 0.03em; text-transform: uppercase; color: color-mix(in srgb, var(--c-text) 82%, transparent); }
.demo-note { margin: 3.4cqw 0 0; text-align: center; font: normal 600 2.7cqw/1 'Barlow Condensed', sans-serif; letter-spacing: 0.18em; text-transform: uppercase; color: color-mix(in srgb, var(--c-text) 42%, transparent); }

/* -------------------------------------------------------------- buttons */
.btn { position: relative; display: flex; align-items: center; justify-content: center; gap: 2.5cqw; width: 100%; text-transform: uppercase; transition: transform 0.15s, filter 0.15s; }
.btn--primary {
  height: 15.5cqw; background: var(--c-primary); color: var(--c-ink);
  font: italic 900 7.4cqw/1 'Barlow Condensed', sans-serif; letter-spacing: 0.02em;
  clip-path: polygon(4.5% 0, 100% 0, 95.5% 100%, 0 100%);
  overflow: hidden;
}
.btn--primary::after { content: ''; position: absolute; top: 0; bottom: 0; width: 22%; left: -30%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.75), transparent); transform: skewX(-20deg); animation: sheen 2.6s ease-in-out infinite; }
@keyframes sheen { 0%, 55% { left: -30%; } 100% { left: 120%; } }
.btn--primary svg { width: 6cqw; height: 6cqw; }
.btn--primary:hover { filter: brightness(1.08); }
.btn:active { transform: scale(0.96); }
.btn--ghost { height: 11cqw; margin-top: 1.5cqw; font: italic 700 4.6cqw/1 'Barlow Condensed', sans-serif; letter-spacing: 0.12em; color: color-mix(in srgb, var(--c-text) 80%, transparent); }
.btn--ghost:hover { color: var(--c-text); }

.mute { background: color-mix(in srgb, var(--c-bg) 70%, transparent); color: var(--c-text); }

/* ------------------------------------------------------------------ end */
.screen--end {
  align-items: center; justify-content: center; text-align: center;
  padding: max(7cqw, env(safe-area-inset-top)) 7cqw max(5cqw, env(safe-area-inset-bottom));
  background: linear-gradient(180deg, color-mix(in srgb, var(--c-bg) 50%, transparent), color-mix(in srgb, var(--c-bg) 88%, transparent) 55%);
  -webkit-backdrop-filter: blur(2.5cqw); backdrop-filter: blur(2.5cqw);
}
.screen--end .logo { width: 22cqw; align-self: flex-start; }
.end-can {
  position: absolute; right: -5cqw; top: -12cqw; height: 66cqw; width: auto; max-width: none; z-index: -1;
  transform: rotate(24deg) translateY(-30cqw); opacity: 0;
  filter: drop-shadow(0 0 12cqw color-mix(in srgb, var(--c-primary) 45%, transparent));
  transition: transform 0.9s cubic-bezier(0.2, 0.9, 0.3, 1.15) 0.15s, opacity 0.4s 0.15s;
}
.stage[data-state='ended'] .end-can { transform: rotate(24deg); opacity: 1; }
.kicker { margin: auto 0 0; font: normal 600 3.4cqw/1 'Barlow Condensed', sans-serif; letter-spacing: 0.32em; text-transform: uppercase; color: color-mix(in srgb, var(--c-text) 60%, transparent); }
.rank { margin: 2cqw 0 0; font: italic 900 13cqw/0.9 'Barlow Condensed', sans-serif; text-transform: uppercase; color: var(--c-text); }
.final { display: flex; align-items: baseline; justify-content: center; gap: 1.5cqw; margin-top: 1cqw; color: var(--c-primary); text-shadow: 0 0 14cqw color-mix(in srgb, var(--c-primary) 45%, transparent); }
.final b { font: italic 900 31cqw/0.95 'Barlow Condensed', sans-serif; font-variant-numeric: tabular-nums; padding-right: 1cqw; }
.final small { font: italic 900 6cqw/1 'Barlow Condensed', sans-serif; text-transform: uppercase; }
.stats { display: flex; gap: 9cqw; margin: 2cqw 0 0; }
.stats b { display: block; font: italic 900 8cqw/1 'Barlow Condensed', sans-serif; }
.stats span { font: normal 600 2.9cqw/1 'Barlow Condensed', sans-serif; letter-spacing: 0.2em; text-transform: uppercase; opacity: 0.6; }

.reward {
  width: 100%; padding: 4cqw 4.5cqw; margin: auto 0 3.5cqw; text-align: left;
  display: grid; grid-template-columns: 1fr auto; gap: 1cqw 3cqw; align-items: center;
  background: color-mix(in srgb, var(--c-text) 8%, transparent);
  border: 0.4cqw dashed color-mix(in srgb, var(--c-primary) 60%, transparent);
  border-radius: 3cqw;
}
.reward-label { grid-column: 1; font: normal 600 2.9cqw/1 'Barlow Condensed', sans-serif; letter-spacing: 0.22em; text-transform: uppercase; color: var(--c-primary); }
.reward strong { grid-column: 1; font: italic 900 6.3cqw/1 'Barlow Condensed', sans-serif; text-transform: uppercase; }
.code { grid-column: 2; grid-row: 1 / span 2; display: grid; gap: 1cqw; justify-items: center; padding: 2.4cqw 3.4cqw; border-radius: 2cqw; background: var(--c-bg); box-shadow: inset 0 0 0 0.4cqw color-mix(in srgb, var(--c-text) 18%, transparent); }
.code span { font: italic 900 5.4cqw/1 'Barlow Condensed', sans-serif; letter-spacing: 0.06em; color: var(--c-primary); }
.code i { font: normal 600 2.5cqw/1 'Barlow Condensed', sans-serif; letter-spacing: 0.22em; text-transform: uppercase; opacity: 0.6; }
.screen--end .btn--ghost { margin-bottom: 0; }