:root {
  --paper: #faf6ee;
  --card: #ffffff;
  --ink: #1b2440;
  --ink-soft: #5a6382;
  --gold: #e8b75a;
  --gold-deep: #c9962e;
  --coral: #e2604f;
  --green: #7fb069;
  --line: #e6dfd0;
  --radius: 14px;
}
* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { touch-action: manipulation; } /* tue le double-tap-zoom iOS (frappe rapide) */
html, body { height: 100%; }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  overscroll-behavior: none;
  user-select: none; -webkit-user-select: none;
}
#app { max-width: 480px; margin: 0 auto; min-height: 100%; display: flex; flex-direction: column; }
button { font: inherit; border: 0; background: none; color: inherit; cursor: pointer; }

/* ---------- header ---------- */
.top {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px 6px;
}
.logo { font-family: Georgia, serif; font-weight: 700; font-size: 26px; letter-spacing: -.5px; }
.logo em { color: var(--gold-deep); font-style: normal; }
.chips { display: flex; gap: 8px; align-items: center; }
.chip {
  background: var(--card); border: 1px solid var(--line); border-radius: 99px;
  padding: 5px 11px; font-size: 13px; font-weight: 600; color: var(--ink);
  box-shadow: 0 1px 2px rgba(27,36,64,.05);
}
.chip.gold { border-color: var(--gold); }
.date-line { padding: 0 18px 12px; color: var(--ink-soft); font-size: 14px; text-transform: capitalize; }

/* ---------- home cards ---------- */
.cards { display: flex; flex-direction: column; gap: 12px; padding: 4px 16px 20px; }
.gcard {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 14px 16px; display: flex; align-items: center; gap: 14px;
  box-shadow: 0 2px 8px rgba(27,36,64,.06);
  transition: transform .12s ease;
}
.gcard:active { transform: scale(.98); }
.gcard .ico {
  width: 46px; height: 46px; border-radius: 12px; background: var(--ink);
  color: var(--gold); display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 19px; font-family: Georgia, serif; flex: none;
}
.gcard.mini .ico { background: #eef1f8; color: var(--ink); }
.gcard .meta { flex: 1; min-width: 0; }
.gcard .t { font-weight: 700; font-size: 16px; }
.gcard .s { color: var(--ink-soft); font-size: 13px; margin-top: 2px; }
.gcard .go {
  font-weight: 700; font-size: 14px; color: var(--gold-deep);
  background: #fdf3df; padding: 8px 14px; border-radius: 99px; flex: none;
}
.gcard .done-time { font-weight: 800; font-size: 16px; color: var(--green); flex: none; }
.duel-row { display: flex; gap: 10px; margin-top: 6px; font-size: 12.5px; color: var(--ink-soft); }
.duel-row b { color: var(--ink); }
.section-t { padding: 14px 18px 8px; font-size: 13px; font-weight: 700; color: var(--ink-soft);
  text-transform: uppercase; letter-spacing: .8px; }
.statsline { text-align: center; color: var(--ink-soft); font-size: 13px; font-weight: 600;
  padding: 6px 18px 0; }
.navrow { display: flex; justify-content: center; padding: 10px 0 26px; }
.navbtn { color: var(--ink-soft); font-size: 14px; font-weight: 600; padding: 10px 16px; }

/* ---------- player picker ---------- */
.picker { flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 18px; padding: 30px; }
.picker h1 { font-family: Georgia, serif; font-size: 34px; }
.picker h1 em { color: var(--gold-deep); font-style: normal; }
.picker p { color: var(--ink-soft); }
.pbtn {
  width: 100%; max-width: 280px; padding: 16px; border-radius: var(--radius);
  background: var(--ink); color: #fff; font-size: 18px; font-weight: 700;
}
.pbtn.alt { background: var(--card); color: var(--ink); border: 1.5px solid var(--line); }

/* ---------- play view ---------- */
.playbar { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px 6px; }
.playbar .back { font-size: 15px; font-weight: 700; color: var(--ink-soft); padding: 6px 10px; }
.playbar .timer { font-variant-numeric: tabular-nums; font-weight: 800; font-size: 17px; }
.playbar .timer.urgent { color: #d3392f; animation: urgentpulse .8s ease-in-out infinite; }
@keyframes urgentpulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.14); } }
.playbar .hint { font-weight: 700; font-size: 14px; background: #fdf3df; color: var(--gold-deep);
  padding: 7px 13px; border-radius: 99px; }
.playbar .hint:disabled { opacity: .4; }

