/* La cagnotte du mois (client/pot.ts) : sa page, /app/pot, et la ligne qui y mène depuis le Classement. It is money to win,
   so the total is drawn as a vault: a dark, warm block in both themes that carries its own ink, MemeCoins falling
   faintly behind a total in big cream figures, and the clock to the draw. Everything else sits on the page's own
   surface, unfolded, one question per block: the reader's chance, where the money goes, the others' chances, how
   tickets are earned, last month's winners. The colours keep their one meaning each: the coin is the MemeCoin's gold,
   the ticket is the gift fuchsia (the house hands the pot out), green is the reader's own, and the one gold button
   is the action: go and play. */

/* ---- the ticket glyph ---- */
.tk { display: inline-flex; align-items: center; gap: 4px; font-weight: 900; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tk-ic { flex: none; width: 1em; height: 1em; color: var(--gift-text); --tk-cut: var(--surface); }

/* "+N" on the tickets earned since the last visit: green, it is the reader's. */
.tk-pop { display: inline-block; padding: 1px 7px; border-radius: 999px; background: #107c49; color: #fff; font-size: 12px; font-weight: 900; line-height: 1.5; font-variant-numeric: tabular-nums; animation: tk-pop .6s cubic-bezier(.2, 1.6, .4, 1) .9s both; }
.tk-pop[hidden] { display: none; }
@keyframes tk-pop { from { transform: translateY(6px) scale(.5); opacity: 0; } to { transform: none; opacity: 1; } }

/* ---- the vault ---- */
.jp-wrap { margin: 4px 0 20px; }
.pot-page { max-width: 720px; margin-inline: auto; }
.jackpot {
  --jp-ink: #fff7e3;
  --jp-soft: #ecdcb6;
  --jp-cell: rgba(255, 236, 190, .08);
  --jp-edge: rgba(255, 205, 96, .34);
  /* The vault is dark in both themes: its coins keep the dark theme's brighter gold. */
  --coin-glyph-rim: #9a6208;
  --coin-glyph-face: #f0b83a;
  --coin-glyph-ink: #6b3d00;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  gap: 16px;
  padding: 22px 16px 20px;
  border-radius: 24px;
  border: 1px solid #6e5216;
  background:
    radial-gradient(120% 70% at 50% -10%, #5a3d08 0%, transparent 60%),
    radial-gradient(90% 60% at 50% 110%, #2c1d4a 0%, transparent 70%),
    linear-gradient(180deg, #1f1607 0%, #120d07 100%);
  color: var(--jp-ink);
  box-shadow: 0 18px 50px -20px rgba(120, 80, 0, .55), inset 0 1px 0 rgba(255, 220, 140, .18);
}

/* The rain: each coin falls down a lane as tall as the vault. The lane moves, not the coin, so the travel is the
   vault's height whatever its content: from -100 % (the coin just above the top) to 8 % (just past the bottom). */
.jp-rain { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.jp-rain i { position: absolute; top: 0; left: var(--x); height: 100%; width: var(--s); display: flex; align-items: flex-end; animation: jp-fall var(--d) linear var(--l) infinite; }
.jp-rain .coin-mark { width: var(--s); height: var(--s); animation: jp-spin calc(var(--d) * .6) ease-in-out var(--l) infinite alternate; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .45)); }
/* Faint and out of focus, all of them: on 03/10/2026 a bright coin fell across « min » and the minutes, and the clock
   could not be read. The rain is a mood behind the figures, never a thing in front of them. */
.jp-rain i { opacity: .3; filter: blur(.6px); }
.jp-rain i:nth-child(n + 13) { opacity: .18; filter: blur(1.4px); }
@keyframes jp-fall { from { transform: translateY(-100%); } to { transform: translateY(8%); } }
@keyframes jp-spin { from { transform: rotateY(0) rotate(-14deg); } to { transform: rotateY(160deg) rotate(14deg); } }

/* A warm halo breathing behind the total. */
.jp-glow { position: absolute; z-index: -1; left: 50%; top: 70px; width: 340px; height: 200px; margin-left: -170px; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 190, 60, .42), transparent); animation: jp-breathe 3.2s ease-in-out infinite; pointer-events: none; }
@keyframes jp-breathe { 0%, 100% { transform: scale(.85); opacity: .7; } 50% { transform: scale(1.08); opacity: 1; } }

.jp-main { display: grid; justify-items: center; gap: 6px; text-align: center; }
.jp-kicker { display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 6px 14px; border-radius: 999px; background: rgba(0, 0, 0, .35); border: 1px solid var(--jp-edge); font-size: 13px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; color: var(--jp-ink); }
.jp-kicker .tk-ic { width: 18px; height: 18px; color: #f6a8ff; --tk-cut: #241806; }
.jp-total { position: relative; display: inline-flex; align-items: center; gap: 10px; margin: 4px 0 0; font-size: clamp(52px, 15vw, 92px); font-weight: 900; line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--jp-ink); text-shadow: 0 0 28px rgba(255, 186, 50, .55), 0 3px 0 rgba(0, 0, 0, .35); }
.jp-total .coin-mark { width: .72em; height: .72em; flex: none; filter: drop-shadow(0 0 14px rgba(255, 190, 60, .6)); animation: jp-coin 2.6s ease-in-out infinite; }
@keyframes jp-coin { 0%, 100% { transform: rotate(-8deg) scale(1); } 50% { transform: rotate(8deg) scale(1.08); } }
.jp-sub { display: grid; gap: 2px; margin: 0; font-size: 15px; font-weight: 800; color: var(--jp-soft); }
.jp-sub span { white-space: nowrap; }

.jp-clock { display: grid; justify-items: center; gap: 6px; margin-top: 8px; }
.jp-in { font-size: 12px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; color: var(--jp-soft); }
.jp-units { display: flex; gap: 6px; }
.jp-u { display: grid; justify-items: center; min-width: 56px; padding: 7px 6px 5px; border-radius: 12px; background: var(--jp-cell); border: 1px solid var(--jp-edge); }
.jp-u b { font-size: 24px; font-weight: 900; line-height: 1; font-variant-numeric: tabular-nums; color: var(--jp-ink); }
.jp-u small { margin-top: 3px; font-size: 11px; font-weight: 800; color: var(--jp-soft); }

.jp-top ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.jp-top li { display: grid; grid-template-columns: 22px 36px minmax(0, 1fr) auto 52px; align-items: center; gap: 10px; min-height: 48px; padding: 0 12px 0 8px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); }
.jp-top li.me { border-color: color-mix(in srgb, #1db36b 60%, var(--line)); background: color-mix(in srgb, #1db36b 9%, var(--surface)); }
.jp-top .tk { font-size: 15px; color: var(--text); }
.jp-top .pl-who { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; font-weight: 800; color: var(--text); text-decoration: none; }

@media (min-width: 720px) {
  .jackpot { padding: 28px 28px 26px; }
  .jp-u { min-width: 64px; }
  .jp-u b { font-size: 28px; }
}
@media (hover: hover) {
  .jp-top .pl-who:hover { text-decoration: underline; }
}
@media (max-width: 359px) {
  .jp-u { min-width: 48px; }
  .jp-u b { font-size: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  /* Paused on their negative delays, the coins stay scattered down the vault instead of falling. */
  .jp-rain i, .jp-rain .coin-mark { animation-play-state: paused; }
  .jp-glow, .jp-total .coin-mark { animation: none; }
}

/* ---- how it works, in three short parts ---- */
.pot-sec { margin: 22px 0 0; padding: 0; }
.pot-sec h2 { margin: 0 0 10px; font-size: 13px; font-weight: 900; letter-spacing: .07em; text-transform: uppercase; color: var(--text); }
.pot-earn ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.pot-earn li { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px; padding: 0 12px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); }
.pe-what { min-width: 0; font-size: 14px; font-weight: 700; line-height: 1.2; }
.pe-n { display: inline-flex; align-items: center; gap: 3px; flex: none; font-size: 15px; font-weight: 900; color: var(--gift-text); font-variant-numeric: tabular-nums; }
.pe-n .tk-ic { width: 16px; height: 16px; }

.pot-rule { margin: 8px 0 0; font-size: 13px; font-weight: 700; line-height: 1.4; color: var(--muted); }

.pot-last ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.pot-last li { display: grid; grid-template-columns: 22px 36px minmax(0, 1fr) auto; align-items: center; gap: 10px; min-height: 48px; padding: 0 12px 0 8px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); }
.pl-rank { font-size: 15px; font-weight: 900; text-align: center; color: var(--muted); font-variant-numeric: tabular-nums; }
.pl-av .av, .pl-av .avatar-letter { --size: 36; width: 36px; height: 36px; font-size: 13px; }
.pot-last .pl-who { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; font-weight: 800; color: var(--text); text-decoration: none; }
.pot-last li b { display: inline-flex; align-items: center; gap: 4px; font-size: 15px; font-weight: 900; white-space: nowrap; color: var(--gift-text); font-variant-numeric: tabular-nums; }
.pot-last li b .coin-mark { width: 15px; height: 15px; }
.pl-share { margin: 8px 0 0; font-size: 13px; font-weight: 800; color: var(--muted); }
.pot-made { margin-top: 18px; }
@media (hover: hover) {
  .pot-last .pl-who:hover { text-decoration: underline; }
  .pot-card:hover { border-color: rgba(255, 205, 96, .7); }
}
.pot-card:focus-visible { outline: 3px solid #1db36b; outline-offset: 2px; }

@media (min-width: 560px) {
  .pot-earn ul { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  .tk-pop { animation: none; }
  .ps-bar i { transition: none; }
}

/* ---- the reader's chance: the figure the page is for ---- */
.pot-chance { --pg-ok: #3ddc84; --pg-ok-bg: color-mix(in srgb, #1db36b 16%, var(--surface)); }
:root[data-theme="light"] .pot-chance { --pg-ok: #0b6b3f; }
.pc-card { display: grid; gap: 12px; padding: 14px; border-radius: 22px; background: radial-gradient(120% 70% at 0% 0%, color-mix(in srgb, #1db36b 12%, transparent), transparent 60%), radial-gradient(120% 70% at 100% 100%, color-mix(in srgb, var(--gift-1) 12%, transparent), transparent 60%), var(--surface); border: 1px solid color-mix(in srgb, #1db36b 55%, var(--line)); }
.pot-stats { display: grid; gap: 8px; }
.pot-stat { display: grid; align-content: start; gap: 2px; min-width: 0; margin: 0; padding: 12px; border-radius: 16px; background: var(--surface-2); }
.pot-stat small { font-size: 11px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.pot-stat b { display: inline-flex; align-items: center; gap: 6px; font-size: clamp(30px, 10vw, 44px); font-weight: 900; line-height: 1.05; letter-spacing: -.02em; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--text); }
.pc-tk .tk-ic { width: .7em; height: .7em; flex: none; }
.pot-stat > span { font-size: 13px; font-weight: 700; line-height: 1.3; color: var(--muted); }
.pc-next { margin: 0; padding: 8px 12px; border-radius: 12px; background: var(--surface-2); font-size: 14px; font-weight: 800; color: var(--text); }
.pc-next b { font-weight: 900; }
.pot-chance .btn.pot-play { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 52px; margin: 14px 0 0; text-decoration: none; }

/* ---- where the money goes: every prize, one under the other ---- */
.pot-where ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.pot-where li { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; padding: 8px 14px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); }
.pw-what, .pw-coins { display: grid; gap: 1px; min-width: 0; }
.pw-coins { justify-items: end; flex: none; }
.pw-what b { font-size: 15px; font-weight: 900; }
.pw-what small, .pw-coins small { font-size: 12px; font-weight: 700; color: var(--muted); }
.pw-coins b { display: inline-flex; align-items: center; gap: 5px; font-size: 19px; font-weight: 900; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pw-coins .coin-mark { width: 17px; height: 17px; flex: none; }
.pot-where .is-top { min-height: 68px; border-color: color-mix(in srgb, var(--coin-glyph-face, #f0b83a) 70%, var(--line)); }
.pot-where .is-top .pw-coins b { font-size: 26px; }
.pot-where .is-top .pw-coins .coin-mark { width: 22px; height: 22px; }
.pot-where .is-equal { border-style: dashed; }

/* ---- each player's chance ---- */
.pl-pct { font-size: 15px; font-weight: 900; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--text); }
.jp-top .pl-av .rk-av, .pot-last .pl-av .rk-av { width: 36px; height: 36px; }

/* ---- the line on the Classement that leads to the page ---- */
.pot-card {
  --coin-glyph-rim: #9a6208;
  --coin-glyph-face: #f0b83a;
  --coin-glyph-ink: #6b3d00;
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 10px;
  min-height: 60px; margin: 0 0 14px; padding: 8px 12px 8px 14px; border-radius: 18px; border: 1px solid #6e5216;
  background: linear-gradient(100deg, #2a1d08 0%, #17100a 100%); color: #fff7e3; text-decoration: none;
}
.pcd-ic .tk-ic { display: block; width: 24px; height: 24px; color: #f6a8ff; --tk-cut: #241806; }
.pcd-txt { display: grid; gap: 1px; min-width: 0; }
.pcd-txt b { font-size: 15px; font-weight: 900; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pcd-txt small { font-size: 13px; font-weight: 800; color: #ecdcb6; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pcd-total { display: inline-flex; align-items: center; gap: 5px; font-size: 20px; font-weight: 900; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pcd-total .coin-mark { width: 18px; height: 18px; flex: none; }
.pcd-go { font-style: normal; font-size: 22px; font-weight: 900; line-height: 1; color: #ecdcb6; }

@media (min-width: 720px) {
  .pot-where ol { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pot-where .is-top, .pot-where .is-equal { grid-column: 1 / -1; }
}

/* ---- the reader's potential winnings, inside the chance card ----
   Each figure appears once: the three tiles hold every amount, the unlock rows only say what opens each part.
   Green is the reader's own and certain (the equal share), the gift fuchsia what the draw may add, gold the top prize. */
.pg { display: grid; gap: 10px; padding-top: 14px; border-top: 1px solid var(--line); }
.pg-h { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 10px; margin: 0; font-size: 17px; font-weight: 900; }
.pg-h small { font-size: 12px; font-weight: 800; color: var(--muted); }
.pg-tiles { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.pg-tiles li { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 52px; padding: 8px 12px; border-radius: 14px; background: var(--surface-2); box-shadow: inset 4px 0 0 var(--edge); }
.pg-tiles li > span { display: grid; gap: 1px; min-width: 0; }
.pg-tiles small { font-size: 14px; font-weight: 900; color: var(--text); }
.pg-tiles li > span > span { font-size: 12px; font-weight: 700; line-height: 1.25; color: var(--muted); }
.pg-tiles b { display: inline-flex; align-items: center; gap: 5px; flex: none; font-size: 22px; font-weight: 900; line-height: 1.1; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--text); }
.pg-tiles b .coin-mark { width: 17px; height: 17px; flex: none; }
.pg-min { --edge: #1db36b; }
.pg-min b { color: var(--pg-ok); }
.pg-mid { --edge: var(--gift-1); }
.pg-max { --edge: #f0b83a; }
.pg-unlock { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.pg-unlock li { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 8px 12px; border-radius: 14px; border: 1px dashed var(--line); }
.pg-unlock li.on { border-style: solid; border-color: color-mix(in srgb, #1db36b 55%, var(--line)); background: var(--pg-ok-bg); }
.pg-mark { display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--surface-2); color: var(--muted); }
.pg-mark.on { background: #107c49; color: #fff; }
.pg-mark svg { width: 14px; height: 14px; }
.pg-what { display: grid; gap: 3px; min-width: 0; flex: 1; }
.pg-what b { font-size: 15px; font-weight: 900; }
.pg-what small { font-size: 12px; font-weight: 700; line-height: 1.3; color: var(--muted); }
.pg-what small b { color: var(--text); font-size: inherit; }
.pg-unlock .ps-bar { display: block; height: 8px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.pg-unlock .ps-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--gift-1), var(--gift-2)); transition: width .8s ease-out; }
@media (min-width: 600px) {
  .pc-card { padding: 18px; gap: 14px; }
  .pg-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pg-tiles li { flex-direction: column; justify-content: flex-start; gap: 4px; padding: 12px 10px; box-shadow: inset 0 3px 0 var(--edge); text-align: center; }
  .pg-tiles li > span { display: contents; }
  .pg-tiles small { order: 0; }
  .pg-tiles b { order: 1; font-size: 26px; }
  .pg-tiles li > span > span { order: 2; }
  .pg-unlock { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  .pg-unlock .ps-bar i { transition: none; }
}

.pot-go { position: sticky; bottom: calc(var(--tabbar-h, 0px) + 12px); z-index: 5; display: flex; align-items: center; justify-content: center; width: max-content; max-width: 100%; min-height: 48px; margin: 14px auto 0; padding: 10px 26px; font-size: 17px; text-decoration: none; box-shadow: 0 10px 28px rgba(0, 0, 0, .45); transition: opacity .2s, translate .2s; }
.pot-go-off { opacity: 0; translate: 0 12px; pointer-events: none; visibility: hidden; transition: opacity .2s, translate .2s, visibility 0s .2s; }
@media (prefers-reduced-motion: reduce) {
  .pot-go, .pot-go-off { transition: none; }
}