/* La feuille de la vitrine du guide /fr/recompenses/.

   Les écrans du jeu y sont dessinés par leur propre code (client/loyalty-view.ts, client/pack-wait.ts,
   client/pot.ts) : il leur faut leur style. app.css ne peut pas être liée sur une page SEO — elle emporte tout
   l'habillage du jeu — et seo.css est commune aux guides. Les règles ci-dessous sont donc recopiées telles quelles
   depuis public/app/app.css, seule source du rendu : la Carte de Fidélité d'abord, puis le bloc d'attente du pack
   gratuit, dont l'hôte du guide porte directement la classe `.pack-wait` au lieu de la tuile de l'écran Packs.
   /app/pot.css, elle, est liée directement par la page. Modifier ici seulement pour suivre app.css. */

/* ===== Rewards: the Carte de Fidélité, a battle-pass track ===== */
/* Built for 375x667 first: one horizontal lane the thumb drags, big reward tiles, thin levels in between. */
:root, :root[data-theme="dark"] {
  --ly-bg: radial-gradient(130% 120% at 0% 0%, #2b2208 0%, #17150e 48%, #13151c 100%);
  --ly-edge: rgba(255, 216, 74, .32); --ly-rail: rgba(255, 255, 255, .13); --ly-num: #8a93a3;
  --ly-tile-line: rgba(255, 255, 255, .12); --ly-cell: rgba(255, 255, 255, .07); --ly-ring: #13151c; --ly-lost-bg: rgba(229, 72, 77, .12); --ly-lost-line: rgba(229, 72, 77, .38);
}
.ly {
  position: relative; display: grid; gap: 12px; padding: 14px 14px 12px; border-radius: 22px; background: var(--ly-bg); border: 1px solid var(--ly-edge);
  box-shadow: 0 14px 34px rgba(0, 0, 0, .18); overflow: hidden; }
.ly-top, .ly-hero, .ly-pass, .ly-info, .ly-bonus { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }

/* the compact header: the card's name, the (i) that opens the rules, the bonus packs waiting */
.ly-top { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ly-kicker { font-size: 12px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); }
.ly-info { width: 24px; height: 24px; padding: 0; border: 0; font-size: 15px; cursor: pointer; flex: none; }
.ly-bonus { flex: 1 1 100%; display: inline-flex; justify-content: center; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line);
  color: var(--text); text-decoration: none; font-size: 13px; font-weight: 800; }
