/* Ridable Slush 2026: unicorn-mode game UI.
   Tokens are copied from ridable-web/src/styles/tokens.css (unicorn palette) so the game matches the site.
   Everything is laid out on a 1920x1080 reference canvas, same as the Unity Canvas Scaler. */

@font-face {
  font-family: 'Archivo';
  src: url('assets/fonts/archivo-var-latin.woff2') format('woff2');
  font-weight: 100 900;
  font-stretch: 62.5% 125%;
  font-display: block;
}

:root {
  --indigo: #161a4f;
  --indigo-deep: #10184b;
  --indigo-card: #242a6f;
  --pink: #ec5dab;
  --pink-ink: #c2307f;
  --pink-soft: #f383c0;
  --pink-stage: #ff9fd3;
  --lime: #dcf169;
  --lavender: #f6f4fe;
  --paper: #f7f5fe;
  --line-light: #d2cfe8;
  --violet: #9b7bff;
  --cyan: #7fe7ff;
  --plum: #321735;
  --shadow-rgb: 8 10 40;

  --glass: rgba(16, 24, 75, 0.78);
  --glass-line: rgba(247, 245, 254, 0.18);
  --stage: radial-gradient(ellipse 80% 70% at 30% 0%, rgba(160, 65, 125, 0.75), transparent 70%), radial-gradient(ellipse 70% 60% at 85% 100%, rgba(155, 123, 255, 0.35), transparent 70%), linear-gradient(160deg, #321735 0%, #1d1440 55%, #161a4f 100%);
  --holo: conic-gradient(from 210deg at 50% 50%, #f7f5fe, #ec5dab, #9b7bff, #7fe7ff, #dcf169, #f7f5fe);

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: linear(0, 0.574 7.6%, 0.838 11.9%, 0.946 14.2%, 1.029 16.5%, 1.089 19%, 1.126 21.5%, 1.142 24.5%, 1.137 27.9%, 1.117 31%, 1.051 38.6%, 1.022 42.6%, 1 47%, 0.987 51.6%, 0.984 58.8%, 1.001 81.3%, 1);

  --safe: 64px;
  --display: 'Archivo', system-ui, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background: #05061a;
  color: var(--paper);
  font-family: var(--display);
  font-stretch: 100%;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

/* ---------- Type ---------- */
.t-display { font-weight: 800; font-stretch: 125%; letter-spacing: -0.01em; text-transform: uppercase; line-height: 0.95; }
.t-num { font-weight: 900; font-stretch: 125%; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; line-height: 1; }
.t-label { font-weight: 700; font-stretch: 110%; letter-spacing: 0.14em; text-transform: uppercase; font-size: 24px; }
.t-body { font-weight: 500; font-stretch: 100%; font-size: 34px; line-height: 1.3; }
.c-pink { color: var(--pink); }
.c-lime { color: var(--lime); }
.c-dim { color: rgba(247, 245, 254, 0.74); }

/* ---------- Primitives (each one is an exported sprite) ---------- */

/* Glass panel: the base HUD container. 9-slice. */
.panel {
  background: linear-gradient(180deg, rgba(44, 52, 138, 0.94) 0%, rgba(22, 26, 79, 0.92) 55%, rgba(16, 24, 75, 0.94) 100%);
  border: 4px solid rgba(247, 245, 254, 0.92);
  border-radius: 32px;
  /* sticker depth: inner gloss + indigo keyline, hard "thickness" edge, soft cast shadow */
  box-shadow:
    inset 0 3px 0 rgba(255, 255, 255, 0.22), inset 0 0 0 2px rgba(16, 24, 75, 0.9),
    0 8px 0 #0b0f3a, 0 26px 44px rgb(var(--shadow-rgb) / 0.5);
}
.panel--solid { background: linear-gradient(180deg, #232a72, #161a4f 60%); }
.panel--card { background: linear-gradient(180deg, #2c338a, #242a6f 60%); box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.16), 0 6px 0 rgba(11, 15, 58, 0.8); }

/* Pill: timer, buttons, chips. 9-slice with fully round caps. */
.pill {
  display: inline-flex; align-items: center; justify-content: center; gap: 14px;
  border-radius: 999px; padding: 0 40px; height: 96px;
}
.pill--glass { background: linear-gradient(180deg, rgba(44, 52, 138, 0.95), rgba(16, 24, 75, 0.94) 60%); border: 4px solid rgba(247, 245, 254, 0.92); box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.22), inset 0 0 0 2px rgba(16, 24, 75, 0.9), 0 7px 0 #0b0f3a, 0 22px 40px rgb(var(--shadow-rgb) / 0.5); }
.pill--pink { background: linear-gradient(180deg, #f57ebd, #ec5dab 55%, #e04f9f); color: var(--indigo); box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.35), 0 7px 0 #a8226c, 0 20px 36px rgb(var(--shadow-rgb) / 0.4); }
.pill--lime { background: linear-gradient(180deg, #e9f78f, #dcf169 55%, #cfe656); color: var(--indigo); box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.5), 0 6px 0 #8fa32c, 0 18px 32px rgb(var(--shadow-rgb) / 0.35); }
.pill--outline { box-shadow: inset 0 0 0 3px rgba(247, 245, 254, 0.5); color: var(--paper); }

/* Die-cut sticker chip: white outline + soft drop shadow, like the website stickers. */
.diecut {
  border: 7px solid #fff;
  box-shadow: inset 0 4px 0 rgba(255, 255, 255, 0.45), 0 7px 0 #c9c4e6, 0 20px 30px rgb(var(--shadow-rgb) / 0.45);
}

/* Sticker artwork (PNG already has its white die-cut edge) */
.sticker { position: absolute; display: block; filter: drop-shadow(0 12px 22px rgb(var(--shadow-rgb) / 0.4)); transform: rotate(var(--r, -6deg)); }

/* Sticker type: big words with indigo stroke + white die-cut edge. Used for 3-2-1, GO, TIME'S UP. */
.stype {
  position: relative; display: inline-block;
  font-weight: 900; font-stretch: 125%; text-transform: uppercase; line-height: 0.9; letter-spacing: -0.02em;
  color: var(--lime);
  -webkit-text-stroke: 18px var(--indigo); paint-order: stroke fill;
}
.stype::before {
  content: attr(data-t); position: absolute; inset: 0; z-index: -1;
  color: #fff; -webkit-text-stroke: 44px #fff; paint-order: stroke fill;
  filter: drop-shadow(0 12px 0 #c9c4e6) drop-shadow(0 26px 30px rgb(var(--shadow-rgb) / 0.5));
}
.stype--pink { color: var(--pink); }
.stype--paper { color: var(--paper); }

/* ---------- Stage (1920x1080 frame, scaled to fit the window) ---------- */
.viewport { position: fixed; inset: 0; display: grid; place-items: center; }
.frame {
  position: absolute; left: 50%; top: 50%; width: 1920px; height: 1080px; overflow: hidden;
  transform: translate(-50%, -50%); transform-origin: center; background: #3b9fd4;
}
.noscale .frame { left: 0; top: 0; transform: none; }
.world { position: absolute; inset: 0; background-size: cover; background-position: center; }
.world--dim::after { content: ''; position: absolute; inset: 0; background: rgba(16, 24, 75, 0.55); backdrop-filter: blur(10px); }
.stage-wash { position: absolute; inset: 0; background: var(--stage); opacity: 0.9; }
.stars {
  position: absolute; inset: 0; opacity: 0.7; pointer-events: none;
  background-image:
    radial-gradient(2px 2px at 12% 18%, #fff 50%, transparent 51%), radial-gradient(1.5px 1.5px at 28% 62%, #fff 50%, transparent 51%),
    radial-gradient(2px 2px at 44% 9%, #fff 50%, transparent 51%), radial-gradient(1.5px 1.5px at 63% 41%, #fff 50%, transparent 51%),
    radial-gradient(2.5px 2.5px at 79% 14%, #fff 50%, transparent 51%), radial-gradient(1.5px 1.5px at 88% 71%, #fff 50%, transparent 51%),
    radial-gradient(2px 2px at 7% 83%, #fff 50%, transparent 51%), radial-gradient(1.5px 1.5px at 53% 88%, #fff 50%, transparent 51%),
    radial-gradient(2px 2px at 36% 34%, #fff 50%, transparent 51%), radial-gradient(1.5px 1.5px at 95% 38%, #fff 50%, transparent 51%);
}

.screen { position: absolute; inset: 0; opacity: 0; pointer-events: none; transition: opacity 300ms var(--ease-out); }
.screen.is-on { opacity: 1; pointer-events: auto; }
.abs { position: absolute; }

/* ---------- HUD ---------- */
.hud-score { left: var(--safe); top: 56px; width: 470px; height: 168px; padding: 22px 36px; }
.hud-score .t-label { color: var(--lime); }
.hud-score .t-num { font-size: 104px; margin-top: 6px; }
.hud-score-icon { right: -34px; top: -30px; width: 104px; --r: 12deg; }

.hud-combo { left: 260px; top: 236px; height: 88px; padding: 0 28px; font-size: 50px; --r: -5deg; }

.hud-timer { left: 50%; top: 56px; width: 340px; height: 120px; margin-left: -170px; padding: 0; flex-direction: column; gap: 4px; }
.hud-timer .t-label { font-size: 20px; color: rgba(247, 245, 254, 0.74); margin: 4px -0.14em 0 0; }
.hud-timer .t-num { font-size: 72px; margin-bottom: 4px; }
.hud-timer.is-low { background: linear-gradient(180deg, #f57ebd, #ec5dab 55%); border-color: #fff; color: var(--indigo); box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.35), 0 7px 0 #a8226c, 0 22px 40px rgb(var(--shadow-rgb) / 0.5); }
.hud-timer.is-low .t-label { color: var(--indigo); }

/* Brand plate: always-on Ridable mark for every gameplay screen (photos, social) */
.brand-plate { right: var(--safe); top: 56px; width: 360px; height: 120px; padding: 0; }
.brand-plate img.wm { width: 262px; margin-left: 6px; }
.brand-plate .sticker { right: 214px; top: 82px; width: 190px; --r: -8deg; }
.brand-foot { right: var(--safe); bottom: 52px; width: 230px; }

.hud-items { left: var(--safe); top: 244px; height: 72px; padding: 0 26px 0 14px; gap: 10px; font-size: 40px; }
.hud-items img { width: 52px; height: 52px; object-fit: contain; filter: drop-shadow(0 4px 6px rgb(var(--shadow-rgb) / 0.4)); }

/* Balance pads: three live sensor readouts, bottom centre */
.hud-balance { left: 50%; bottom: 40px; width: 860px; height: 236px; margin-left: -430px; display: flex; align-items: center; justify-content: center; gap: 56px; padding: 0 40px; }
.pad { position: relative; display: grid; grid-template-rows: 184px auto; justify-items: center; align-items: center; gap: 8px; }
.pad-ring {
  position: relative; width: 150px; height: 150px; border-radius: 50%;
  background:
    radial-gradient(circle, transparent 0 18%, rgba(247, 245, 254, 0.22) 18.5% 19.5%, transparent 20% 46%, rgba(247, 245, 254, 0.22) 46.5% 47.5%, transparent 48% 100%),
    radial-gradient(circle at 50% 40%, rgba(155, 123, 255, 0.28), rgba(16, 24, 75, 0.2) 70%);
  box-shadow: inset 0 0 0 3px rgba(247, 245, 254, 0.35);
}
.pad-ring::before, .pad-ring::after { content: ''; position: absolute; background: rgba(247, 245, 254, 0.18); }
.pad-ring::before { left: 50%; top: 10px; bottom: 10px; width: 2px; margin-left: -1px; }
.pad-ring::after { top: 50%; left: 10px; right: 10px; height: 2px; margin-top: -1px; }
.pad--main .pad-ring { width: 184px; height: 184px; }
.pad-zone { position: absolute; left: 50%; top: 50%; width: 38%; height: 38%; transform: translate(-50%, -50%); border-radius: 50%; border: 3px dashed rgba(220, 241, 105, 0.7); }
.pad-dot {
  position: absolute; left: 50%; top: 50%; width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff 0 14%, #eefaa8 22%, #dcf169 55%, #b9cf3f 100%); border: 4px solid #fff;
  box-shadow: 0 3px 0 rgba(11, 15, 58, 0.6), 0 0 0 8px rgba(220, 241, 105, 0.28), 0 0 26px 6px rgba(220, 241, 105, 0.7);
  transition: background 200ms, box-shadow 200ms;
}
.pad.is-off .pad-dot { background: radial-gradient(circle at 35% 30%, #fff 0 14%, #f9b3d9 22%, #ec5dab 55%, #c2307f 100%); box-shadow: 0 0 0 8px rgba(236, 93, 171, 0.3), 0 0 26px 6px rgba(236, 93, 171, 0.75); }
.pad.is-off .pad-ring { box-shadow: inset 0 0 0 3px var(--pink); }
.pad .t-label { font-size: 22px; margin-right: -0.14em; }
.pad--main .t-label { color: var(--lime); }
.pad.is-off .t-label { color: var(--pink); }

/* Score feedback chips */
.chip { height: 88px; padding: 0 30px; font-size: 56px; border-radius: 999px; display: inline-flex; align-items: center; }
.chip--plus { background: linear-gradient(180deg, #ecf99a, #dcf169 60%); color: var(--indigo); }
.chip--minus { background: linear-gradient(180deg, #f78cc6, #ec5dab 60%); color: var(--indigo); }
.fx-plus { left: 1010px; top: 470px; transform: rotate(-6deg); }
.fx-minus { left: 1360px; top: 560px; transform: rotate(7deg); }
.fx-spark { width: 64px; }
.hit-vignette { position: absolute; inset: 0; background: radial-gradient(ellipse 75% 70% at 50% 50%, transparent 55%, rgba(236, 93, 171, 0.55) 85%, rgba(194, 48, 127, 0.85) 100%); pointer-events: none; }

/* ---------- Countdown ---------- */
.count { inset: 0; display: grid; place-items: center; }
.count .stype { font-size: 460px; }
.count-go { display: grid; justify-items: center; gap: 0; }
.count-go .stype { font-size: 300px; }

/* ---------- Attract ---------- */
.att-logo { left: var(--safe); top: 64px; width: 300px; }
.att-head { left: var(--safe); top: 250px; font-size: 156px; }
.att-sub { left: var(--safe); top: 640px; width: 900px; }
.att-cta { left: var(--safe); top: 770px; height: 120px; padding: 0 56px; font-size: 48px; font-weight: 800; font-stretch: 118%; }
.att-board { right: var(--safe); bottom: 64px; width: 620px; padding: 28px 32px; }
.row { display: grid; grid-template-columns: 64px 1fr auto; align-items: center; height: 72px; gap: 16px; font-size: 32px; font-weight: 700; font-stretch: 110%; border-radius: 18px; padding: 0 22px; }
.row + .row { margin-top: 8px; }
.row .rk { font-weight: 900; font-stretch: 125%; color: var(--lime); }
.row .sc { font-weight: 900; font-stretch: 125%; font-variant-numeric: tabular-nums; text-align: right; }
.row--bg { background: rgba(247, 245, 254, 0.07); }
.row--me { background: linear-gradient(180deg, #e9f78f, #dcf169 60%); color: var(--indigo); box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.5), 0 5px 0 #8fa32c; }
.row--me .rk { color: var(--indigo); }

/* ---------- How to ride ---------- */
.how { left: 50%; top: 50%; width: 1600px; height: 860px; margin: -430px 0 0 -800px; padding: 64px 72px; }
.how-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; margin-top: 48px; }
.how-card { position: relative; height: 480px; padding: 40px 36px; border-radius: 28px; }
.how-card .num { position: absolute; left: 36px; top: 34px; width: 64px; height: 64px; border-radius: 50%; background: var(--pink); color: var(--indigo); display: grid; place-items: center; font-weight: 900; font-stretch: 125%; font-size: 32px; }
.how-card .ico { height: 170px; display: grid; place-items: center; margin-top: 30px; }
.how-card h3 { font-weight: 800; font-stretch: 118%; text-transform: uppercase; font-size: 44px; margin-top: 18px; }
.how-card p { font-size: 28px; color: rgba(247, 245, 254, 0.74); margin-top: 10px; line-height: 1.3; }
.how-bar { position: absolute; left: 72px; right: 72px; bottom: 52px; height: 14px; border-radius: 99px; background: rgba(247, 245, 254, 0.14); overflow: hidden; }
.how-bar i { position: absolute; inset: 0; background: linear-gradient(90deg, var(--pink), var(--lime)); transform-origin: left; animation: bar 6s linear infinite; }

/* ---------- Results ---------- */
.res-left { left: 120px; top: 120px; width: 900px; }
.res-score { font-size: 260px; color: var(--lime); margin-top: 8px; }
.res-rank { left: 120px; top: 540px; width: 860px; height: 420px; }
.res-rank-sticker { left: 40px; top: 30px; width: 330px; --r: -8deg; }
.res-rank-txt { position: absolute; left: 400px; top: 70px; right: 40px; }
.res-rank-txt .name { font-size: 64px; margin-top: 12px; }
.res-stats { display: flex; gap: 14px; margin-top: 28px; }
.res-stats .pill { white-space: nowrap; height: 64px; padding: 0 22px; font-size: 26px; font-weight: 700; font-stretch: 110%; }
.res-entry { right: 120px; top: 260px; width: 700px; padding: 48px; }
.input { height: 112px; border-radius: 24px; background: linear-gradient(180deg, #e9e6f8, #fff 30%); color: var(--indigo); display: flex; align-items: center; padding: 0 32px; font-size: 48px; font-weight: 800; font-stretch: 110%; margin-top: 18px; box-shadow: inset 0 0 0 4px var(--pink); }
.input .caret { width: 5px; height: 60px; background: var(--pink); margin-left: 4px; animation: blink 1s steps(1) infinite; }
.res-entry .hint { font-size: 24px; margin-top: 16px; }
.res-entry .pill { width: 100%; margin-top: 36px; height: 104px; font-size: 30px; white-space: nowrap; font-weight: 800; font-stretch: 118%; text-transform: uppercase; }
.res-place { right: 140px; top: 170px; height: 72px; font-size: 30px; font-weight: 800; font-stretch: 118%; transform: rotate(4deg); }

/* ---------- Leaderboard ---------- */
.lb { left: 50%; top: 200px; width: 1240px; margin-left: -620px; padding: 36px 40px; }
.lb .row { height: 70px; font-size: 34px; grid-template-columns: 80px 1fr 380px 170px; }
.lb .title { white-space: nowrap; font-size: 20px; font-weight: 700; font-stretch: 110%; letter-spacing: 0.06em; text-transform: uppercase; color: var(--pink-soft); }
.row--me .title { color: var(--indigo); }
.lb-head { left: 0; right: 0; top: 64px; text-align: center; font-size: 96px; white-space: nowrap; }

/* ---------- Motion (mirrors the website sticker slap) ---------- */
@keyframes slap {
  0% { transform: rotate(18deg) scale(1.6); opacity: 0; }
  40% { transform: rotate(-5deg) scale(0.96); opacity: 1; }
  60% { transform: rotate(var(--r, -3deg)) scale(1); }
  100% { transform: rotate(var(--r, -3deg)) scale(1); opacity: 1; }
}
@keyframes popin { 0% { transform: scale(0.6); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
@keyframes floatup { 0% { translate: 0 0; opacity: 0; scale: 0.6; } 15% { opacity: 1; scale: 1.08; } 30% { scale: 1; } 100% { translate: 0 -120px; opacity: 0; } }
@keyframes pulse { 0%, 100% { scale: 1; } 50% { scale: 1.06; } }
@keyframes bump { 0% { scale: 1; } 35% { scale: 1.14; } 100% { scale: 1; } }
@keyframes blink { 50% { opacity: 0; } }
@keyframes bar { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes wobble { 0%, 100% { rotate: 0deg; } 50% { rotate: 3deg; } }
@keyframes flash { 0% { opacity: 0; } 15% { opacity: 1; } 100% { opacity: 0; } }

.is-on .a-slap { animation: slap 700ms var(--ease-spring) both; }
.is-on .a-pop { animation: popin 520ms var(--ease-spring) both; }
.is-on .a-float { animation: floatup 1400ms var(--ease-out) infinite; }
.is-on .a-pulse { animation: pulse 1000ms ease-in-out infinite; }
.is-on .a-wobble { animation: wobble 3.2s ease-in-out infinite; }
.is-on .a-flash { animation: flash 1400ms var(--ease-out) infinite; }
.d1 { animation-delay: 120ms !important; } .d2 { animation-delay: 240ms !important; } .d3 { animation-delay: 360ms !important; } .d4 { animation-delay: 480ms !important; }

/* ---------- Prototype nav (hidden on ?clean) ---------- */
.nav { position: fixed; left: 50%; bottom: 14px; transform: translateX(-50%); display: flex; max-width: calc(100vw - 16px); overflow-x: auto; gap: 6px; z-index: 50; background: rgba(5, 6, 26, 0.8); padding: 6px; border-radius: 99px; font: 600 13px/1 system-ui; }
.nav button { all: unset; cursor: pointer; white-space: nowrap; padding: 8px 12px; border-radius: 99px; color: #c9c7e6; }
.nav button[aria-current='true'] { background: var(--pink); color: var(--indigo); }
.clean .nav { display: none; }
@media (max-width: 1100px) {
  .nav { bottom: 6px; padding: 3px; gap: 2px; font-size: 10px; background: rgba(5, 6, 26, 0.6); }
  .nav button { padding: 5px 8px; }
}