/* Public site of citiestcg.app — direction A « Fidèle à l'app » (poc/site, ?dir=a).
   The values come from the tokens of libs/ui/src/styles/tokens.scss, copied here: the site is not compiled with the
   SCSS of the app. The only exceptions, as in the POC: --topo-halo and --topo-lines, which
   apps/mobile/src/styles.scss computes in SCSS. */
:root {
  --color-ink: #1b1340;
  --color-pink: #ff4f8b;
  --color-yellow: #ffd23f;
  --color-green: #3ddc84;
  --color-blue: #3fa7ff;
  --color-purple: #7b4dff;
  --color-white: #ffffff;
  --color-muted: #6a5e9a;
  --color-nav-text: #b7aef0;
  --color-common: #a7b0bd;
  --color-common-light: #eef0f4;
  --color-energy-off: #d8d3ea;
  --color-blue-light: #dff0ff;
  --color-pink-light: #ffe1ec;
  --color-yellow-light: #fff3c4;

  --border-width: 3px;
  --border: var(--border-width) solid var(--color-ink);
  --shadow-hard: 0 5px 0 var(--color-ink);
  --color-cta: #ff2e93;
  --color-cta-dark: #d81b78;
  --gradient-cta: linear-gradient(#ff75b5, var(--color-cta) 55%, var(--color-cta-dark));

  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 18px;
  --radius-xl: 22px;
  --radius-pill: 99px;

  --font-display: 'Lilita One', system-ui, sans-serif;
  --font-body: 'Nunito', system-ui, sans-serif;

  --topo-halo: color-mix(in srgb, var(--color-purple) 35%, var(--color-ink));
  --topo-lines: color-mix(in srgb, var(--color-purple) 25%, transparent);
}

/* Embedded fonts (@fontsource), served by the site: the CSP only allows font-src 'self'. */
@font-face {
  font-family: 'Lilita One';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/lilita-one-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/nunito-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('/fonts/nunito-latin-800-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('/fonts/nunito-latin-900-normal.woff2') format('woff2');
}

/* Rarity colour, by code. */
.r-C {
  --rarity: var(--color-common);
}
.r-U {
  --rarity: var(--color-green);
}
.r-R {
  --rarity: var(--color-blue);
}
.r-E {
  --rarity: var(--color-purple);
}
.r-L {
  --rarity: var(--color-yellow);
}
.r-S {
  --rarity: var(--color-pink);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  background: radial-gradient(circle at 50% 18%, var(--topo-halo), var(--color-ink) 60%) fixed var(--color-ink);
  color: var(--color-white);
  font-family: var(--font-body);
  font-weight: 800;
  -webkit-tap-highlight-color: transparent;
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  background: var(--topo-lines);
  mask: url('/img/topo-lines.svg') center / cover;
  pointer-events: none;
}

button,
input {
  font: inherit;
  color: inherit;
}
button {
  cursor: pointer;
}
a {
  color: inherit;
}

.screen {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 22px 16px 36px;
}

.ico {
  width: 20px;
  height: 20px;
  display: block;
  flex: none;
}

/* --- Text over the topo ------------------------------------------------------------------------------------ */
.tag {
  align-self: flex-start;
  margin: 0;
  padding: 6px 16px;
  background: var(--color-pink);
  border: var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-hard);
  rotate: -3deg;
  font-family: var(--font-display);
  font-size: 22px;
  color: var(--color-white);
  text-shadow:
    0.5px 0 0 var(--color-ink),
    -0.5px 0 0 var(--color-ink),
    0 0.5px 0 var(--color-ink),
    0 -0.5px 0 var(--color-ink);
}

/* sticker-text(0.75px, 3px) mixin of libs/ui/src/styles/_sticker-text.scss */
.sticker {
  margin: 6px 0 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 40px;
  line-height: 1.02;
  color: var(--color-white);
  text-shadow:
    0.75px 0 0 var(--color-ink),
    -0.75px 0 0 var(--color-ink),
    0 0.75px 0 var(--color-ink),
    0 -0.75px 0 var(--color-ink),
    0.53px 0.53px 0 var(--color-ink),
    -0.53px 0.53px 0 var(--color-ink),
    0.53px -0.53px 0 var(--color-ink),
    -0.53px -0.53px 0 var(--color-ink),
    0 3.75px 0 var(--color-ink),
    0.75px 3px 0 var(--color-ink),
    -0.75px 3px 0 var(--color-ink),
    0.53px 3.53px 0 var(--color-ink),
    -0.53px 3.53px 0 var(--color-ink);
}
.sticker--sm {
  margin-top: 10px;
  font-size: 22px;
}

.lead {
  margin: 0;
  font-size: 14px;
  line-height: 1.45;
  color: var(--color-nav-text);
}
.lead--tight {
  margin-top: 2px;
}
.lead b {
  color: var(--color-white);
}

/* --- Sticker panels ---------------------------------------------------------------------------------------- */
.panel {
  padding: 14px;
  background: var(--color-white);
  border: var(--border);
  border-radius: var(--radius-xl);
  box-shadow: 0 6px 0 var(--color-ink);
  color: var(--color-ink);
}

.pitch {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
}

.steps {
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
  display: grid;
  gap: 10px;
}
.steps li {
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: 2px 10px;
  align-items: baseline;
}
.steps li::before {
  counter-increment: step;
  content: counter(step);
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 2px solid var(--color-ink);
  border-radius: var(--radius-pill);
  background: var(--color-yellow);
  box-shadow: 0 3px 0 var(--color-ink);
  font-family: var(--font-display);
  font-size: 16px;
}
.steps b {
  grid-column: 2;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 17px;
}
.steps span {
  grid-column: 2;
  font-size: 13px;
  line-height: 1.4;
  color: var(--color-muted);
}

.bullets {
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
}
.bullets li {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  font-size: 13.5px;
  line-height: 1.4;
}
.bullets .ico {
  width: 22px;
  height: 22px;
  padding: 2px;
  border: 2px solid var(--color-ink);
  border-radius: var(--radius-pill);
  background: var(--color-green);
  color: var(--color-ink);
}

/* --- Search field (styles/_field.scss) --------------------------------------------------------------------- */
.field {
  display: block;
}
.field__label {
  display: block;
  margin-bottom: 6px;
  font-size: 12px;
  font-weight: 900;
  color: var(--color-muted);
}
.field__box {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  height: 52px;
  background: var(--color-white);
  border: var(--border);
  border-radius: var(--radius-md);
  box-shadow: 0 4px 0 var(--color-ink);
  color: var(--color-muted);
}
.field__box:focus-within {
  box-shadow:
    0 4px 0 var(--color-ink),
    0 0 0 4px var(--color-yellow);
}
.field__box input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: none;
  font-size: 17px;
  font-weight: 900;
  color: var(--color-ink);
}
.field__box input::placeholder {
  color: var(--color-energy-off);
}

