/* Combien ça coûte ?'s identity, from the game itself (../guesstheprice/web/styles.css):
   banknote paper, ink type in Manrope, the log scale banded in the euro notes' tints
   (5 € grey → 500 € purple, one note per decade), ink for a guess, price-tag orange for
   the real amount. Sober on purpose: it's about public money. */

@font-face {
  font-family: 'Manrope';
  src: url('/fonts/Manrope.woff2') format('woff2');
  font-weight: 400 800;
  font-display: swap;
}

.cc {
  --ground: #f2f3ee;
  --surface: #fff;
  --ink: #1d2230;
  --ink-2: #4b5264;
  --ink-3: #7b8292;
  --line: #d8dbd2;
  --edge: #c3c7bc;
  --truth: #e8590c;
  --display: 'Manrope', 'Avenir Next', 'Segoe UI', system-ui, sans-serif;
  font-family: var(--display);
  color: var(--ink);
  background: var(--ground);
}

.cc .home { color: var(--ink-2); text-decoration: none; font-weight: 600; }
.cc .home:hover { color: var(--ink); }

.cc .hero { padding: 28px 0 36px; max-width: 40em; }
.cc .eyebrow { margin: 0 0 10px; font: 700 0.9rem var(--display); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-2); }
.cc h1 { font: 800 clamp(2.8rem, 11vw, 5rem)/1 var(--display); letter-spacing: -0.03em; margin: 0 0 18px; }
.cc .tagline { font-size: clamp(1.05rem, 3.6vw, 1.3rem); color: var(--ink-2); margin: 0 0 26px; }
.cc .tagline strong { color: var(--ink); }
.cc .button {
  border-radius: 14px;
  font-family: var(--display); font-weight: 700;
  background: var(--ink); box-shadow: 0 5px 0 #05070c;
}
.cc .button:hover { box-shadow: 0 7px 0 #05070c; }
.cc .button:active { box-shadow: 0 2px 0 #05070c; }
.cc .note { margin: 14px 0 0; color: var(--ink-3); font-size: 0.95rem; }

/* The ad on a phone, beside a round the page plays by itself. */
.show { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 40px; align-items: center; }
.phone {
  position: relative;
  justify-self: center;
  width: min(100%, 280px);
  padding: 10px;
  border-radius: 40px;
  background: var(--ink);
  box-shadow: 0 8px 0 #05070c, 0 26px 50px rgba(29, 34, 48, 0.25);
}
.phone video { display: block; width: 100%; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 30px; background: var(--ground); }
.sound {
  position: absolute; right: 20px; bottom: 20px;
  width: 44px; height: 44px;
  border: none; border-radius: 50%;
  font-size: 1.2rem; cursor: pointer;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 4px 0 var(--edge);
}
@media (max-width: 680px) {
  .show { grid-template-columns: 1fr; gap: 28px; }
}

/* A round of the game, played by itself: the question, a guess, then the real price. */
.demo {
  padding: 24px clamp(18px, 4vw, 32px) 28px;
  border-radius: 20px;
  background: var(--surface);
  box-shadow: 0 5px 0 var(--edge);
}
.demo .q { min-height: 3.2em; margin: 0 0 22px; font: 700 clamp(1.1rem, 3.6vw, 1.35rem)/1.35 var(--display); transition: opacity 0.3s; }
.demo .q.out { opacity: 0; }

/* Room above for two rows of labels: the real price over the guess, so they never collide. */
.track { position: relative; height: 34px; margin: 72px 0 10px; }
.bands { display: flex; height: 100%; border-radius: 10px; overflow: hidden; }
.bands i { flex: 1; }
.bands i:nth-child(1) { background: #cfd1cc; }
.bands i:nth-child(2) { background: #f1b3ab; }
.bands i:nth-child(3) { background: #abc6ee; }
.bands i:nth-child(4) { background: #f6c58f; }
.bands i:nth-child(5) { background: #b1dbbb; }
.bands i:nth-child(6) { background: #eedb86; }
.bands i:nth-child(7) { background: #cfbde6; }

/* --at is a position on the scale, 0 to 1. */
.mark { position: absolute; top: -8px; bottom: -8px; left: calc(var(--at, 0.5) * 100%); width: 0; }
.mark::before { content: ''; position: absolute; top: 0; bottom: 0; left: -2.5px; width: 5px; border-radius: 3px; background: var(--c); }
.mark span {
  position: absolute; bottom: calc(100% + 6px); left: 0; transform: translateX(-50%);
  white-space: nowrap; font: 800 1rem var(--display); color: var(--c);
}
.mark.guess { --c: var(--ink); transition: left 1.1s cubic-bezier(0.3, 0.7, 0.2, 1); }
.mark.guess::after {
  content: ''; position: absolute; top: 50%; left: -10px; width: 20px; height: 20px; margin-top: -10px;
  border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 3px #fff;
}
.mark.truth { --c: var(--truth); opacity: 0; transition: opacity 0.4s; }
.mark.truth span { bottom: calc(100% + 30px); }
.mark.truth.on { opacity: 1; animation: land 0.5s cubic-bezier(0.2, 0.9, 0.3, 1.4); }
@keyframes land { from { transform: scaleY(1.8); } }
/* Near the ends, labels lean inwards instead of spilling out of the card. */
.mark.left span { transform: translateX(-12px); }
.mark.right span { transform: translateX(calc(-100% + 12px)); }

/* Ticks sit where their decade really is: 1 M€ is 3/7 along, not halfway. */
.ticks { position: relative; height: 1.4em; font: 700 0.85rem var(--display); color: var(--ink-2); }
.ticks span { position: absolute; left: calc(var(--at) * 100%); transform: translateX(-50%); white-space: nowrap; }
.ticks span:first-child { transform: none; }
.ticks span:last-child { transform: translateX(-100%); }
.verdict { min-height: 1.5em; margin: 16px 0 0; color: var(--ink-2); }
.verdict a { color: inherit; }

.facts { list-style: none; margin: 32px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; }
.fact { padding: 18px 20px; border-radius: 20px; background: var(--surface); box-shadow: 0 5px 0 var(--edge); }
.fact h2 { font: 700 1.15rem var(--display); margin: 0 0 6px; }
.fact p { margin: 0; color: var(--ink-2); }
.fact .swatch { display: block; width: 36px; height: 8px; margin-bottom: 12px; border-radius: 4px; background: var(--c); }

.cc .footer, .cc .footer a { color: var(--ink-3); }
.cc .footer a:hover { color: var(--ink); }