.dailybtn { background:linear-gradient(135deg, #ffcf5c, #ff9d4d); color:#3a2300 }
/* page Paquets : une scène sobre (paquet entouré de deux vraies cartes), le reste dans la colonne */
.pack-hero .kicker { font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#e7a53a; margin:0 0 6px }
.pack-hero .lead { max-width:440px; margin:6px auto 0; line-height:1.55 }
.stage { position:relative; width:max-content; margin:18px auto 20px }
.stage .pack { margin:0; z-index:1 }
.fanc { position:absolute; top:22px; width:120px; height:170px; border-radius:12px; padding:4px; overflow:hidden;
  background:linear-gradient(160deg, color-mix(in srgb, var(--t) 85%, #fff), var(--t) 50%, color-mix(in srgb, var(--t) 60%, #000));
  box-shadow:0 14px 30px rgba(0,0,0,.4); opacity:0; transition:opacity .5s, transform .5s }
.fanc img { width:100%; height:100%; object-fit:cover; object-position:50% 20%; border-radius:9px; display:block }
.fanc.l { left:-78px; transform:rotate(-13deg) translateX(10px) }
.fanc.r { right:-78px; transform:rotate(13deg) translateX(-10px) }
.fanc.in { opacity:.95 }
.fanc.l.in { transform:rotate(-13deg) } .fanc.r.in { transform:rotate(13deg) }
.packline { margin:10px 0 0; font-size:13.5px; color:var(--muted); font-variant-numeric:tabular-nums }
.packline b { color:var(--ink) }
.packhint { margin:4px 0 0; font-size:12.5px; color:var(--muted) }
.dailycard { display:flex; align-items:center; gap:12px; margin:6px auto 0; padding:10px 12px 10px 14px; border-radius:14px; width:100%; max-width:360px;
  text-align:left; background:linear-gradient(135deg, color-mix(in srgb, #ffcf5c 12%, var(--surface)), var(--surface));
  border:1px solid color-mix(in srgb, #ffb84d 35%, var(--line)) }
.dailycard .dtext { flex:1; min-width:0; display:grid; gap:3px }
.dailycard .dtext b { font-size:14.5px }
.pack-hero .dailycard .btn.dailybtn { min-width:0; min-height:34px; padding:6px 12px; font-size:13.5px; flex:none;
  background:transparent; color:#ffc65c; border:1px solid color-mix(in srgb, #ffb84d 70%, transparent) }
.pack-hero .dailycard .btn.dailybtn:hover { background:color-mix(in srgb, #ffb84d 14%, transparent) }
.days { display:flex; gap:4px; margin-top:3px }
.days span { width:19px; height:19px; flex:none; border-radius:50%; display:grid; place-items:center;
  font-size:10px; font-weight:700; color:var(--muted); background:var(--surface2); border:1px solid var(--line) }
.days span.on { background:linear-gradient(135deg, #ffcf5c, #ff9d4d); border-color:#ffb84d; color:#3a2300 }
.days span.today { border:1.5px dashed #ffb84d; color:#ffc65c }
.days span.gift { color:#ffc65c; border-color:color-mix(in srgb, #ffb84d 60%, var(--line)) }
.days span.gift.on { color:#3a2300 }
.dailycard .dn { font-size:12px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.pack-hero .promolink { margin-top:6px; font-size:12.5px; padding:4px 8px }
/* page Paquets : la scène, puis missions du jour et paquets ciblés */
.packpage { display:grid; gap:20px }
.pside { display:grid; gap:18px; align-content:start; width:100%; max-width:620px; margin:0 auto }
.pside h2 { margin:0 0 10px; font-size:16px }
.mission { display:grid; grid-template-columns:1fr auto; gap:6px 12px; align-items:center; padding:11px 12px;
  border-radius:12px; background:var(--surface); border:1px solid var(--line) }
.mission + .mission { margin-top:8px }
.mission .ml { font-weight:600; font-size:14px }
.mission .mr { font-size:12px; color:var(--muted); font-variant-numeric:tabular-nums }
.mission .xpbar { grid-column:1 / -1; height:5px }
.mission.done { border-color:color-mix(in srgb, var(--good) 55%, var(--line)) }
.mission.claimed { opacity:.55 }
.mission .btn { min-height:34px; padding:6px 12px; font-size:13px }
.mbonus { margin-top:10px; font-size:12.5px; color:var(--muted) }
.target { display:grid; grid-template-columns:1fr auto; gap:4px 12px; align-items:center; padding:10px 12px;
  border-radius:12px; background:var(--surface); border:1px solid var(--line) }
.target + .target { margin-top:8px }
.target .tn { font-weight:600; font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.target .tc { font-size:12px; color:var(--muted); font-variant-numeric:tabular-nums }
.target .btn { min-height:34px; padding:6px 12px; font-size:13px; grid-row:1 / span 2; grid-column:2 }
.target .prog { grid-column:1 }
.promolink { display:inline-flex; align-items:center; gap:6px; border:0; background:none; color:var(--muted); font-weight:600; cursor:pointer; padding:6px 10px;
  border-radius:10px; font-size:13.5px }
.promolink:hover { color:var(--ink); background:var(--surface2) }
.xpfloat { font-weight:800; color:var(--accent) }
.perks td:first-child { color:var(--muted) }
.perks tr.done td { color:var(--good) }
.target .tag { font-size:10.5px; font-weight:700; color:var(--accent); text-transform:uppercase; letter-spacing:.05em; margin-right:6px }

/* Accueil Paquets : la scène reste centrale, les actions sont regroupées autour d'elle. */
body:has(.packpage) { --pack-glow:rgba(108,71,226,.17); --pack-panel:color-mix(in srgb, var(--surface) 86%, var(--accent) 14%);
  background:radial-gradient(ellipse 55% 55% at 50% 37%, var(--pack-glow), transparent 75%), var(--bg) }
@media (prefers-color-scheme:dark) {
  body:has(.packpage) { --bg:#111119; --surface:#1b1b29; --surface2:#282838; --ink:#f5f3fb; --muted:#a8a6bc;
    --line:#343346; --accent:#9c83ff; --accent-ink:#fff; --pack-glow:rgba(91,48,203,.26);
    --pack-panel:#1b1b29 }
}
.packpage { gap:14px; min-width:0 }
.pack-hero { background:none; padding:0; min-width:0 }
.pack-hero .stage { margin:12px auto 18px }
.pack-hero .pack { margin:0; background:radial-gradient(circle at 55% 35%, #302294, #160b57 72%);
  border:1px solid #7456e8; box-shadow:0 0 0 2px #3523aa, 0 0 28px rgba(117,64,255,.66), 0 22px 54px rgba(46,21,117,.5) }
.pack-hero .pack::before { border-color:rgba(193,177,255,.72) }
.pack-hero .pack .w { border-color:#b8a3ff }
.pack-hero #open { width:min(100%, 320px); min-height:54px; font-size:16px; font-weight:750;
  background:linear-gradient(130deg, #957bff, #6742ef); color:#fff; border:1px solid rgba(199,184,255,.48);
  box-shadow:0 10px 28px rgba(85,48,196,.26) }
.pack-hero #open:hover:not(:disabled) { filter:brightness(1.08) }
.pack-hero #open .ico-svg:last-child { margin-left:auto }
.pack-hero #open .ico-svg:first-child { margin-right:auto }
.pack-hero .packline { color:var(--muted); font-size:14px }
.pack-hero .promolink { color:var(--accent); font-size:14px; font-weight:500 }
.pack-hero .packhint { font-size:12px; line-height:1.3 }
.pack-hero .dailycard .btn.dailybtn { color:#754700; border-color:#b77b18 }
@media (prefers-color-scheme:dark) {
  .pack-hero .dailycard .btn.dailybtn { color:#ffc65c; border-color:color-mix(in srgb, #ffb84d 70%, transparent) }
}
.section-title { display:flex; justify-content:space-between; align-items:center; gap:8px; margin-bottom:8px }
.section-title h2 { display:flex; align-items:center; gap:10px; margin:0; font-size:19px; letter-spacing:-.02em }
.section-title h2 .ico-svg, .section-title a { color:var(--accent) }
.section-title a { display:flex; align-items:center; gap:6px; font-size:12px; text-decoration:none; white-space:nowrap }
.pside { gap:14px; min-width:0 }
.mission { grid-template-columns:42px minmax(0,1fr) auto; gap:10px; padding:10px 12px; min-width:0;
  background:var(--pack-panel); border-color:var(--line) }
.mission + .mission { margin-top:6px }
.mission-icon { width:42px; height:42px; display:grid; place-items:center; border-radius:12px;
  color:var(--accent); background:color-mix(in srgb, var(--accent) 12%, var(--surface2)) }
.mission-copy { min-width:0 }
.mission .ml { font-size:13px; line-height:1.2 }
.mission .mr, .mission-count { font-size:11.5px; color:var(--muted); white-space:nowrap }
.mission .mr { margin-top:2px }
.mission .xpbar { height:4px; margin-top:6px }
.mission-count { font-variant-numeric:tabular-nums }
.mission .btn { min-height:30px; padding:5px 9px; font-size:11px }
.mbonus { display:flex; align-items:center; gap:9px; font-size:12px; margin-top:8px; padding:4px 2px }
.mbonus .ico-svg, .mbonus strong { color:var(--accent) }
.mbonus strong { font-weight:700 }
.pack-prefs { display:flex; align-items:center; gap:10px; min-width:0; padding:12px; border-radius:14px;
  background:var(--pack-panel); border:1px solid var(--line); color:var(--muted); font-size:12.5px }
.pack-prefs > .ico-svg { color:var(--accent) }
.pack-prefs > span { flex:1; min-width:0 }
.pack-prefs .linkbtn { color:var(--accent); font-size:inherit; font-weight:700 }
.target-info { font-size:11.5px; color:var(--muted); margin:-3px 0 8px }
.target { grid-template-columns:44px minmax(0,1fr) auto; gap:1px 10px; padding:9px; min-width:0; background:var(--pack-panel) }
.target-icon { grid-row:1 / span 2; width:44px; height:44px; border-radius:10px; display:grid; place-items:center;
  background:color-mix(in srgb, var(--accent) 13%, var(--surface2)); color:var(--accent) }
.target .tn { font-size:12.5px; min-width:0 }
.target .tc { grid-column:2; font-size:11px }
.target .btn { grid-column:3; min-height:32px; padding:5px 10px; font-size:11px }
.pack-extra > .extra-toggle { display:none }
@media (max-width:1023px) {
  .packpage { max-width:620px; margin:auto; gap:7px }
  .packpage .pside { display:contents }
  #missions { order:2 }
  .weekly-extra { order:3 }
  .targets-extra { order:4 }
  .pack-prefs { order:5 }
  .pack-hero { order:1 }
  .pack-hero .pack { width:clamp(126px, 16dvh, 165px); height:auto; aspect-ratio:19/27 }
  .pack-hero:not(:has(.dailycard)) .pack { width:clamp(145px, 19dvh, 180px) }
  .pack-hero .pack .w { width:48%; height:auto; aspect-ratio:1; font-size:clamp(35px, 5dvh, 46px) }
  .pack-hero .pack .lbl { bottom:9% }
  .pack-hero .stage { margin:2px auto 6px }
  .packpage .fanc { width:50%; height:auto; aspect-ratio:96/136; top:11% }
  .packpage .fanc.l { left:-30% } .packpage .fanc.r { right:-30% }
  .packpage .dailycard { margin:0 auto 2px; padding:6px 9px; min-height:52px }
  .packpage .dailycard .days { display:none }
  .packpage .dailycard .dn { font-size:11px }
  .pack-hero #open { min-height:44px }
  .pack-hero .packline { margin-top:4px; font-size:12px }
  .pack-hero .packhint { margin-top:1px; font-size:11px }
  .pack-hero .promolink { margin:1px 0; padding:2px 8px }
  .section-title { margin-bottom:4px }
  .section-title h2 { font-size:16px }
  .mission { padding:5px 8px; gap:7px }
  .mission + .mission { margin-top:4px }
  .mission-icon { width:31px; height:31px }
  .mission-icon .ico-svg { width:18px; height:18px }
  .mission { grid-template-columns:31px minmax(0,1fr) auto }
  .mission .ml { font-size:11.5px; line-height:1.15 }
  .mission .mr, .mission-count { font-size:10px }
  .mission .xpbar { margin-top:3px }
  .mbonus { font-size:10.5px; margin-top:3px; padding:0 2px }
  .pack-prefs { padding:7px 9px; font-size:11px }
  .pack-extra > .extra-toggle { padding:2px 4px }
  .pack-extra > .extra-toggle { display:flex; align-items:center; gap:8px; width:100%; border:0; background:none;
    cursor:pointer; color:var(--accent); font-size:12px; padding:5px 4px }
  .pack-extra > .extra-toggle .ico-svg:last-child { margin-left:auto; transition:transform .2s }
  .pack-extra.expanded > .extra-toggle .ico-svg:last-child { transform:rotate(90deg) }
  .pack-extra > section { display:none; margin-top:6px }
  .pack-extra.expanded > section { display:block }
}

/* Les téléphones hauts peuvent montrer des cartes et des missions plus grandes. */
@media (max-width:600px) and (min-height:880px) {
  .packpage { gap:10px }
  .pack-hero .pack { width:clamp(180px, 19dvh, 205px) }
  .pack-hero:not(:has(.dailycard)) .pack { width:clamp(190px, 21dvh, 215px) }
  .pack-hero .stage { margin:5px auto 10px }
  .pack-hero #open { min-height:52px; font-size:17px }
  .pack-hero .packline, .pack-hero .promolink { font-size:14px }
  .section-title h2 { font-size:19px }
  .mission { padding:8px 10px; gap:9px; grid-template-columns:36px minmax(0,1fr) auto }
  .mission-icon { width:36px; height:36px }
  .mission .ml { font-size:13px }
  .mission .mr, .mission-count { font-size:11px }
  .mbonus, .pack-extra > .extra-toggle, .pack-prefs { font-size:12px }
  .pack-prefs { padding:10px }
}

/* Téléphone et tablette : la page Paquets et l'ouverture d'un paquet occupent toute la hauteur utile (entre la
   barre du haut, mesurée par app.js, et les onglets). Page Paquets : le paquet au centre de l'espace libre, les
   missions en bas. Ouverture : la zone des boutons et du tri est réservée d'avance en bas, les cartes sont centrées
   dans le reste ; elles ne bougent donc plus quand le tri et les boutons apparaissent. */
@media (max-width:1023px) {
  .packpage { display:flex; flex-direction:column;       /* (2 px de marge : arrondis des hauteurs) */
    min-height:calc(100dvh - var(--top-h, 56px) - 16px - 98px - var(--safe-b)) }
  .packpage { justify-content:space-evenly }
  body:has(#packResult) main { padding-bottom:var(--tabs-h, 69px) }
  #packResult .rstage { display:flex; flex-direction:column;
    min-height:calc(100dvh - var(--top-h, 56px) - 16px - var(--tabs-h, 69px)) }
  #packResult .reveal { margin-block:auto }
  #packResult .ractions { min-height:64px; padding-bottom:8px; display:flex; flex-direction:column; justify-content:flex-end }
  #packResult .ractions .row { margin-top:10px !important }
}
@media (max-width:559px) {
  /* L'image un peu moins haute et les marqueurs absents ne prennent plus de place : les cartes restent larges. */
  #packResult .reveal .card .art { aspect-ratio:1.08 }
  #packResult .reveal .stag.empty { display:none }
  #packResult { --reveal-reserve:390px }
  #packResult:has(.reveal .stag:not(.empty)) { --reveal-reserve:410px }
  #packResult.is-targeted { --reveal-reserve:430px }
  #packResult:has(#finish:not([hidden])) { --reveal-reserve:414px }
  #packResult:has(#finish:not([hidden])):has(.reveal .stag:not(.empty)) { --reveal-reserve:435px }
  #packResult.is-targeted:has(#finish:not([hidden])) { --reveal-reserve:435px }
  #packResult .reveal { width:min(100%, max(150px, calc((100dvh - var(--top-h, 56px) - var(--tabs-h, 69px) - var(--reveal-reserve)) * 2)));
    align-self:center }
  #packResult .ractions .sortbar { margin-top:10px }
}
@media (max-width:559px) and (max-height:600px) {
  #packResult h1 { font-size:20px; margin:0 }
  #packResult #hint { font-size:12px; margin:4px 0 }
}
@media (min-width:1024px) {
  #packResult .rstage, #packResult .ractions { display:contents }
}

/* Téléphone : trois tuiles sous le paquet (missions, paquets ciblés, envies) à la place des listes ; le détail
   s'ouvre dans une fenêtre. Ordinateur : la colonne de droite garde tout, les tuiles sont masquées. */
.pdock { display:none }
@media (max-width:1023px) {
  .packpage #missions, .packpage .weekly-extra, .packpage .targets-extra, .packpage .pack-prefs { display:none }
  .pdock { order:2; display:grid; grid-template-columns:repeat(var(--n, 3), minmax(0, 1fr)); gap:8px }
  .ptile { position:relative; display:flex; flex-direction:column; align-items:center; gap:3px; padding:12px 6px 10px;
    border-radius:14px; border:1px solid var(--line); background:var(--pack-panel, var(--surface)); color:var(--ink);
    font:inherit; cursor:pointer; min-width:0 }
  .ptile .ico-svg { margin:0 0 2px; color:var(--accent) }
  .ptile .pt { font-size:13px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100% }
  .ptile .ps { font-size:11.5px; color:var(--muted); white-space:nowrap }
  .ptile.hot { border-color:color-mix(in srgb, var(--accent) 60%, var(--line)) }
  .ptile.hot .ps { color:var(--accent); font-weight:700 }
  .ptile .dot { position:absolute; top:6px; right:8px; min-width:18px; height:18px; padding:0 5px; border-radius:9px;
    background:var(--bad); color:#fff; font-size:11px; font-weight:700; line-height:18px }
}
.dock-sheet .section-title { margin-top:0 }

/* paquets ciblés : miniature de la plus célèbre carte déjà découverte de la série */
.target-icon.cover { padding:0; overflow:hidden; box-shadow:0 0 0 1.5px var(--t) }
.target-icon.cover img { width:100%; height:100%; object-fit:cover; object-position:center 20%; display:block }

/* sous « Ouvrir un paquet » : une seule ligne discrète ; le nombre de paquets est une pastille sur le paquet */
.pack-hero .packline { color:var(--muted); font-weight:400 }
.pack-hero .packline .linkbtn.openall { margin:0; font-size:inherit; font-weight:600; color:var(--accent) }
.pack .pcount { position:absolute; top:-9px; right:-9px; z-index:3; min-width:30px; height:30px; padding:0 8px;
  border-radius:15px; display:grid; place-items:center; background:#fff; color:#2a1d7a; font-size:14px; font-weight:800;
  box-shadow:0 4px 14px rgba(0,0,0,.35) }

/* confirmation d'un paquet ciblé */
.tgname { margin:-6px 0 10px; font-weight:700; color:var(--s-target, var(--accent)) }
.tgcomp { display:flex; flex-wrap:wrap; gap:6px; margin-top:12px }
.tgcomp .sec-t { width:100% }
.tgcomp small { opacity:.8 }
.tgchance { margin:12px 0 0 }