.suggest {
  display: none;
  margin-top: 10px;
  border: 2px solid var(--color-ink);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.suggest.is-on {
  display: block;
}
.sg {
  display: block;
  width: 100%;
  text-align: left;
  padding: 9px 12px;
  border: 0;
  border-bottom: 2px solid var(--color-common-light);
  background: var(--color-white);
  color: var(--color-ink);
}
.sg:last-child {
  border-bottom: 0;
}
.sg b {
  display: block;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 17px;
}
.sg span {
  font-size: 12px;
  color: var(--color-muted);
}

.tries {
  margin: 12px 0 0;
  font-size: 12px;
  color: var(--color-muted);
}
.try {
  margin: 4px 4px 0 0;
  padding: 5px 11px;
  border: 2px solid var(--color-ink);
  border-radius: var(--radius-pill);
  background: var(--color-blue-light);
  box-shadow: 0 3px 0 var(--color-ink);
  font-size: 12px;
  font-weight: 900;
  color: var(--color-ink);
}
.try:active {
  translate: 0 3px;
  box-shadow: none;
}

/* --- Cards ------------------------------------------------------------------------------------------------- */
/* Holds the real card, rendered as static HTML by `nx run admin:card-html` and styled by /card.css. The frame, the
   rounded corners and the foil belong to the card itself; only its width is set here. */
.card {
  display: block;
  width: 100%;
}
.card app-card {
  display: block;
}
.card--hero {
  rotate: -2deg;
}

.hero {
  padding: 0 24px;
}

.deck {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  align-items: start;
}
.deck .card:nth-child(1) {
  rotate: -5deg;
}
.deck .card:nth-child(3) {
  rotate: 3deg;
}
.deck__note {
  margin: 0;
  font-size: 12px;
  color: var(--color-nav-text);
}

/* --- Search result ----------------------------------------------------------------------------------------- */
.found:empty {
  display: none;
}
.found {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.hit {
  display: grid;
  grid-template-columns: 148px 1fr;
  gap: 14px;
  align-items: start;
  text-decoration: none;
}
.hit__card {
  position: relative;
  display: block;
}
/* Teased card: desaturated, screened, with a padlock sticker. */
.hit__card .card {
  filter: saturate(0.25) brightness(0.86);
  rotate: -3deg;
}
.hit__card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 5% / 3.6%;
  background: repeating-linear-gradient(-45deg, #1b134026 0 6px, transparent 6px 14px);
  rotate: -3deg;
}
.lock {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: 8%;
  translate: -50% 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 94%;
  white-space: nowrap;
  padding: 6px 10px;
  background: var(--color-white);
  border: 2px solid var(--color-ink);
  border-radius: var(--radius-pill);
  box-shadow: 0 4px 0 var(--color-ink);
  color: var(--color-ink);
  font-size: 10.5px;
  font-weight: 900;
  line-height: 1.1;
  rotate: -2deg;
}
.lock .ico {
  width: 13px;
  height: 13px;
}
.hit__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.hit__place {
  width: 100%;
  font-size: 13px;
  color: var(--color-nav-text);
}
.hit__hook {
  width: 100%;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 18px;
  color: var(--color-yellow);
}
.panel--miss p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.5;
}

/* --- Chips ------------------------------------------------------------------------------------------------ */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 11px;
  border: 2px solid var(--color-ink);
  border-radius: var(--radius-pill);
  box-shadow: 0 3px 0 var(--color-ink);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 14px;
  color: var(--color-white);
  text-shadow:
    0.6px 0 0 var(--color-ink),
    -0.6px 0 0 var(--color-ink),
    0 0.6px 0 var(--color-ink),
    0 -0.6px 0 var(--color-ink);
}
.chip--rarity {
  background: var(--rarity);
}
.chip--number {
  background: var(--color-purple);
  font-variant-numeric: tabular-nums;
}
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 10px 0 0;
}