.ly-bonus b { color: var(--gold); }
.ly-pk { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
/* The header, read like a battle pass level: the streak in a badge, one line, a bar to the next reward. */
.ly-hero { display: flex; align-items: center; gap: 12px; }
.ly-badge { position: relative; flex: none; display: grid; place-items: center; width: 60px; height: 60px; border-radius: 18px;
  background: linear-gradient(160deg, #ffb347 0%, #ff6a1a 55%, #d9360f 100%); box-shadow: 0 6px 16px rgba(217, 54, 15, .35), inset 0 1px 0 rgba(255, 255, 255, .35); }
.ly-n { font-family: "Anton", Impact, sans-serif; font-weight: 400; font-size: 32px; line-height: 1; color: #fff; font-variant-numeric: tabular-nums; text-shadow: 0 2px 0 rgba(120, 30, 0, .45); }
.ly-flame { position: absolute; top: -10px; right: -8px; font-size: 22px; transform-origin: 50% 90%; animation: guide-ly-flame 2.4s ease-in-out infinite; }
@keyframes guide-ly-flame { 0%, 100% { transform: rotate(-4deg) scale(1); } 50% { transform: rotate(4deg) scale(1.08); } }
.ly-head { display: grid; gap: 7px; min-width: 0; flex: 1; }
.ly-head-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ly-headline { font-size: 19px; font-weight: 900; line-height: 1.15; color: var(--heading); }
.ly-chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 900; white-space: nowrap; }
.ly-chip.ok { background: rgba(29, 179, 107, .14); color: #11875a; }
:root[data-theme="dark"] .ly-chip.ok { color: #4ade80; }
.ly-chip.warn { background: rgba(255, 106, 26, .14); color: #c2410c; }
.ly-chip.next { background: rgba(255, 106, 26, .10); color: #9a3412; }
:root[data-theme="dark"] .ly-chip.next { color: #fdba74; }
.ly-chip b { font-variant-numeric: tabular-nums; }
.ly-chip svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
.ly-goal small { font-size: 13px; font-weight: 800; color: var(--muted); }
/* The (i) of the card: neutral ink, not the brown gold of the other info dots. */
.ly .ly-info { background: rgba(0, 0, 0, .08); color: var(--text); font-size: 13px; }
:root[data-theme="dark"] .ly .ly-info { background: rgba(255, 255, 255, .12); }

/* The battle pass track, and the rule the whole layout serves: it fits the card's width whole, from 320px to 1440px,
   so the day-30 jackpot at its right end is seen without a swipe and without guessing there is one. The five tiles
   share the width in equal columns — equal, not proportional to the days, or 1-3-5 would pile up on the left — and
   the line under them carries the 30 days, each segment holding its own intermediate days. Nothing here scrolls. */
.ly-pass { display: grid; gap: 6px; }
.ly-aim { margin: 0; font-size: 12.5px; font-weight: 800; line-height: 1.35; color: var(--muted); }
.ly-aim b { font-size: 14.5px; color: var(--gold); }

/* the reward tiles: the pack, how many of them, the state of the tier. One column each, the last one the biggest. */
.ly-tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; align-items: end; }
.ly-tile { justify-self: center; width: calc(100% - 6px); max-width: 64px; }
.ly-art { position: relative; display: grid; place-items: center; aspect-ratio: 1 / 1.1; border-radius: 12px; overflow: hidden;
  border: 1px solid var(--ly-tile-line); background: linear-gradient(160deg, #3a4150, #232833); box-shadow: 0 5px 14px rgba(0, 0, 0, .28); }
.ly-tile.r-rare .ly-art { background: linear-gradient(160deg, #1f5a86, #142a41); }
.ly-tile.r-epic .ly-art { background: linear-gradient(160deg, #5f2c90, #2a1445); }
.ly-tile.r-mythic .ly-art { background: linear-gradient(160deg, #b23a2c, #3c1511); }
/* the last tier, the legendary one: the widest tile of the row, gold, swept by a slow light — the objective */
.ly-tile.r-legend { width: 100%; max-width: 82px; }
.ly-tile.r-legend .ly-art { aspect-ratio: 1 / 1.3; border: 2px solid #ffe79a; background: linear-gradient(160deg, #fff0ad, #f5b120 42%, #a86608);
  box-shadow: 0 8px 22px rgba(240, 176, 30, .42); }
.ly-tile.r-legend .ly-art::after { content: ""; position: absolute; inset: -40%; pointer-events: none;
  background: linear-gradient(70deg, transparent 42%, rgba(255, 255, 255, .55) 50%, transparent 58%); animation: guide-ly-sweep 3.4s linear infinite; }
@keyframes guide-ly-sweep { 0% { transform: translateX(-60%); } 100% { transform: translateX(60%); } }
.ly-pack { width: 54%; aspect-ratio: 63 / 88; background: url(/pack-front.webp?v=7cc6581117) center / 100% 100% no-repeat; filter: drop-shadow(0 4px 9px rgba(0, 0, 0, .5)); margin-bottom: 10%; }
.ly-x { position: absolute; top: 3px; right: 5px; font-family: "Anton", Impact, sans-serif; font-weight: 400; font-size: clamp(13px, 4.2vw, 18px); line-height: 1;
  color: #fff; text-shadow: 0 2px 5px rgba(0, 0, 0, .75); }
.ly-tile.r-legend .ly-x { color: #3a2400; text-shadow: 0 1px 0 rgba(255, 255, 255, .6); }
.ly-ribbon { position: absolute; left: 0; right: 0; bottom: 0; padding: 3px 1px; display: flex; align-items: center; justify-content: center; gap: 2px;
  text-align: center; font-size: clamp(8px, 2.5vw, 10px); font-weight: 900;
  letter-spacing: .04em; text-transform: uppercase; color: #fff; background: rgba(19, 168, 106, .94); }
.ly-ribbon svg { width: 10px; height: 10px; flex: none; fill: none; stroke: currentColor; stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; }
/* The tiers owed call for the one button above, they are not buttons themselves. */
.ly-tile.ready .ly-ribbon { background: rgba(61, 220, 140, .96); color: #06301d; }
.ly-tile.locked .ly-art { filter: grayscale(.72) brightness(.62); box-shadow: none; }
/* The jackpot never dims: locked or not, it is the objective the player is walking towards, so it keeps its gold. */
.ly-tile.r-legend.locked .ly-art { filter: none; box-shadow: 0 8px 22px rgba(240, 176, 30, .42); }
.ly-tile.claimed .ly-art { opacity: .6; }
.ly-tile.gone .ly-art, .ly-tile.held .ly-art { filter: grayscale(1); opacity: .45; }
.ly-tile.gone .ly-ribbon { background: rgba(229, 72, 77, .92); }
.ly-tile.held .ly-ribbon { background: rgba(120, 120, 120, .92); }
.ly-tile.ready .ly-art { box-shadow: 0 0 0 2px #3ddc8c, 0 8px 22px rgba(29, 179, 107, .45); animation: guide-ly-glow 1.9s ease-in-out infinite; }
@keyframes guide-ly-glow { 50% { box-shadow: 0 0 0 3px #3ddc8c, 0 10px 28px rgba(29, 179, 107, .7); } }
.ly-lock { position: absolute; left: 5px; top: 5px; width: 14px; height: 14px; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; opacity: .72; }

/* the line of the 30 days: it runs from the centre of the first tile to the centre of the last, half a column in on
   each side — hence 50% / the number of tiers, which the view hands over as --ly-cols. */
.ly-rail-in { position: relative; height: 22px; margin-inline: calc(50% / var(--ly-cols, 5)); }
.ly-line { position: absolute; left: 0; right: 0; top: 50%; height: 6px; transform: translateY(-50%); border-radius: 999px; background: var(--ly-rail); overflow: hidden; }
.ly-line i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #ffd44a, #ffb01f); }
.ly-days { list-style: none; margin: 0; padding: 0; position: absolute; inset: 0; }
/* one graduation a day: small between the tiers, a node on a tier day, red on a day missed */
.ly-day { position: absolute; top: 50%; width: 4px; height: 4px; margin: -2px 0 0 -2px; border-radius: 50%; background: var(--ly-num); opacity: .5; }
.ly-day.on { background: #8a5400; opacity: .9; }
.ly-day.stop { width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; opacity: 1; border: 2px solid var(--ly-ring); background: var(--ly-num); }
.ly-day.stop.on { background: #b8720a; }
.ly-day.missed { width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; opacity: 1; background: #e5484d; }
.ly-cursor { position: absolute; top: 50%; z-index: 2; transform: translate(-50%, -50%); display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  background: var(--ly-ring); border: 2px solid var(--gold); box-shadow: 0 2px 9px rgba(255, 176, 31, .55); }
.ly-cursor b { font-size: 11.5px; font-weight: 900; line-height: 1; color: #8a5400; font-variant-numeric: tabular-nums; }
.ly-cursor.ly-in { animation: guide-ly-pop .6s cubic-bezier(.2, 1.4, .4, 1) both; }
@keyframes guide-ly-pop { 0% { transform: translate(-50%, -50%) scale(2.2); opacity: 0; } 60% { transform: translate(-50%, -50%) scale(.9); opacity: 1; } 100% { transform: translate(-50%, -50%) scale(1); } }

/* the day of each tier, under its tile, on the same columns */
.ly-marks { list-style: none; margin: 0; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; }
.ly-marks li { text-align: center; font-size: 10.5px; font-weight: 900; color: var(--ly-num); white-space: nowrap; font-variant-numeric: tabular-nums; }
.ly-marks li:last-child { color: var(--gold); }

/* what is owed, at the top of the card: the one block the eye must land on, and the only place the claim buttons
   live. It holds its own height on a 678px tall phone, so the button is never the thing below the fold. */
.ly-cash { display: grid; gap: 8px; padding: 12px; border-radius: 16px; border: 2px solid #3ddc8c;
  background: linear-gradient(160deg, rgba(61, 220, 140, .18), rgba(19, 168, 106, .10)); box-shadow: 0 8px 22px rgba(19, 168, 106, .22); }
.ly-cash-line { margin: 0; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 2px 10px; }
.ly-cash-ico { grid-row: span 2; font-size: 26px; line-height: 1; }
.ly-cash-line b { font-size: 18px; font-weight: 900; line-height: 1.15; color: var(--heading); }
.ly-cash-line small { font-size: 13px; font-weight: 800; color: var(--muted); }
.ly-cash .ly-claim-all { position: relative; overflow: hidden; animation: guide-ly-cash-call 2.2s ease-in-out infinite; }
/* The shine of the pack button: the same sweep as the Packs page's main action, so the eye lands on the claim
   before the streak card below it (Théo, 05/10/2026). */
.ly-cash .ly-claim-all::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.45) 50%, transparent 70%); transform: translateX(-120%); animation: rf-sweep 3.6s ease-in-out 1s infinite; pointer-events: none; }
@keyframes guide-ly-cash-call { 0%, 100% { box-shadow: 0 0 0 0 rgba(61, 220, 140, .55); } 55% { box-shadow: 0 0 0 7px rgba(61, 220, 140, 0); } }

.ly-lock { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ly-tile.just-claimed .ly-art { animation: guide-ly-claimed .6s ease-out both; }
@keyframes guide-ly-claimed { 0% { transform: scale(1); } 35% { transform: scale(1.06); } 100% { transform: scale(1); opacity: .75; } }
.ly-claim-all { margin: 0; width: 100%; min-height: 56px; font-size: 17px; }
.ly-older { margin: 0; font-size: 13px; font-weight: 700; color: var(--muted); display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ly-t-mini { border-radius: 999px; padding: 4px 10px; font-size: 12px; font-weight: 900; color: #fff; background: #13a86a; }
.ly-note { margin: 0; font-size: 12px; font-weight: 700; color: var(--muted); }
.ly-rules { margin: 0; font-size: 15px; font-weight: 700; color: var(--text); }

/* a streak lost, or saveable with the EXPERT second chance */
.ly-alert { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 10px 12px; border-radius: 14px; }
.ly-alert > span:nth-child(2) { flex: 1 1 180px; display: grid; gap: 1px; }
.ly-alert b { font-size: 15px; color: var(--heading); }
.ly-alert small { font-size: 13px; font-weight: 700; color: var(--muted); }
.ly-alert small b { font-size: inherit; font-variant-numeric: tabular-nums; }
.ly-alert-ico { font-size: 24px; line-height: 1; flex: none; }
.ly-alert.lost { background: var(--ly-lost-bg); border: 1px solid var(--ly-lost-line); }
.ly-alert.rescue { background: rgba(255, 216, 74, .1); border: 1px solid var(--ly-edge); }
.ly-alert .ly-rescue { flex: 1 1 100%; margin: 2px 0 0; padding-inline: 8px; font-size: 14.5px; }
.ly .ly-xp { margin-top: 0; padding: 10px 12px; gap: 10px; border-radius: 16px; }
.ly .ly-xp b { font-size: 14.5px; }
.ly .ly-xp small { font-size: 12.5px; }
.ly .xp-lucky-ico { font-size: 22px; width: 30px; height: 30px; border-radius: 9px; }
.ly .xp-lucky-cta { min-height: 34px; margin-left: 40px; padding: 6px 12px; font-size: 13px; }

/* A 320px phone: the card gives its padding back to the tiles, which stay above 48px wide and keep their five columns. */
@media (max-width: 360px) { .ly { padding: 12px 10px 10px; } .ly-badge { width: 54px; height: 54px; } .ly-n { font-size: 28px; } .ly-headline { font-size: 17px; }
  .ly-tile { width: calc(100% - 4px); } .ly-marks li { font-size: 9.5px; } .ly-cursor { width: 24px; height: 24px; } }
/* A short screen (an iPhone SE, a 390x678 window): the streak header gives its height to the claim block above it. */
@media (max-height: 700px) {
  .ly { gap: 10px; }
  .ly-badge { width: 48px; height: 48px; border-radius: 14px; } .ly-n { font-size: 25px; } .ly-flame { font-size: 18px; top: -8px; }
  .ly-headline { font-size: 17px; }
  .ly-cash { padding: 10px; } .ly-cash-line b { font-size: 17px; }
}
@media (min-width: 700px) {
  .ly { padding: 20px 22px 18px; gap: 14px; }
  .ly-bonus { flex: 0 0 auto; margin-left: auto; }
  .ly-badge { width: 72px; height: 72px; border-radius: 20px; } .ly-n { font-size: 38px; } .ly-headline { font-size: 22px; }
  .ly-pass { gap: 8px; }
  .ly-aim { font-size: 14px; } .ly-aim b { font-size: 17px; }
  .ly-tile { max-width: 104px; } .ly-tile.r-legend { max-width: 132px; }
  .ly-rail-in { height: 28px; } .ly-line { height: 8px; }
  .ly-cursor { width: 32px; height: 32px; } .ly-cursor b { font-size: 14px; }
  .ly-marks li { font-size: 13px; }
  .ly-cash { padding: 14px 16px; } .ly-cash-line b { font-size: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .ly-flame, .ly-cursor.ly-in, .ly-tile.r-legend .ly-art::after, .ly-tile.ready .ly-art, .ly-tile.just-claimed .ly-art,
  .ly-cash .ly-claim-all, .ly-cash .ly-claim-all::after { animation: none; }
}

/* ---------- le bloc d'attente du pack gratuit (app.css, la tuile vide de l'écran Packs) ---------- */
.big-timer { font-family: "Anton", Impact, sans-serif; font-size: 64px; margin: 0; color: var(--gold); letter-spacing: .02em; }
.pack-wait { display: grid; gap: 2px; min-width: 0; justify-items: center; }
.pw-label { font-weight: 800; font-size: 14px; color: var(--muted); }
.pack-wait .big-timer { display: block; font-size: 46px; line-height: 1; font-weight: 400; font-variant-numeric: tabular-nums; }
/* The next pack's progress, ticked every second with the countdown (client/site/guide-recompenses.ts). */
.pw-bar { display: block; width: 100%; max-width: 220px; height: 6px; margin: 6px 0 4px; border-radius: 999px; background: color-mix(in srgb, var(--text) 16%, transparent); overflow: hidden; }
.pw-bar i { display: block; height: 100%; min-width: 6px; border-radius: inherit; background: var(--gold); transition: width 1s linear; }
@media (prefers-reduced-motion: reduce) { .pw-bar i { transition: none; } }
.pw-rule { font-weight: 700; font-size: 13px; line-height: 1.35; color: var(--muted); text-wrap: balance; text-align: center; }
@media (min-width: 900px) { .pack-wait .big-timer { font-size: 64px; } }

/* ---------- le (i) des écrans, ici un lien vers le jeu (app.css) ---------- */
.info-dot { display: inline-grid; place-items: center; width: 16px; height: 16px; letter-spacing: 0; text-transform: none; margin-left: 4px; border-radius: 50%; vertical-align: 1px; font: 800 12px/1 Georgia, serif; font-style: italic; text-decoration: none; color: var(--page); background: var(--gold-text); }
@media (hover: hover) { .info-dot:hover { background: var(--gold-text-deep); } }


/* In the game, a pinned copy of « Jouer » leads to the real button under the pot's odds; the showcase drops that
   section, so nothing would ever unpin it and it would ride along the whole article. */
.pot-go { position: static; }