/*
  The Succès panel and the Sets tab as the guide (/fr/succes/) draws them. The game's own rules, copied from
  public/app/app.css: an SEO page cannot link that file, it is the whole app's stylesheet. The showcase renders a
  heading one step down (the page's single <h1> is the article's own) and the claim as a link, so the rules the panel
  hangs on an <h2> or a <button class="claim"> are restated here for <h3> and <a class="claim-btn">. The variables and
  .btn come from /styles.css; the sets keep /app/sets-view.css, which a page can link as it is.
  Change .ach* in app.css and this copy drifts: src/guide-succes.test.ts draws the panel, not this file.
*/

.muted { color: var(--muted); }
.head-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }

/* The panel's own progress bar, above the themes. */
.ach-progress { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 14px 18px; margin-bottom: 16px; }
.ach-progress > div:first-child { display: flex; justify-content: space-between; font-weight: 800; margin-bottom: 10px; color: var(--muted); }
.ach-progress b { color: #1db36b; }
.ach-bar { height: 6px; border-radius: 999px; background: var(--surface-2); overflow: hidden; margin: 6px 0 2px; }
.ach-bar.big { height: 10px; margin: 0; }
.ach-bar i { display: block; height: 100%; background: #1db36b; border-radius: inherit; }

/* The themes, scrolled through with a thumb: the row scrolls on its own, the page never sideways. */
.chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
.chips button { font: inherit; font-weight: 800; font-size: 14px; border: 1px solid var(--line); background: var(--surface); color: var(--muted); padding: 7px 14px; border-radius: 999px; cursor: pointer; }
.chip-n { font-size: 12px; font-weight: 900; padding: 1px 7px; border-radius: 999px; background: var(--surface-2); color: var(--text); }
.ach-jump { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-bottom: 6px; padding-inline-end: 18px; }
.ach-jump::-webkit-scrollbar { display: none; }
.ach-jump button { flex: none; min-height: 44px; white-space: nowrap; }

/* A section per theme, the ones to claim on top. */
.ach-head { margin-top: 26px; }
.ach-head h3 { margin: 0 0 2px; font-size: 22px; color: var(--heading); text-align: left; }
.ach-cat { margin-top: 22px; scroll-margin-top: 16px; }
.ach-cat h3 { font-size: 20px; margin: 0 0 10px; display: flex; align-items: baseline; gap: 8px; }
.ach-cat h3 small { font-size: 14px; color: var(--muted); font-weight: 800; }
.ach-ready-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.ach-ready-head h3 { margin: 0; margin-right: auto; }
.ach-ready-head .memecoin { display: block; flex: none; filter: drop-shadow(0 6px 14px rgba(184, 119, 8, .35)); }
/* The MemeCoin logotype: glyph at 1.2× the word, gap 0.4×, old-gold fill. */
.memecoin-logo { display: inline-flex; align-items: center; gap: .4em; white-space: nowrap; line-height: 1; font-size: 18px; font-style: normal; align-self: center; }
.memecoin-logo .coin-mark { width: 1.2em; height: 1.2em; }
.memecoin-logo > span { font-weight: 900; letter-spacing: .14em; background: linear-gradient(180deg, var(--gold-text-light), var(--gold-text) 55%, var(--gold-text-deep)); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* A goal's tile: grey while it is locked, green once it is won. */
.ach-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.ach { display: flex; gap: 14px; align-items: flex-start; padding: 14px 16px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line); }
.ach:not(.unlocked) { opacity: 1; filter: grayscale(1); }
.ach.unlocked { opacity: 1; filter: none; }
.ach.unlocked:not(.claimed) { border-color: #1db36b; box-shadow: 0 0 0 1px #1db36b inset, 0 8px 24px rgba(29, 179, 107, .18); }
.ach-icon { font-size: 30px; line-height: 1; flex: none; }
.ach-body { flex: 1; min-width: 0; display: grid; gap: 2px; }
.ach-body b { font-size: 16px; overflow-wrap: anywhere; }
.ach-body > span { color: var(--muted); font-size: 14px; font-weight: 600; }
.ach-body small { color: var(--muted); font-size: 12px; font-weight: 700; }
.ach-link { color: #1db36b; font-size: 13px; font-weight: 800; text-decoration: none; justify-self: start; }
.ach-check { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 5px; background: #1db36b; color: #fff; font-size: 12px; }
/* The claim is a link into the game here, and keeps the 48 px a thumb needs in the app. */
.ach .claim-btn { flex: none; width: auto; margin: 0; padding: 9px 14px; min-height: 48px; font-size: 15px; align-self: center; display: inline-grid; place-items: center; text-decoration: none; }
.btn.claim-btn:not(:disabled) { background: linear-gradient(135deg, #3ddc8c, #13a86a); color: #06240f; text-shadow: none; box-shadow: 0 8px 20px rgba(29, 179, 107, .3); }
:root[data-theme="light"] .btn.claim-btn:not(:disabled) { background: linear-gradient(135deg, #0b7d4a, #064e30); color: #fff; }

/* The sets: /app/sets-view.css styles the box around an <h2>, the showcase hands it an <h3>. */
.set-head h3 { margin: 0 0 2px; font-size: 18px; overflow-wrap: anywhere; }
.set-claim-link { display: inline-grid; place-items: center; min-height: 44px; text-decoration: none; }

/* Dans l'article, un aperçu : quatre succès par thème et huit cartes par set (le panneau entier faisait 18 000 px
   de haut sur un téléphone). La liste complète est dans les tableaux de l'article, et dans le jeu. */
.ach-guide .ach-cat .ach-grid > :nth-child(n + 5) { display: none; }
.sets-guide .set-cards > :nth-child(n + 9) { display: none; }
.guide-more { margin: 10px 0 0; font-weight: 800; }