.counts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.count {
  padding: 10px;
  background: var(--color-white);
  border: var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-hard);
  color: var(--color-ink);
  font-size: 12px;
  line-height: 1.25;
  text-align: center;
}
.count b {
  display: block;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 26px;
  color: var(--color-purple);
}

/* --- Buttons ---------------------------------------------------------------------------------------------- */
.cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 4px;
  padding: 15px 18px;
  background: var(--gradient-cta);
  border: var(--border);
  border-radius: var(--radius-xl);
  box-shadow:
    0 7px 0 var(--color-ink),
    inset 0 4px 0 #fff8,
    inset 0 -6px 0 #0002;
  color: var(--color-white);
  font-family: var(--font-display);
  font-size: 21px;
  text-decoration: none;
  text-shadow:
    0.75px 0 0 var(--color-ink),
    -0.75px 0 0 var(--color-ink),
    0 0.75px 0 var(--color-ink),
    0 -0.75px 0 var(--color-ink);
  animation: pulse 1.8s ease-in-out infinite;
}
.cta .ico {
  width: 24px;
  height: 24px;
}
.cta:active {
  translate: 0 6px;
  box-shadow: 0 1px 0 var(--color-ink);
  animation: none;
}
@keyframes pulse {
  0%,
  100% {
    scale: 1;
  }
  50% {
    scale: 1.02;
  }
}

.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 16px;
  background: var(--color-white);
  border: var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-hard);
  color: var(--color-ink);
  font-size: 16px;
  font-weight: 900;
  text-decoration: none;
}
.btn:active {
  translate: 0 4px;
  box-shadow: 0 1px 0 var(--color-ink);
}

/* --- Footer ----------------------------------------------------------------------------------------------- */
.foot {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-top: 6px;
  font-size: 12px;
  color: var(--color-nav-text);
}
.foot a {
  color: var(--color-nav-text);
}
.foot small {
  width: 100%;
  opacity: 0.7;
}

/* A shared link almost always opens on a phone: anywhere wider than a phone, the page stays a mobile column. From
   440px, not 860px: in between, the hero card would be stretched past the 500px of its image, hence blurred. */
@media (min-width: 440px) {
  .screen {
    max-width: 390px;
    margin: 0 auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* --- Invitation page (/i/<code>) -------------------------------------------------------------------------- */
/* The code is read aloud and typed by hand on the phone: wide letters, generously spaced (referral-page.scss). */
.invite-code {
  margin: 0 0 12px;
  padding: 10px 12px;
  font-family: var(--font-display);
  font-size: 34px;
  letter-spacing: 6px;
  text-align: center;
  color: var(--color-purple);
  background: var(--color-yellow-light);
  border: var(--border);
  border-radius: var(--radius-md);
  box-shadow: 0 4px 0 var(--color-ink);
}