.gridwrap { display: flex; justify-content: center; padding: 6px 10px; }
.grid { display: grid; gap: 3px; width: min(94vw, 440px); }
.cell {
  position: relative; aspect-ratio: 1; background: var(--card);
  border: 1.5px solid var(--line); border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; text-transform: uppercase;
  font-size: clamp(15px, 5.2vw, 26px);
  transition: background .12s, border-color .12s;
}
.grid.mini .cell { font-size: clamp(20px, 8vw, 34px); }
.cell.block { background: var(--ink); border-color: var(--ink); }
.cell .n {
  position: absolute; top: 1px; left: 3px; font-size: 9px; font-weight: 700;
  color: var(--ink-soft);
}
.cell.inword { background: #fbe9c3; border-color: var(--gold); }
.cell.sel { background: #f7d894; border-color: var(--gold-deep); box-shadow: 0 0 0 2px var(--gold-deep) inset; }
@keyframes selflash { 0% { background: #f2c46b; } 100% { background: inherit; } }
.cell.selflash { animation: selflash .4s ease; }
.cell.locked { color: var(--ink); background: #f2f4fa; border-color: #dfe4f2; }
.cell.bad { color: var(--coral); }
.cell.goldcell { background: linear-gradient(135deg, #fff3d6, #ffe9b0); border-color: var(--gold); color: var(--gold-deep); }

@keyframes pop { 0% { transform: scale(1); } 45% { transform: scale(1.32); } 100% { transform: scale(1); } }
.cell.pop { animation: pop .38s cubic-bezier(.3,1.4,.5,1) both; background: #fdf3df; border-color: var(--gold); z-index: 2; }
@keyframes shake { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-4px); } 55% { transform: translateX(4px); } 80% { transform: translateX(-2px); } }
.cell.shake { animation: shake .4s ease both; }
@keyframes appear { from { transform: scale(.6); opacity: .3; } to { transform: scale(1); opacity: 1; } }
.cell .lt { display: inline-block; }
.cell .lt.appear { animation: appear .14s ease both; }
@keyframes goldshine {
  0% { box-shadow: 0 0 0 0 rgba(232,183,90,.8); }
  100% { box-shadow: 0 0 0 14px rgba(232,183,90,0); }
}
.cell.goldpulse { animation: goldshine .8s ease both; }

.defbar {
  display: flex; align-items: center; gap: 6px;
  margin: 8px 12px; padding: 10px 8px;
  background: var(--ink); color: #fff; border-radius: 12px; min-height: 52px;
}
.defbar .arrowbtn { color: #aeb6d4; font-size: 20px; padding: 4px 12px; flex: none; }
.defbar .deftxt { flex: 1; text-align: center; font-size: 15.5px; font-weight: 600; line-height: 1.3; }
.defbar .deftxt .dn { display: block; color: var(--gold); font-weight: 800; font-size: 11px;
  letter-spacing: 1.2px; text-transform: uppercase; margin-bottom: 2px; }

.kb { padding: 4px 6px calc(10px + env(safe-area-inset-bottom)); }
.krow { display: flex; justify-content: center; gap: 5px; margin-bottom: 6px; }
.key {
  flex: 1; max-width: 42px; height: 48px; background: var(--card);
  border: 1px solid var(--line); border-radius: 8px;
  font-size: 17px; font-weight: 700; color: var(--ink);
  box-shadow: 0 1.5px 0 rgba(27,36,64,.12);
}
.key:active { background: #fdf3df; transform: translateY(1px); }
/* réactivité tactile : coupe le délai double-tap-zoom + le halo gris au tap */
.key, .cell { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.key.wide { max-width: 64px; font-size: 19px; }

/* ---------- overlay fin de grille ---------- */
.overlay {
  position: fixed; inset: 0; background: rgba(27,36,64,.55);
  display: flex; align-items: center; justify-content: center; z-index: 50;
  padding: 24px;
}
@keyframes rise { from { transform: translateY(26px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.sheet {
  background: var(--paper); border-radius: 20px; padding: 26px 22px;
  width: 100%; max-width: 380px; text-align: center;
  animation: rise .3s ease both;
}
.sheet h2 { font-family: Georgia, serif; font-size: 26px; margin-bottom: 4px; }
.sheet .sub { color: var(--ink-soft); font-size: 14px; margin-bottom: 14px; }
.bigtime { font-size: 40px; font-weight: 800; font-variant-numeric: tabular-nums; margin: 6px 0 2px; }
.sheet .hints-used { color: var(--ink-soft); font-size: 13.5px; margin-bottom: 12px; }
.duelbox { background: var(--card); border: 1px solid var(--line); border-radius: 12px;
  padding: 12px; margin: 12px 0; font-size: 14.5px; }
.duelbox b { font-weight: 800; }
.primary {
  width: 100%; padding: 15px; border-radius: 12px; background: var(--ink);
  color: #fff; font-size: 16px; font-weight: 700; margin-top: 8px;
}

/* ---------- carte mot d'or ---------- */
@keyframes cardflip { from { transform: rotateY(90deg); } to { transform: rotateY(0); } }
.goldcard {
  background: linear-gradient(160deg, #fff8e8, #ffedc2);
  border: 2px solid var(--gold); border-radius: 16px;
  padding: 18px 16px; margin: 12px 0; text-align: left;
  animation: cardflip .45s ease both; transform-origin: center;
  box-shadow: 0 6px 22px rgba(201,150,46,.25);
}
.goldcard .gc-tag { font-size: 11px; font-weight: 800; letter-spacing: 1.5px;
  color: var(--gold-deep); text-transform: uppercase; }
.goldcard .gc-word { font-family: Georgia, serif; font-size: 26px; font-weight: 700; margin: 2px 0 8px; }
.goldcard .gc-txt { font-size: 14px; line-height: 1.5; color: #4a3f22; }
.goldcard .gc-date { font-size: 12px; color: var(--gold-deep); margin-top: 10px; }

/* ---------- collection ---------- */
.coll { padding: 0 16px 30px; display: flex; flex-direction: column; gap: 4px; }
.empty { text-align: center; color: var(--ink-soft); padding: 50px 30px; line-height: 1.6; }

/* ---------- expédition ---------- */
.playbar .hud { font-weight: 800; font-size: 14px; background: #fdf3df;
  color: var(--ink); padding: 7px 12px; border-radius: 99px; }
.belt { display: flex; gap: 6px; margin: 0 12px 6px; overflow-x: auto; padding: 2px; }
.belt.empty-belt { color: var(--ink-soft); font-size: 12.5px; font-weight: 600;
  justify-content: center; padding: 6px; }
.bgad { position: relative; flex: none; width: 46px; height: 46px; font-size: 22px;
  background: var(--card); border: 1.5px solid var(--gold); border-radius: 12px;
  box-shadow: 0 1.5px 0 rgba(27,36,64,.12); }
.bgad:active { transform: scale(.92); }
/* fiche gadget montrée avant chaque usage (v59) */
.gadget-sheet .gs-emo { font-size: 52px; line-height: 1; }
.gadget-sheet h2 { margin-top: 6px; }
.gadget-sheet .gs-warn { color: var(--gold-deep); font-size: 13px; font-weight: 700; margin: -4px 0 12px; }
.gadget-sheet .gs-btns { display: flex; gap: 10px; margin-top: 4px; }
.gadget-sheet .gs-btns .primary { margin-top: 0; width: auto; flex: 1.5; }
.gadget-sheet .gs-cancel { flex: 1; padding: 15px; border-radius: 12px;
  font-size: 16px; font-weight: 700; background: transparent;
  border: 1.5px solid var(--line); color: var(--ink-soft); }
.bgad .bn { position: absolute; top: -5px; right: -5px; background: var(--ink);
  color: var(--gold); font-size: 10px; font-weight: 800; border-radius: 99px;
  padding: 1px 5px; }
.shopcard { display: flex; align-items: center; gap: 12px; background: var(--card);
  border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px;
  margin-bottom: 8px; }
.shopcard.slocked { opacity: .55; }
.sh-e { font-size: 26px; flex: none; }
.sh-m { flex: 1; min-width: 0; }
.sh-n { font-weight: 800; font-size: 15px; }
.sh-own { color: var(--gold-deep); font-size: 13px; }
.sh-d { color: var(--ink-soft); font-size: 12.5px; margin-top: 1px; }
.sh-gate { color: var(--gold-deep); font-size: 11.5px; font-weight: 700; margin-top: 3px; }
.sh-buy { flex: none; background: var(--ink); color: var(--gold); font-weight: 800;
  font-size: 14px; padding: 10px 12px; border-radius: 10px; }
.sh-buy:disabled { opacity: .4; }
.gcard.exped { border: 1.5px solid var(--gold); background: linear-gradient(160deg, #fffdf6, #fdf3df); }

/* ---------- confetti ---------- */
.cf { position: fixed; width: 8px; height: 12px; border-radius: 2px; pointer-events: none; z-index: 99; }

/* ---------- toast ---------- */
@keyframes toastin { from { transform: translate(-50%,-16px); opacity: 0; } to { transform: translate(-50%,0); opacity: 1; } }
.toast {
  position: fixed; top: 16px; left: 50%; transform: translateX(-50%);
  background: var(--ink); color: var(--gold); font-weight: 800;
  padding: 12px 22px; border-radius: 99px; z-index: 60;
  animation: toastin .3s ease both; box-shadow: 0 8px 24px rgba(27,36,64,.35);
}

/* ---------- juice fin de grille (chunk 1, 20/07) ---------- */
@keyframes medalpop {
  0%   { transform: scale(0) rotate(-25deg); opacity: 0; }
  55%  { transform: scale(1.35) rotate(8deg); opacity: 1; }
  75%  { transform: scale(.92) rotate(-3deg); }
  100% { transform: scale(1) rotate(0); }
}
.medal-pop {
  font-size: 48px; line-height: 1; margin: 2px 0 4px;
  animation: medalpop .6s cubic-bezier(.3,1.5,.5,1) both;
  filter: drop-shadow(0 3px 8px rgba(201,150,46,.5));
}
.progjuice .xpline { font-weight: 800; font-size: 18px; margin-top: 2px; }
.progjuice .xpnum { color: var(--gold-deep); font-variant-numeric: tabular-nums; }

@keyframes lvlin {
  0%   { transform: scale(.4); opacity: 0; }
  60%  { transform: scale(1.12); opacity: 1; }
  100% { transform: scale(1); }
}
.levelup-banner { display: none; }
.levelup-banner.show {
  display: block; margin: 10px auto 2px; padding: 10px 14px;
  background: linear-gradient(135deg, #c9962e, #e8b75a); color: #fff;
  border-radius: 12px; font-weight: 900; font-size: 17px; letter-spacing: .5px;
  box-shadow: 0 6px 20px rgba(201,150,46,.4);
  animation: lvlin .5s cubic-bezier(.3,1.5,.5,1) both;
}
.levelup-banner span {
  display: block; font-size: 13px; font-weight: 700;
  opacity: .95; margin-top: 2px; letter-spacing: 0;
}

@keyframes badgein {
  from { transform: scale(.3) translateY(6px); opacity: 0; }
  to   { transform: scale(1) translateY(0); opacity: 1; }
}
.badgewrap { margin-top: 8px; }
.badge-pop {
  display: inline-block; background: rgba(255,215,0,.15);
  border: 1px solid rgba(255,215,0,.45); border-radius: 10px;
  padding: 3px 8px; margin: 3px; font-size: 12px;
  animation: badgein .4s cubic-bezier(.3,1.5,.5,1) both;
}

/* ---------- objectifs du jour (chunk 2, 20/07) ---------- */
.questcard {
  margin: 0 16px 14px; background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 12px 14px;
  box-shadow: 0 2px 8px rgba(27,36,64,.06);
}
.qhead {
  font-weight: 800; font-size: 13px; color: var(--ink-soft);
  text-transform: uppercase; letter-spacing: .6px; margin-bottom: 8px;
}
.qrow { margin-bottom: 9px; }
.qrow:last-child { margin-bottom: 0; }
.qtxt { display: flex; justify-content: space-between; align-items: baseline; font-size: 13.5px; }
.qlbl { font-weight: 600; }
.qrow.done .qlbl { color: var(--green); }
.qrw { font-size: 12px; font-weight: 700; color: var(--gold-deep); flex: none; margin-left: 8px; }
.qrow.done .qrw { color: var(--green); }
.qbar { height: 6px; background: #eef1f8; border-radius: 6px; margin-top: 4px; overflow: hidden; }
.qbar i { display: block; height: 100%; border-radius: 6px;
  background: linear-gradient(90deg, var(--gold), var(--gold-deep)); transition: width .5s ease; }
.qrow.done .qbar i { background: var(--green); }

/* ---------- bibliothèque : l'étagère qui se garnit (chunk 3, 20/07) ---------- */
/* jauge d'étagères sur la carte d'accueil : 6 petites colonnes qui montent */
.shelfmini { display: flex; align-items: flex-end; gap: 3px; height: 22px; margin-top: 9px; }
.shelfmini .sm {
  flex: 1; height: 100%; background: rgba(120,90,40,.09);
  border-radius: 3px; display: flex; align-items: flex-end; overflow: hidden;
}
.shelfmini .sm i { display: block; width: 100%; border-radius: 3px; transition: height .6s ease; }

/* panneau étagère en haut de la Bibliothèque */
.shelf-hero {
  margin: 4px 16px 14px; padding: 14px 14px 8px;
  background: linear-gradient(162deg, #f4ead4, #e7d3ac);
  border: 1px solid #d9c398; border-radius: var(--radius);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 3px 12px rgba(120,90,40,.14);
}
.shelf-hero.empty { text-align: center; padding: 22px 16px; }
.shelf-title {
  display: flex; justify-content: space-between; align-items: baseline;
  font-weight: 800; font-size: 15px; color: #7a5a2a; margin-bottom: 12px;
}
.shelf-title span { font-size: 13px; font-weight: 700; color: #a9834a; }
.shelf-sub { color: #8a6a3a; font-size: 13.5px; line-height: 1.45; }
.shelf { margin-bottom: 11px; }
.shelf:last-child { margin-bottom: 2px; }
.shelf-label {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 11px; font-weight: 800; margin-bottom: 3px;
}
.shelf-label .snm { text-transform: uppercase; letter-spacing: .4px; }
.shelf-label .sct { color: #a9834a; }
.shelf-books {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 3px;
  min-height: 30px; padding: 0 1px;
}
.book {
  width: 9px; flex: none; border-radius: 2px 2px 0 0;
  box-shadow: inset -1px 0 0 rgba(0,0,0,.14), inset 1px 0 0 rgba(255,255,255,.28);
}
.book.done {
  height: 30px; background: var(--bc);
  animation: bookin .42s cubic-bezier(.3,1.5,.5,1) both;
}
.book.done.gold { box-shadow: inset 0 4px 0 #ffd76a, inset -1px 0 0 rgba(0,0,0,.16); }
.book.ghost {
  height: 21px; background: rgba(120,90,40,.05);
  border: 1px dashed rgba(120,90,40,.24); border-bottom: none;
  box-shadow: none;
}
@keyframes bookin {
  from { transform: translateY(9px) scaleY(.35); opacity: 0; }
  to   { transform: none; opacity: 1; }
}
.shelf-plank {
  height: 7px; margin-top: 2px; border-radius: 2px;
  background: linear-gradient(#c69c60, #a07640);
  box-shadow: 0 2px 5px rgba(120,90,40,.32), inset 0 1px 0 rgba(255,255,255,.25);
}

/* ---------- Collection : séries hebdo à collectionner (v40) ---------- */
.serie {
  margin: 8px 14px 14px; padding: 12px 12px 10px;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: 0 2px 8px rgba(27,36,64,.06);
}
.serie.full { border-color: var(--gold); box-shadow: 0 2px 12px rgba(232,183,90,.28); }
.serie-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 9px; }
.serie-th { font-weight: 800; font-size: 15px; }
.serie-cnt { font-size: 12px; font-weight: 700; color: var(--ink-soft); }
.serie.full .serie-cnt { color: var(--gold-deep); }
.serie-row {
  display: flex; gap: 7px; overflow-x: auto; padding-bottom: 4px;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.serie-row::-webkit-scrollbar { display: none; }
.ccard { flex: 0 0 auto; width: 62px; text-align: center; }
.cthumb {
  width: 62px; height: 82px; border-radius: 10px; margin: 0 auto;
  display: flex; align-items: center; justify-content: center;
  font-size: 24px; overflow: hidden; border: 1.5px solid var(--line);
  background: #f1ece2;
}
.cthumb img { width: 100%; height: 100%; object-fit: cover; }
.ccard.got .cthumb { border-color: var(--gold); background: #fff; box-shadow: inset 0 0 0 2px rgba(232,183,90,.3); }
.ccard.play .cthumb { border-color: var(--green); border-style: dashed; cursor: pointer; background: #eef6ea; }
.ccard.play { cursor: pointer; }
.ccard.lock .cthumb { opacity: .5; }
.ccard.miss .cthumb { opacity: .32; }
.csil { opacity: .6; }
.cph { font-size: 30px; }
.cday { font-size: 11px; font-weight: 700; margin-top: 3px; color: var(--ink-soft); }
.ccard.got .cday { color: var(--gold-deep); }
.ccard.play .cday { color: var(--green); }

/* ---------- Collection v41 : vitrine (album, n°, rareté, shiny, carte flip) ---------- */
.coll-sum {
  margin: 4px 14px 12px; padding: 10px 14px; border-radius: 12px;
  background: linear-gradient(120deg, #2a1f4d0f, #1f4d3a12);
  border: 1px solid var(--line); font-size: 14px; color: var(--ink-soft);
}
.coll-sum b { color: var(--ink); }

/* en-tête de série : couverture + méta + barre de progression */
.serie-top { display: flex; gap: 12px; margin-bottom: 10px; }
.serie-cov {
  flex: 0 0 auto; width: 54px; height: 72px; border-radius: 9px; overflow: hidden;
  border: 1.5px solid var(--line); background: #f1ece2;
  display: flex; align-items: center; justify-content: center; font-size: 26px;
}
.serie-cov img { width: 100%; height: 100%; object-fit: cover; }
.serie-cov.full { border-color: var(--gold); box-shadow: 0 0 0 2px rgba(232,183,90,.28); }
.serie-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; }
.serie-sub { font-size: 12px; color: var(--ink-soft); font-weight: 600; margin: 1px 0 6px; }
.serie-bar { height: 6px; background: rgba(27,36,64,.09); border-radius: 6px; overflow: hidden; }
.serie-bar i { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg, var(--gold), var(--green)); }
.serie.full .serie-bar i { background: var(--gold); }
.serie-meta .serie-cnt { margin-top: 5px; }

/* vignette : rareté (liseré haut) + n° (coin bas) + reflet shiny */
.cthumb { position: relative; }
.ccard.got .cthumb { border-color: var(--rar, var(--gold)); }
.crar { position: absolute; top: 0; left: 0; right: 0; height: 4px; z-index: 2; }
.cnum {
  position: absolute; bottom: 2px; right: 2px; z-index: 3;
  font-size: 8.5px; font-weight: 800; color: #fff; padding: 1px 4px;
  border-radius: 6px; background: rgba(20,26,48,.62);
}
.ccard.play .cnum { background: rgba(20,26,48,.42); }
.ccard.got.shiny .cthumb { box-shadow: 0 0 0 2px #fff, 0 0 11px rgba(150,205,255,.75); }

/* reflet holographique (shiny) — même effet en vignette et en grand */
.cshine, .cm-shine {
  position: absolute; inset: 0; z-index: 1; pointer-events: none; border-radius: inherit;
  background: linear-gradient(115deg, transparent 22%, rgba(255,255,255,.55) 40%,
    rgba(170,220,255,.5) 50%, rgba(255,190,235,.5) 60%, transparent 80%);
  background-size: 250% 250%; mix-blend-mode: screen;
  animation: holo 3.4s linear infinite;
}
@keyframes holo { 0% { background-position: 0% 0%; } 100% { background-position: 220% 220%; } }

/* carte plein écran à retourner */
.overlay.cardmodal { flex-direction: column; gap: 18px; }
.cm-persp { width: min(76vw, 280px); aspect-ratio: 3 / 4; perspective: 1200px; animation: rise .3s ease both; }
.cm-card {
  position: relative; width: 100%; height: 100%; cursor: pointer;
  transform-style: preserve-3d; transition: transform .6s cubic-bezier(.4,.2,.2,1);
}
.cm-card.flipped { transform: rotateY(180deg); }
/* flip BULLETPROOF iOS : la face non-visible passe opacity 0 AU MILIEU du flip
   (delay .3s = moitié du .6s, swap quand la carte est de profil = invisible) →
   le recto et ses enfants (n°/bandeau/nom) ne transpercent JAMAIS à l'envers,
   même quand backface-visibility déconne sur WebKit. */
.cm-front, .cm-back { transition: opacity 0s linear .3s; }
.cm-card.flipped .cm-front { opacity: 0; }
.cm-card:not(.flipped) .cm-back { opacity: 0; }
.cm-face {
  position: absolute; inset: 0; border-radius: 18px; overflow: hidden;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  border: 3px solid var(--rar, var(--gold)); box-shadow: 0 16px 46px rgba(0,0,0,.55);
}
/* iOS : les enfants absolus (bandeau/n°/nom) se créent leur propre couche 3D
   et transpercent À L'ENVERS au verso → forcer backface-hidden sur TOUS. */
.cm-face * { -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.cm-front { background: #0f1424; }
.cm-img { position: absolute; inset: 0; z-index: 0; }
.cm-img img { width: 100%; height: 100%; object-fit: cover; }
.cm-noimg { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 72px; background: #f1ece2; }
.cm-rib {
  position: absolute; top: 12px; left: 0; z-index: 2; color: #fff;
  font-size: 11px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase;
  padding: 3px 11px 3px 9px; border-radius: 0 9px 9px 0; box-shadow: 0 2px 6px rgba(0,0,0,.35);
}
.cm-num {
  position: absolute; top: 11px; right: 11px; z-index: 2; color: #fff;
  font-size: 13px; font-weight: 800; padding: 2px 9px; border-radius: 11px;
  background: rgba(15,20,36,.6);
}
.cm-name {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; color: #fff;
  font-family: Georgia, serif; font-size: 22px; font-weight: 700; text-align: center;
  padding: 30px 12px 14px; background: linear-gradient(transparent, rgba(0,0,0,.82));
}
.cm-back {
  transform: rotateY(180deg); background: linear-gradient(160deg, #232d4e, #3a2a5a);
  color: #fff; display: flex; flex-direction: column; justify-content: center;
  align-items: center; gap: 10px; padding: 24px 20px; text-align: center;
}
.cm-btheme { font-size: 12px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; color: var(--gold); }
.cm-bname { font-family: Georgia, serif; font-size: 24px; font-weight: 700; }
.cm-bfact { font-size: 14.5px; line-height: 1.5; opacity: .95; }
.cm-bmeta { font-size: 12px; opacity: .7; line-height: 1.5; margin-top: 2px; }
.cm-hint { font-size: 11px; opacity: .45; margin-top: 6px; }
.cm-close { background: rgba(255,255,255,.16); color: #fff; font-weight: 700; padding: 11px 28px; border-radius: 99px; }

/* révélation « ouverture de booster » : la carte gagnée pop + bandeau doré */
.overlay.cardmodal.reveal .cm-persp { animation: cardpop .7s cubic-bezier(.2,.85,.3,1.15) both; }
@keyframes cardpop {
  0% { opacity: 0; transform: scale(.55); }
  55% { opacity: 1; transform: scale(1.08); }
  100% { transform: scale(1); }
}
.cm-reveal-banner {
  position: fixed; top: 10%; left: 0; right: 0; text-align: center;
  color: var(--gold); font-weight: 800; font-size: 18px; letter-spacing: .4px;
  text-shadow: 0 2px 12px rgba(0,0,0,.6); z-index: 5; padding: 0 20px;
  animation: rise .45s ease both;
}

/* écran de fin : carte shiny = liseré holo */
.shinybox { border: 1.5px solid rgba(150,205,255,.7) !important; box-shadow: 0 0 14px rgba(150,205,255,.45); }

/* ─── Signalétique + classement par mode (v50, 22/07) ───────────────────────
   Alex : « il faut plus accompagner l'utilisateur sur les fonctionnalités
   qu'on met en place — ils ne savent pas eux comment fonctionne l'app ». */

/* bandeau « carte(s) à rattraper » : la fonctionnalité existait, elle ne se
   signalait que par un liseré vert de 62 px, sans un mot. */
.catchban { display: flex; align-items: center; gap: 10px; margin: 0 0 12px;
  padding: 10px 12px; border-radius: 12px; background: linear-gradient(120deg, #1f4d3a, #2a5a3f);
  color: #fff; box-shadow: 0 2px 10px rgba(0, 0, 0, .18); }
.cb-i { font-size: 20px; }
.cb-t { flex: 1; font-size: 13px; line-height: 1.35; }
.cb-s { display: block; font-size: 11px; opacity: .8; font-weight: 500; }
.cb-go { background: #fff; color: #1f4d3a; border: none; border-radius: 9px;
  padding: 8px 14px; font-size: 13px; font-weight: 800; cursor: pointer;
  touch-action: manipulation; }

/* règle du duel, écrite là où on la joue */
.rule-hint { font-size: 10.5px; color: var(--ink-soft); opacity: .85; margin-top: 5px; line-height: 1.35; }

/* état sous chaque vignette de collection */
.cst { font-size: 9.5px; font-weight: 700; margin-top: 1px; letter-spacing: .2px; }
.cst.play { color: var(--green); }
.cst.got { color: var(--gold-deep); }
.cst.lock, .cst.miss { color: var(--ink-soft); opacity: .6; font-weight: 600; }
.serie-note { font-size: 11px; color: var(--ink-soft); line-height: 1.45; padding: 8px 2px 2px; }

/* fenêtres temporelles du classement */
.winrow { display: flex; gap: 6px; padding: 4px 12px 10px; overflow-x: auto; }
.winbtn { flex: 0 0 auto; background: var(--card); color: var(--ink-soft); border: 1px solid var(--line);
  border-radius: 999px; padding: 7px 13px; font-size: 12.5px; font-weight: 700;
  cursor: pointer; touch-action: manipulation; }
.winbtn.on { background: var(--ink); color: #fff; border-color: var(--ink); }

/* un bloc par mode — jamais fusionnés : étages et fautes ne se comparent pas */
.rk { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  margin: 0 12px 12px; padding: 12px 13px; }
.rk-h { font-size: 15px; font-weight: 800; color: var(--ink); }
.rk-crit { font-size: 11px; color: var(--ink-soft); line-height: 1.45; margin: 3px 0 9px; }
.rk-empty { font-size: 12.5px; color: var(--ink-soft); font-style: italic; padding: 6px 0 2px; }
.rk-row { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-top: 1px solid var(--line); }
.rk-row.me { background: rgba(232, 183, 90, .1); margin: 0 -13px; padding-left: 13px; padding-right: 13px; }
.rk-row.off { opacity: .45; }
.rk-pos { width: 26px; text-align: center; font-size: 17px; font-weight: 800; color: var(--ink-soft); }
.rk-n { flex: 1; min-width: 0; font-size: 13.5px; color: var(--ink); line-height: 1.3; }
/* « > » indispensable : sans lui la règle attrape aussi le badge « toi »
   (imbriqué dans le <b>) et l'étale sur toute la largeur de la ligne. */
.rk-n > span { display: block; font-size: 10.5px; color: var(--ink-soft); font-weight: 500; }
.rk-you { display: inline-block; font-size: 9.5px; background: var(--gold); color: #fff;
  border-radius: 5px; padding: 1px 5px; vertical-align: middle; font-weight: 800; }
.rk-v { text-align: right; font-size: 13.5px; font-weight: 800; color: var(--ink); white-space: nowrap; }
.rk-med { display: block; font-size: 10px; letter-spacing: -1px; }

/* rappel du podium — 1× par jour, au premier lancement, tap n'importe où */
.pod-ov { position: fixed; inset: 0; z-index: 90; background: rgba(20, 26, 48, .62);
  display: flex; align-items: center; justify-content: center; padding: 24px;
  animation: podin .22s ease-out; }
@keyframes podin { from { opacity: 0 } to { opacity: 1 } }
.pod-card { background: var(--card); border-radius: 18px; padding: 20px 18px 16px;
  width: min(92vw, 330px); box-shadow: 0 14px 40px rgba(0, 0, 0, .3); text-align: center; }
.pod-h { font-size: 17px; font-weight: 800; color: var(--ink); }
.pod-sub { font-size: 11.5px; color: var(--ink-soft); margin: 2px 0 12px; }
.pod-row { display: flex; align-items: center; gap: 9px; padding: 6px 4px; border-radius: 9px; }
.pod-row.me { background: rgba(232, 183, 90, .16); }
.pod-p { font-size: 17px; width: 24px; }
.pod-n { flex: 1; text-align: left; font-size: 14px; font-weight: 700; color: var(--ink); }
.pod-v { font-size: 13px; font-weight: 800; color: var(--ink-soft); }
.pod-me { font-size: 12.5px; color: var(--ink-soft); margin: 11px 0 13px; line-height: 1.45; }
.pod-go { background: var(--ink); color: #fff; border: none; border-radius: 11px;
  padding: 11px 22px; font-size: 14px; font-weight: 800; width: 100%;
  cursor: pointer; touch-action: manipulation; }

/* explication de la médaille de fin de grille (22/07) : elle mesure le CHRONO,
   pas le duel. La question d'Alex — « pourquoi l'argent si je suis seul ? » —
   valait aveu que l'app ne le disait nulle part. */
.medal-note { font-size: 11.5px; color: var(--ink-soft); line-height: 1.45; margin: -2px 0 6px; }
.medal-note span { display: block; font-size: 10.5px; opacity: .72; margin-top: 1px; }

/* ─── Mode « manches » (v54) : validation de la grille entière ──────────────
   Clélia : c'est en se trompant qu'on découvre les mots. Plus de faute, plus de
   feu vert mot par mot — on remplit, on valide, ce qui est juste reste. */
.validwrap { padding: 4px 12px 0; }
.validbtn { width: 100%; background: var(--ink); color: #fff; border-radius: 12px;
  padding: 13px 10px; font-size: 15px; font-weight: 800; touch-action: manipulation;
  box-shadow: 0 2px 8px rgba(27, 36, 64, .18); }
.validbtn.off { background: var(--card); color: var(--ink-soft); font-weight: 600;
  border: 1px solid var(--line); box-shadow: none; font-size: 13.5px; }
.validbtn:active:not(.off) { transform: translateY(1px); }

/* bascule du modèle de validation, en tête du Mode libre */
.modesw { display: flex; gap: 6px; padding: 2px 12px 10px; }
.modesw button { flex: 1; background: var(--card); border: 1px solid var(--line);
  border-radius: 10px; padding: 9px 6px; font-size: 12px; font-weight: 700;
  color: var(--ink-soft); line-height: 1.3; touch-action: manipulation; }
.modesw button.on { background: var(--ink); color: #fff; border-color: var(--ink); }
.modesw button span { display: block; font-size: 10px; font-weight: 500; opacity: .75; }

/* vignette d'annonce du changement de règle */
.regleban { display: flex; align-items: flex-start; gap: 9px; margin: 0 0 12px;
  padding: 11px 12px; border-radius: 12px; background: linear-gradient(120deg, #3a2a5a, #5a3f2a);
  color: #fff; font-size: 12.5px; line-height: 1.45; box-shadow: 0 2px 10px rgba(0, 0, 0, .18); }
.regleban b { color: #ffd98a; }
.regleban .rb-x { background: rgba(255, 255, 255, .15); border: none; color: #fff;
  width: 26px; height: 26px; border-radius: 50%; font-size: 14px; flex: none;
  touch-action: manipulation; }