/* DA « néon japonais » (octobre 2026) : une ruelle de Tokyo la nuit. Fond presque noir, enseignes au néon rouge
   et cyan, un peu d'ambre ; titres qui brillent comme des tubes, petits libellés en Dela Gothic One, et des
   enseignes 3D qui flottent doucement (assets/props, rendues depuis les modèles fournis). Posée par-dessus
   styles.css sans changer la mise en page ; les cartes et les sachets gardent leur style.
   Pour revenir en arrière : retirer la ligne da.css de index.html (l'ancienne version violette est dans .cache). */

:root {
  --n-bg: #07070b;
  --n-panel: rgba(13, 13, 19, .86);
  --n-line: rgba(255, 255, 255, .085);
  --n-red: #ff3355;
  --n-red-soft: #ff8095;
  --n-cyan: #2fe6ff;
  --n-amber: #ffb648;
  --n-jp: "Dela Gothic One", "Archivo", ui-sans-serif, sans-serif;
  --n-glow-red: 0 0 6px rgba(255, 51, 85, .55), 0 0 22px rgba(255, 51, 85, .28);
  --n-glow-cyan: 0 0 6px rgba(47, 230, 255, .5), 0 0 20px rgba(47, 230, 255, .22);
  --n-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Fond : la nuit, deux halos d'enseignes très loin (rouge en haut, cyan en bas) et un grain léger. */
html {
  background:
    var(--n-grain),
    radial-gradient(40% 32% at 8% 0%, rgba(255, 51, 85, .13), transparent 72%),
    radial-gradient(38% 34% at 96% 100%, rgba(47, 230, 255, .1), transparent 72%),
    radial-gradient(30% 25% at 88% 12%, rgba(255, 182, 72, .05), transparent 70%),
    var(--n-bg);
  background-attachment: fixed;
}
body { background: transparent; }

/* Petits libellés : la police des enseignes. */
.eyebrow { font-family: var(--n-jp); font-weight: 400; letter-spacing: .14em; color: var(--n-red-soft); }

/* Grands titres : un tube de néon blanc rosé, avec son nom japonais au-dessus. */
.stage-title, .page-title {
  color: #fff4f6;
  text-shadow: 0 0 2px #fff, 0 0 10px rgba(255, 51, 85, .75), 0 0 30px rgba(255, 51, 85, .45);
}
.stage-title em { color: var(--n-cyan); text-shadow: 0 0 2px #fff, 0 0 10px rgba(47, 230, 255, .8), 0 0 28px rgba(47, 230, 255, .4); }
.page-title::before {
  display: block; margin-bottom: .45rem;
  font: 400 .78rem/1 var(--n-jp); letter-spacing: .38em;
  color: var(--n-cyan); text-shadow: var(--n-glow-cyan);
}
#view-collection .page-title::before { content: "コレクション"; }
#view-defis .page-title::before { content: "チャレンジ"; }
#view-boutique .page-title::before { content: "ショップ"; }
#view-marche .page-title::before { content: "マーケット"; }
#view-classement .page-title::before { content: "ランキング"; }

/* Barre du haut : la nuit, un fil de néon rouge puis cyan dessous. */
.topbar { background: rgba(7, 7, 11, .82); border-bottom: 0; }
.topbar::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--n-red) 20%, var(--n-red) 45%, var(--n-cyan) 70%, transparent);
  box-shadow: 0 0 10px rgba(255, 51, 85, .45);
}
.tabs a[aria-current="page"], .dock .tabs > a[aria-current="page"] {
  background: transparent !important; color: #fff !important; text-shadow: 0 0 8px rgba(255, 51, 85, .85);
}
.tabs a[aria-current="page"] svg, .dock .tabs > a[aria-current="page"] svg { color: var(--n-red-soft) !important; opacity: 1; filter: drop-shadow(0 0 4px rgba(255, 51, 85, .8)); }
/* La pastille qui glisse sous l'onglet ouvert : un cadre de néon rouge au lieu de l'or. */
.dock .tab-ink { background: rgba(255, 51, 85, .13) !important; box-shadow: inset 0 0 0 1px rgba(255, 51, 85, .6), 0 0 16px rgba(255, 51, 85, .28) !important; }
@media (max-width: 860px) {
  .dock .tabs > a[aria-current="page"] { background: rgba(255, 51, 85, .12) !important; box-shadow: inset 0 0 0 1px rgba(255, 51, 85, .5); }
}

/* Panneaux : du verre fumé, bordés d'un fil cyan à peine allumé. */
.home-card, .stage, .frame, .filters {
  border: 1px solid var(--n-line);
  background: linear-gradient(180deg, rgba(255, 255, 255, .025), transparent 40%), var(--n-panel);
  box-shadow: 0 0 0 1px rgba(47, 230, 255, .05), 0 18px 50px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .04);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.home-card { border-radius: .7rem; }
/* En-tête des panneaux de l'accueil : un bandeau d'enseigne, avec son kanji à droite. */
.home-progress > .eyebrow:first-child, .home-streak > .streak-top {
  position: relative; display: flex; align-items: center; gap: .5rem;
  margin: -1.1rem -1.15rem .25rem; padding: .62rem 3.3rem .58rem 1.15rem;
  border-bottom: 1px solid rgba(255, 51, 85, .28);
  background: linear-gradient(90deg, rgba(255, 51, 85, .14), rgba(255, 51, 85, .03) 70%);
  color: var(--n-red-soft); font-size: .72rem; text-shadow: 0 0 8px rgba(255, 51, 85, .5);
}
.home-streak > .streak-top .eyebrow { color: inherit; font-size: inherit; }
.home-progress > .eyebrow:first-child::after, .home-streak > .streak-top::after {
  position: absolute; right: .85rem; top: 50%; translate: 0 -50%;
  font: 400 .9rem/1 var(--n-jp); color: var(--n-cyan); text-shadow: var(--n-glow-cyan); letter-spacing: 0;
}
.home-progress > .eyebrow:first-child::after { content: "収集"; }
.home-streak > .streak-top::after { content: "毎日"; }
.home-streak > .streak-top .streak-of { margin-left: auto; border-color: rgba(255, 128, 149, .45); color: var(--n-red-soft); font-family: var(--n-jp); font-weight: 400; }

/* Barres de progression : un tube cyan allumé. */
.track { height: 6px !important; border-radius: 99px !important; background: rgba(255, 255, 255, .07); }
.track i { border-radius: 99px !important; background: linear-gradient(90deg, #1aa9c2, var(--n-cyan)) !important; box-shadow: var(--n-glow-cyan); }

/* Bouton principal : une enseigne rouge allumée. */
.btn.btn-primary {
  border: 1px solid rgba(255, 170, 185, .7); border-radius: .5rem;
  background: linear-gradient(180deg, #ff5a74, #e3203f);
  color: #fff;
  box-shadow: 0 0 0 1px rgba(255, 51, 85, .35), 0 0 18px rgba(255, 51, 85, .4), inset 0 1px 0 rgba(255, 255, 255, .35);
  text-shadow: 0 1px 0 rgba(120, 0, 20, .35);
  transition: box-shadow .2s ease, transform .12s ease;
}
.btn.btn-primary:hover:not(:disabled) { box-shadow: 0 0 0 1px rgba(255, 51, 85, .5), 0 0 30px rgba(255, 51, 85, .6), inset 0 1px 0 rgba(255, 255, 255, .4); }
.btn.btn-primary:active:not(:disabled) { transform: translateY(1px); }
.btn.btn-primary small, .btn.btn-primary .btn-sub { color: rgba(255, 255, 255, .78); }
.btn:not(.btn-primary) { border-color: var(--n-line); }

/* Choix du booster : la licence choisie s'allume en cyan. */
.pu-tabs button, .pu-games button { border-color: var(--n-line); }
.pu-tabs button[aria-pressed="true"], .pu-games button[aria-pressed="true"], .qty button[aria-pressed="true"] {
  border-color: rgba(47, 230, 255, .6); background: rgba(47, 230, 255, .07); color: #fff;
  box-shadow: 0 0 14px rgba(47, 230, 255, .18), inset 0 0 12px rgba(47, 230, 255, .06);
}
.free-badge, .pick-universe .free-badge { background: var(--n-red) !important; color: #fff !important; box-shadow: 0 0 10px rgba(255, 51, 85, .55); }
.perk { border-color: var(--n-line); }
.perk.perk-ready { border-color: rgba(255, 51, 85, .55); box-shadow: 0 0 14px rgba(255, 51, 85, .2); }

/* Récompense du jour : les jours faits en cyan, celui du jour en rouge allumé, le 7e en ambre. */
.streak-track::after { background: var(--n-cyan); box-shadow: var(--n-glow-cyan); z-index: 0; }
.sd-dot { background-color: #0f1017; }
.sd.is-done .sd-dot { border-color: rgba(47, 230, 255, .55); background: #0d1a20; color: var(--n-cyan); box-shadow: 0 0 10px rgba(47, 230, 255, .18); }
.sd.is-today .sd-dot { border-color: rgba(255, 180, 192, .85); background: linear-gradient(180deg, #ff5a74, #e3203f); color: #fff; box-shadow: 0 0 0 4px rgba(255, 51, 85, .14), 0 0 22px rgba(255, 51, 85, .55); }
.sd.is-big:not(.is-done):not(.is-today) .sd-dot { border-color: rgba(255, 182, 72, .6); color: var(--n-amber); background: radial-gradient(circle at 50% 35%, rgba(255, 182, 72, .16), transparent 70%), #0f1017; box-shadow: 0 0 12px rgba(255, 182, 72, .2); }
.streak-title span { color: var(--n-red-soft); }
.guarantee-ring { background: radial-gradient(closest-side, #0e0e15 76%, transparent 78% 100%), conic-gradient(var(--c) calc(var(--p) * 1%), rgba(255, 255, 255, .08) 0); }

/* Fenêtres, notifications, barre d'onglets du téléphone. */
.sheet, .detail, dialog.sheet { border: 1px solid var(--n-line); border-top: 2px solid var(--n-red); background-color: #0d0d13; box-shadow: 0 -2px 18px rgba(255, 51, 85, .25), 0 24px 80px rgba(0, 0, 0, .6); }
.toast { border: 1px solid var(--n-line); border-left: 3px solid var(--n-cyan); background: #0d0d13; }
.toast-gold { border-left-color: var(--n-red); }
.toast strong, .toast-gold strong { color: #fff; }
@media (max-width: 860px) {
  .dock .tabs { background: rgba(7, 7, 11, .94) !important; box-shadow: 0 -1px 0 rgba(255, 51, 85, .55), 0 -8px 24px rgba(255, 51, 85, .08) !important; }
}

/* Enseignes 3D qui flottent : posées dans les coins vides, elles ne captent jamais le clic. */
.prop { position: absolute; z-index: 3; height: auto; pointer-events: none; user-select: none; animation: prop-float 7s ease-in-out infinite; }
.prop-skate { --tilt: -4deg; filter: drop-shadow(0 18px 24px rgba(0, 0, 0, .55)) drop-shadow(0 0 22px rgba(47, 230, 255, .14)); }
.prop-manga { --tilt: 3deg; filter: drop-shadow(0 16px 22px rgba(0, 0, 0, .5)) drop-shadow(0 0 26px rgba(255, 51, 85, .4)); animation-duration: 8.5s; animation-delay: -2s; }
@keyframes prop-float {
  0%, 100% { transform: translateY(0) rotate(var(--tilt)); }
  50% { transform: translateY(-12px) rotate(calc(var(--tilt) * -.4)); }
}
.page-head { position: relative; }
/* Les enseignes des pages flottent dans la marge de gauche, à côté du titre : jamais par-dessus le contenu.
   Sans assez de marge (écran étroit), elles ne s'affichent pas. */
.page-head .prop { right: calc(100% + 1.6rem); top: -1.2rem; }
.page-head .prop-skate { width: 150px; }
.page-head .prop-manga { width: 66px; }
@media (max-width: 1749px) { .page-head .prop { display: none; } }
.atelier { position: relative; }
/* Accrochée au coin haut gauche du panneau d'invocation, à cheval sur son bord. */
.atelier > .prop-manga { left: -30px; right: auto; top: 2.6rem; width: 62px; }
@media (max-width: 860px) { .atelier > .prop-manga { display: none; } }
.atelier > .prop-manga { top: -.4rem; }
@media (prefers-reduced-motion: reduce) { .prop, .btn.btn-primary { animation: none; transition: none; } }

/* Le nombre de boosters (×2, ×5…) : une simple pastille rouge, nette, sans halo baveux. */
.pack-count {
  top: -.7rem; right: -.7rem; min-width: 0; padding: .32rem .62rem .36rem .52rem;
  border: 0; border-radius: 999px; background: var(--n-red); color: #fff;
  font: 400 1.05rem/1 var(--n-jp); letter-spacing: .02em; text-shadow: none;
  box-shadow: 0 0 0 3px var(--n-bg), 0 6px 16px rgba(255, 51, 85, .45);
  rotate: 0deg;
}
.pack-count small { font-size: .7em; color: rgba(255, 255, 255, .8); }
.pack-count::after { display: none; }

/* Titres : la police des enseignes japonaises (Dela Gothic One) au lieu du romain classique. */
.stage-title, .page-title, .streak-title, .home-daily-title, .rail-title, .card-title, .sheet h2, .home-count strong {
  font-family: var(--n-jp); font-weight: 400; letter-spacing: 0;
}
.stage > .stage-title { font-size: clamp(2.6rem, 5.6cqi, 4.4rem); line-height: 1.02; }
.page-title { font-size: clamp(2.1rem, 4.2vw, 3.3rem); line-height: 1.05; }
.streak-title { font-size: 1.25rem; }
.home-daily-title { font-size: 1.2rem; }
.home-count strong { font-size: 2.3rem; }
@media (max-width: 860px) {
  .stage > .stage-title { font-size: clamp(2.3rem, 11vw, 3.4rem); }
  .page-title { font-size: clamp(1.9rem, 9vw, 2.7rem); }
}

/* Pastilles de notification (défis, échanges) : rondes, en néon rouge. L'anneau qui pulse était carré. */
.badge { border-radius: 999px !important; background: var(--n-red) !important; color: #fff !important; border-color: #0b0b10 !important; box-shadow: 0 0 10px rgba(255, 51, 85, .6) !important; }
.badge:not([hidden])::after { border-radius: 999px !important; border-color: var(--n-red) !important; }

/* ---------- Téléphone ---------- */
@media (max-width: 600px) {
  /* Le compagnon, plus petit : il gêne moins les boutons. */
  .companion { width: 78px !important; height: 96px !important; }
  /* Défis compacts : petit éventail, nom et récompense sur une ligne, progression dessous. */
  .defi summary {
    grid-template-columns: 56px minmax(0, 1fr) auto !important;
    grid-template-areas: "art name reward" "art prog prog" "art act act";
    gap: .25rem .7rem; padding: .7rem .8rem !important; align-items: center;
  }
  .defi-art { grid-area: art; width: 56px; height: 46px; align-self: center !important; }
  .defi-art img { width: 30px; height: 43px; }
  .defi-art img:nth-child(2) { left: 8px; } .defi-art img:nth-child(3) { left: 16px; } .defi-art img:nth-child(4) { left: 24px; }
  .defi-name { grid-area: name; min-width: 0; }
  .defi-name strong { font-size: .92rem; line-height: 1.2; }
  .defi-name span { font-size: .64rem; }
  .defi-progress { grid-area: prog; display: flex !important; align-items: center; gap: .55rem; }
  .defi-progress .track { flex: 1; }
  .defi-count { font-size: .76rem; white-space: nowrap; }
  .defi-reward { grid-area: reward; font-size: .78rem; }
  .defi summary > .claim, .defi summary > .defi-state { grid-area: act; justify-self: start; }
  /* Titres un peu moins hauts, pour voir le contenu plus vite. */
  .page-head { margin-bottom: .9rem; padding-bottom: .8rem; }
  .page-title::before { font-size: .66rem; margin-bottom: .3rem; }
  /* Cartes de l'accueil : un peu moins de marge intérieure. */
  .home-card { padding: 1rem .95rem 1.05rem; }
  .home-progress > .eyebrow:first-child, .home-streak > .streak-top { margin: -1rem -.95rem .2rem; padding-left: .95rem; }
  .sd-dot { width: 1.85rem; height: 1.85rem; }
  .sd.is-big .sd-dot { width: 2.2rem; height: 2.2rem; }
  .streak-track::before, .streak-track::after { top: calc(.925rem - 1px); }
  /* Rien ne doit se cacher sous la barre d'onglets du bas. */
  main { padding-bottom: calc(7rem + env(safe-area-inset-bottom, 0px)) !important; }
}

/* Texte courant : Zen Kaku Gothic New, une linéale japonaise nette, au lieu d'Archivo. */
:root { --ui: "Zen Kaku Gothic New", "Archivo", ui-sans-serif, system-ui, sans-serif; }
body { font-family: var(--ui); }

/* Ouverture d'un booster : pétales de sakura qui tombent, fondus sur le fond (le noir de la vidéo disparaît). */
.opening { isolation: isolate; }
.opening-bg {
  position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover;
  mix-blend-mode: screen; opacity: .3; pointer-events: none;
  filter: saturate(.85) brightness(.9);
  -webkit-mask-image: radial-gradient(70% 70% at 50% 45%, transparent 18%, #000 70%); mask-image: radial-gradient(70% 70% at 50% 45%, transparent 18%, #000 70%);
}
@media (prefers-reduced-motion: reduce) { .opening-bg { display: none; } }

/* Téléphone, accueil : tout l'essentiel (sachet, quantité, Invoquer) tient sur le premier écran. */
@media (max-width: 860px) {
  /* Dans le navigateur, pas de double marge pour l'encoche : elle ne sert qu'à l'appli installée. */
  .topbar.dock { margin-top: .4rem !important; }
  .stage > .booster-pack { width: min(158px, 42vw, 22svh) !important; margin: .1rem auto 0 !important; }
  .stage > .stage-title { font-size: clamp(2rem, 9.5vw, 2.6rem) !important; margin-top: .1rem !important; }
  .stage > .lede { font-size: .88rem; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .stage { padding-top: 1rem !important; padding-bottom: 1rem !important; gap: .55rem !important; }
  .pick-universe { gap: .45rem; }
  .pu-tabs button { min-height: 3.1rem; padding-block: .45rem; }
}
@media (max-width: 860px) and (display-mode: standalone) {
  .topbar.dock { margin-top: calc(.4rem + env(safe-area-inset-top)) !important; }
}
/* Sur téléphone, le sachet à gauche et, à côté, la quantité et le bouton Invoquer : tout tient d'un coup d'œil. */
@media (max-width: 860px) {
  .stage {
    display: grid !important; grid-template-columns: minmax(0, 44%) minmax(0, 1fr);
    column-gap: .9rem; row-gap: .6rem; align-items: center;
  }
  .stage { grid-template-areas: none !important; grid-template-rows: none !important; }
  .stage > * { grid-area: auto !important; grid-column: 1 / -1 !important; order: 0 !important; }
  .stage > .booster-pack { grid-column: 1 !important; grid-row: span 3 !important; width: 100% !important; max-width: 170px; margin: 0 auto !important; align-self: center; }
  .stage > .qty { grid-column: 2 !important; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .4rem; justify-content: stretch; align-self: end; }
  .stage > .qty button { min-width: 0; width: 100%; }
  .stage > .btn.btn-primary, .stage > .empty-actions { grid-column: 2 !important; width: 100% !important; min-width: 0 !important; justify-self: stretch; align-self: center; min-height: 3.4rem; padding-inline: .6rem; }
  .stage > .empty-actions { display: grid; gap: .4rem; }
  .stage > .stock-note { grid-column: 2 !important; align-self: start; text-align: left !important; font-size: .74rem; line-height: 1.35; margin: 0; }
  .stage > .lede { -webkit-line-clamp: 3; max-width: none; }
  .stage > .pick-universe, .stage > .perks { width: 100%; }
}
.ward-thumb[data-thumb="masque-anbu"], .ward-thumb[data-thumb="faux-hidan"], .ward-thumb[data-thumb="kubikiribocho"] { background-size: contain !important; background-origin: content-box; padding: 12%; background-repeat: no-repeat !important; background-position: center !important; }

/* Barre du haut : énergie, essence et compte en jetons sombres, chacun avec son fil de néon. */
.dock .pill, .dock .account-me {
  border: 1px solid rgba(255, 255, 255, .09); background: rgba(10, 10, 15, .7);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
}
.dock .pill:hover, .dock .account-me:hover { background: rgba(18, 18, 26, .85); }
.dock .pill strong { font: 400 1.08rem/1 var(--n-jp); letter-spacing: .02em; color: #fff; }
.dock .pill .pill-timer { color: rgba(255, 128, 149, .75); font: 500 .7rem/1 var(--ui); }
.dock .pill-stock { border-color: rgba(255, 51, 85, .32); }
.dock .ring-bg { stroke: rgba(255, 51, 85, .16); }
.dock .ring-fg { stroke: var(--n-red); filter: drop-shadow(0 0 3px rgba(255, 51, 85, .8)); }
.dock .pill-stock .ico-energy { background: #ff8095; filter: drop-shadow(0 0 3px rgba(255, 51, 85, .9)); }
.dock .pill-essence { border-color: rgba(47, 230, 255, .3); padding-left: .55rem; }
.dock .pill-essence .ico-essence {
  width: 1.05rem; height: 1.05rem; border-radius: 0; background: none; box-shadow: none;
}
.dock .pill-essence .ico-essence::after {
  inset: 0; background: var(--n-cyan); clip-path: polygon(50% 0, 100% 40%, 50% 100%, 0 40%);
  filter: drop-shadow(0 0 4px rgba(47, 230, 255, .9));
}
.dock .account-me .avatar { box-shadow: 0 0 0 1.5px rgba(255, 51, 85, .6); }
.dock .account-me strong, .dock .account-name { font-family: var(--ui); font-weight: 700; }
@media (max-width: 860px) {
  .dock .pill-essence .ico-essence { width: .95rem; height: .95rem; }
}

/* Derniers gros tirages : une vraie fenêtre, avec ses marges intérieures et des lignes centrées. */
.atelier-feed .rail-block {
  padding: 1.15rem 1.3rem 1.2rem; border: 1px solid var(--n-line); border-radius: .7rem;
  background: linear-gradient(180deg, rgba(255, 255, 255, .025), transparent 40%), var(--n-panel);
}
.atelier-feed .feed li { align-items: center; }
.atelier-feed .feed-card img { border-radius: .3rem; }
.atelier-feed .text-btn { display: inline-block; margin-top: .4rem; color: var(--n-red-soft); }

/* Un très léger néon rouge autour de tous les blocs. */
.home-card, .stage, .frame, .filters, .atelier-feed .rail-block, .defi, .shop-pack, .profile-block {
  border-color: rgba(255, 51, 85, .22) !important;
  box-shadow: 0 0 0 1px rgba(255, 51, 85, .06), 0 0 18px rgba(255, 51, 85, .08), 0 18px 50px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255, 255, 255, .04) !important;
}

/* Chiffres : Dela Gothic dessine le 0 comme un O et le 1 comme un I. Les nombres prennent la linéale, en gras. */
.dock .pill strong, .home-count strong, .opening-tools .pill strong, .guarantee-ring strong, .pack-count {
  font-family: var(--ui) !important; font-weight: 900 !important; font-variant-numeric: tabular-nums; letter-spacing: -.01em;
}
.dock .pill strong { font-size: 1.15rem; }
.home-count strong { font-size: 2.5rem; }

/* ---------- Boosters Kaïra thématiques : le même sachet doré, recoloré pour chacun. ---------- */
.pack-g-kai.pack-k-shonen > .pack-img { filter: hue-rotate(-28deg) saturate(1.55) drop-shadow(0 0 1.2rem rgba(255, 110, 40, .25)) drop-shadow(0 1.2rem 1.4rem rgba(0, 0, 0, .62)); }
.pack-g-kai.pack-k-shojo > .pack-img { filter: hue-rotate(-62deg) saturate(.7) brightness(1.22) drop-shadow(0 0 1.2rem rgba(255, 170, 200, .25)) drop-shadow(0 1.2rem 1.4rem rgba(0, 0, 0, .62)); }
.pack-g-kai.pack-k-seinen > .pack-img { filter: grayscale(.85) brightness(.78) contrast(1.25) drop-shadow(0 0 1.2rem rgba(200, 210, 230, .15)) drop-shadow(0 1.2rem 1.4rem rgba(0, 0, 0, .62)); }
.pack-g-kai.pack-k-husbandos > .pack-img { filter: hue-rotate(172deg) saturate(1.25) brightness(.95) drop-shadow(0 0 1.2rem rgba(60, 150, 255, .25)) drop-shadow(0 1.2rem 1.4rem rgba(0, 0, 0, .62)); }
.pack-g-kai.pack-k-waifus > .pack-img { filter: hue-rotate(-48deg) saturate(1.7) brightness(.95) drop-shadow(0 0 1.2rem rgba(255, 50, 90, .3)) drop-shadow(0 1.2rem 1.4rem rgba(0, 0, 0, .62)); }
.pack-g-kai[class*="pack-k-"] { --kp: #f0c15a; }
.pack-g-kai.pack-k-shonen { --kp: #ff7a2e; }
.pack-g-kai.pack-k-shojo { --kp: #ffb3cd; }
.pack-g-kai.pack-k-seinen { --kp: #c9d1de; }
.pack-g-kai.pack-k-husbandos { --kp: #4ea2ff; }
.pack-g-kai.pack-k-waifus { --kp: #ff3b62; }
/* Le nom du booster, sur une étiquette posée sur « Tous les persos ». */
.pack-g-kai[class*="pack-k-"] .pack-band {
  display: flex; top: 72%; height: 9.5%; left: 20%; right: 20%;
  background: #0a0709; border: 1px solid var(--kp); border-radius: 0;
}
.pack-g-kai[class*="pack-k-"] .pack-band strong { color: var(--kp); font-family: var(--n-jp); font-weight: 400; letter-spacing: .08em; text-transform: uppercase; }
.pack-g-kai[class*="pack-k-"] .pack-band span { color: rgba(255, 255, 255, .7); }

/* Choix du booster Kaïra : six jetons, chacun dans la couleur de son sachet. */
.pu-kai button { --kp: #f0c15a; gap: .45rem; }
.pu-kai .kp-shonen { --kp: #ff7a2e; } .pu-kai .kp-shojo { --kp: #ffb3cd; } .pu-kai .kp-seinen { --kp: #c9d1de; }
.pu-kai .kp-husbandos { --kp: #4ea2ff; } .pu-kai .kp-waifus { --kp: #ff3b62; }
.pu-kai .kp-jp { font: 400 .8rem/1 var(--n-jp); color: var(--kp); }
.pu-kai button[aria-pressed="true"] { border-color: var(--kp) !important; box-shadow: 0 0 14px color-mix(in srgb, var(--kp) 30%, transparent) !important; background: color-mix(in srgb, var(--kp) 9%, transparent) !important; }

/* Bannière de lancement, au-dessus du choix Kaïra / Jeux vidéo : cinq sachets en éventail et l'annonce. */
.kai-news {
  position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); align-items: center; gap: 1.2rem;
  margin-bottom: 1rem; padding: 1rem 1.2rem; border: 1px solid rgba(255, 51, 85, .35); border-radius: .7rem;
  background: radial-gradient(60% 120% at 15% 50%, rgba(255, 51, 85, .16), transparent 70%), rgba(10, 10, 15, .8);
  box-shadow: 0 0 22px rgba(255, 51, 85, .12);
}
.kai-news-art { position: relative; height: 8.5rem; }
.kn-pack {
  position: absolute; bottom: 0; left: 50%; width: 4.6rem; height: auto;
  transform: translateX(calc(-50% + var(--i) * 2.3rem)) rotate(calc(var(--i) * 7deg)); transform-origin: 50% 120%;
  filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .6));
}
.kn-pack.kp-shonen { filter: hue-rotate(-28deg) saturate(1.55) drop-shadow(0 8px 10px rgba(0, 0, 0, .6)); }
.kn-pack.kp-shojo { filter: hue-rotate(-62deg) saturate(.7) brightness(1.22) drop-shadow(0 8px 10px rgba(0, 0, 0, .6)); }
.kn-pack.kp-seinen { filter: grayscale(.85) brightness(.78) contrast(1.25) drop-shadow(0 8px 10px rgba(0, 0, 0, .6)); }
.kn-pack.kp-husbandos { filter: hue-rotate(172deg) saturate(1.25) brightness(.95) drop-shadow(0 8px 10px rgba(0, 0, 0, .6)); }
.kn-pack.kp-waifus { filter: hue-rotate(-48deg) saturate(1.7) brightness(.95) drop-shadow(0 8px 10px rgba(0, 0, 0, .6)); }
.kai-news-body { display: flex; flex-direction: column; gap: .3rem; align-items: flex-start; }
.kai-news-title { margin: 0; font: 400 1.35rem/1.1 var(--n-jp); color: #fff4f6; text-shadow: 0 0 10px rgba(255, 51, 85, .6); }
.kai-news-note { margin: 0 0 .3rem; color: rgba(255, 255, 255, .72); font-size: .86rem; }
@media (max-width: 600px) {
  .kai-news { grid-template-columns: 7.5rem minmax(0, 1fr); gap: .7rem; padding: .8rem .85rem; }
  .kai-news-art { height: 6rem; }
  .kn-pack { width: 3.1rem; transform: translateX(calc(-50% + var(--i) * 1.05rem)) rotate(calc(var(--i) * 7deg)); }
  .kai-news-title { font-size: 1.05rem; }
  .kai-news-note { font-size: .78rem; }
}
.stage > .kai-news { grid-area: gift; justify-self: stretch; }
@media (max-width: 860px) { .stage > .kai-news { grid-area: auto !important; grid-column: 1 / -1 !important; } }
@media (max-width: 600px) {
  .kai-news { grid-template-columns: 6.2rem minmax(0, 1fr); padding: .65rem .8rem; margin-bottom: .4rem; }
  .kai-news-art { height: 4.6rem; }
  .kn-pack { width: 2.5rem; transform: translateX(calc(-50% + var(--i) * .85rem)) rotate(calc(var(--i) * 7deg)); }
  .kai-news-note { display: none; }
  .kai-news-title { font-size: .98rem; }
  .kai-news .btn { padding: .35rem .8rem; min-height: 0; font-size: .82rem; }
}

/* Choix du booster Kaïra : six tuiles égales, chacune avec son petit sachet recoloré, son kanji et son nom. */
.pu-games.pu-kai { display: grid !important; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .55rem; }
.pu-kai .kp-tile {
  position: relative; display: flex !important; flex-direction: column; align-items: center; justify-content: flex-end; gap: .35rem;
  min-height: 0; height: auto; padding: .6rem .3rem .55rem; border-radius: .6rem !important;
  border: 1px solid rgba(255, 255, 255, .08) !important;
  background: radial-gradient(90% 70% at 50% 35%, color-mix(in srgb, var(--kp) 14%, transparent), transparent 70%), rgba(10, 10, 15, .7) !important;
  overflow: hidden; transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.pu-kai .kp-tile:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--kp) 50%, transparent) !important; }
.pu-kai .kp-pack { width: 2.7rem; height: auto; margin-bottom: .1rem; filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .55)); transition: transform .2s ease; }
.pu-kai .kp-tile:hover .kp-pack, .pu-kai .kp-tile[aria-pressed="true"] .kp-pack { transform: translateY(-3px) rotate(-4deg) scale(1.06); }
.pu-kai .kp-shonen .kp-pack { filter: hue-rotate(-28deg) saturate(1.55) drop-shadow(0 6px 8px rgba(0, 0, 0, .55)); }
.pu-kai .kp-shojo .kp-pack { filter: hue-rotate(-62deg) saturate(.7) brightness(1.22) drop-shadow(0 6px 8px rgba(0, 0, 0, .55)); }
.pu-kai .kp-seinen .kp-pack { filter: grayscale(.85) brightness(.78) contrast(1.25) drop-shadow(0 6px 8px rgba(0, 0, 0, .55)); }
.pu-kai .kp-husbandos .kp-pack { filter: hue-rotate(172deg) saturate(1.25) brightness(.95) drop-shadow(0 6px 8px rgba(0, 0, 0, .55)); }
.pu-kai .kp-waifus .kp-pack { filter: hue-rotate(-48deg) saturate(1.7) brightness(.95) drop-shadow(0 6px 8px rgba(0, 0, 0, .55)); }
.pu-kai .kp-text { display: flex; flex-direction: column; align-items: center; gap: .15rem; line-height: 1; }
.pu-kai .kp-jp { font: 400 .78rem/1 var(--n-jp); color: var(--kp); text-shadow: 0 0 8px color-mix(in srgb, var(--kp) 60%, transparent); }
.pu-kai .kp-name { font: 700 .8rem/1.1 var(--ui); color: rgba(255, 255, 255, .78); white-space: nowrap; }
.pu-kai .kp-tile[aria-pressed="true"] .kp-name { color: #fff; }
.pu-kai .kp-tile[aria-pressed="true"] {
  border-color: var(--kp) !important;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--kp) 40%, transparent), 0 0 18px color-mix(in srgb, var(--kp) 30%, transparent) !important;
}
.pu-kai .kp-tile[aria-pressed="true"]::after {
  content: ""; position: absolute; left: 25%; right: 25%; bottom: 0; height: 2px; background: var(--kp); box-shadow: 0 0 8px var(--kp);
}
@media (max-width: 600px) {
  .pu-games.pu-kai { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .4rem; }
  .pu-kai .kp-pack { width: 2.1rem; }
  .pu-kai .kp-tile { padding: .45rem .25rem .45rem; }
}

/* Le bouton Invoquer : une enseigne. Une pastille blanche avec des étincelles à gauche, le texte aligné,
   une flèche qui avance au survol, et un reflet de néon qui passe de temps en temps. */
.btn.btn-invoke {
  position: relative; overflow: hidden; isolation: isolate;
  display: grid !important; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .9rem;
  padding: .55rem 1rem .55rem .55rem !important; text-align: left; border-radius: .7rem !important;
  border: 1px solid rgba(255, 190, 200, .75) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, 0) 45%),
    linear-gradient(100deg, #ff4a68 0%, #e8213f 55%, #b5122e 100%) !important;
  box-shadow: 0 0 0 1px rgba(255, 51, 85, .45), 0 0 26px rgba(255, 51, 85, .45), 0 14px 30px -10px rgba(180, 10, 40, .8), inset 0 -2px 0 rgba(0, 0, 0, .18) !important;
}
.btn-invoke .inv-icon {
  display: grid; place-items: center; width: 2.9rem; height: 2.9rem; border-radius: 50%;
  background: #fff; color: #e8213f; box-shadow: 0 0 0 3px rgba(255, 255, 255, .25), 0 0 14px rgba(255, 255, 255, .45);
}
.btn-invoke .inv-icon svg { width: 1.6rem; height: 1.6rem; }
.btn-invoke:hover:not(:disabled) .inv-icon svg { animation: inv-twinkle .6s ease; }
@keyframes inv-twinkle { 50% { transform: rotate(18deg) scale(1.15); } }
.btn-invoke .inv-main { display: flex; flex-direction: column; align-items: flex-start; gap: .2rem; font: 900 1.3rem/1.05 var(--ui); color: #fff; letter-spacing: .01em; text-shadow: 0 1px 0 rgba(110, 0, 20, .4); }
.btn-invoke .btn-sub {
  display: inline-flex; align-items: center; gap: .35rem; margin: 0; padding: .2rem .5rem; border-radius: 999px;
  background: rgba(20, 2, 8, .4); color: rgba(255, 235, 238, .92) !important;
  font: 700 .66rem/1 var(--ui); letter-spacing: .12em; text-transform: uppercase;
}
.btn-invoke .btn-sub::before { content: ""; width: .42rem; height: .62rem; background: #ffd7de; clip-path: polygon(55% 0, 0 58%, 42% 58%, 30% 100%, 100% 38%, 58% 38%); }
.btn-invoke .inv-arrow { width: 1.4rem; height: 1.4rem; color: #fff; opacity: .9; transition: transform .2s ease; }
.btn-invoke:hover:not(:disabled) .inv-arrow { transform: translateX(4px); }
.btn-invoke:hover:not(:disabled) { box-shadow: 0 0 0 1px rgba(255, 51, 85, .6), 0 0 38px rgba(255, 51, 85, .6), 0 14px 30px -10px rgba(180, 10, 40, .9) !important; }
.btn-invoke::after {
  content: ""; position: absolute; top: -20%; bottom: -20%; left: -40%; width: 30%; z-index: -1; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .28), transparent);
  transform: skewX(-18deg); animation: inv-shine 4.5s ease-in-out 1.2s infinite;
}
@keyframes inv-shine { 0%, 72% { left: -40%; } 100% { left: 130%; } }
@media (prefers-reduced-motion: reduce) { .btn-invoke::after { animation: none; display: none; } }
@media (max-width: 860px) {
  .btn.btn-invoke { gap: .55rem; padding: .45rem .6rem .45rem .45rem !important; }
  .btn-invoke .inv-icon { width: 2.3rem; height: 2.3rem; }
  .btn-invoke .inv-icon svg { width: 1.3rem; height: 1.3rem; }
  .btn-invoke .inv-main { font-size: 1.08rem; }
  .btn-invoke .btn-sub { font-size: .58rem; letter-spacing: .08em; }
  .btn-invoke .inv-arrow { display: none; }
  .btn.btn-invoke { grid-template-columns: auto minmax(0, 1fr); }
}

/* Les sachets de derrière (×2, ×5, ×10) prennent la couleur du booster Kaïra choisi. */
.pack-ghost.kg-shonen img { filter: hue-rotate(-28deg) saturate(1.55) brightness(.8) drop-shadow(0 18px 22px rgba(0, 0, 0, .6)); }
.pack-ghost.kg-shojo img { filter: hue-rotate(-62deg) saturate(.7) brightness(1) drop-shadow(0 18px 22px rgba(0, 0, 0, .6)); }
.pack-ghost.kg-seinen img { filter: grayscale(.85) brightness(.65) contrast(1.25) drop-shadow(0 18px 22px rgba(0, 0, 0, .6)); }
.pack-ghost.kg-husbandos img { filter: hue-rotate(172deg) saturate(1.25) brightness(.8) drop-shadow(0 18px 22px rgba(0, 0, 0, .6)); }
.pack-ghost.kg-waifus img { filter: hue-rotate(-48deg) saturate(1.7) brightness(.8) drop-shadow(0 18px 22px rgba(0, 0, 0, .6)); }

/* Recycler : l'option pour garder les doublons Épique et plus, juste sous le bouton. */
.recycle-wrap { display: flex; flex-direction: column; align-items: flex-end; gap: .45rem; }
.keep-high { display: inline-flex; align-items: center; gap: .45rem; font-size: .8rem; color: rgba(255, 255, 255, .72); cursor: pointer; user-select: none; }
.keep-high input { width: 1rem; height: 1rem; accent-color: var(--n-red); }
.earn-item .keep-high { margin-top: .5rem; }
@media (max-width: 760px) { .recycle-wrap { align-items: flex-start; } }

/* ---------- Au-dessus du sachet : Kaïra (tuile de mahjong) et Jeux vidéo (PlayStation), en grands boutons 3D ---------- */
.atelier { grid-template-areas: "uni rail" "stage rail" "feed rail" !important; grid-template-rows: auto auto 1fr !important; }
.atelier > .universe { grid-area: uni; display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.atelier > .universe:empty { display: none; }
.universe > .kai-news { margin: 0; }
@media (max-width: 860px) {
  .atelier { grid-template-areas: "uni" "stage" "rail" "feed" !important; grid-template-rows: none !important; }
  .atelier > .universe { gap: .7rem; }
}
.uni-tabs { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 1rem; padding-top: 1.6rem; }
.uni-btn {
  --uc: var(--n-red);
  position: relative; display: flex; align-items: center; gap: 1rem; min-height: 6.2rem;
  padding: .9rem 1.3rem .9rem 9.5rem; border-radius: .9rem; text-align: left; color: #fff;
  border: 1px solid rgba(255, 255, 255, .1);
  background:
    radial-gradient(70% 140% at 12% 60%, color-mix(in srgb, var(--uc) 22%, transparent), transparent 70%),
    linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, 0) 45%),
    rgba(12, 12, 18, .9);
  box-shadow: 0 14px 30px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .06), inset 0 -3px 0 rgba(0, 0, 0, .35);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.uni-btn.uni-kai { --uc: #ff3355; }
.uni-btn.uni-jv { --uc: #2fe6ff; }
/* Le modèle déborde au-dessus du bouton et flotte doucement. */
.uni-model {
  position: absolute; left: 1.4rem; bottom: .5rem; width: auto; pointer-events: none;
  filter: drop-shadow(0 14px 14px rgba(0, 0, 0, .6)) saturate(.75) brightness(.8);
  transition: filter .25s ease, transform .25s ease; animation: uni-float 6s ease-in-out infinite;
}
.uni-kai .uni-model { height: 7.6rem; --rot: -8deg; }
.uni-jv .uni-model { height: 5rem; left: .6rem; bottom: .9rem; --rot: 4deg; animation-delay: -3s; }
@keyframes uni-float { 0%, 100% { transform: translateY(0) rotate(var(--rot)); } 50% { transform: translateY(-7px) rotate(calc(var(--rot) * .6)); } }
.uni-text { display: flex; flex-direction: column; gap: .25rem; min-width: 0; }
.uni-text strong { font: 400 1.55rem/1 var(--n-jp); letter-spacing: .01em; }
.uni-text small { color: rgba(255, 255, 255, .6); font-size: .82rem; }
.uni-btn .free-badge { margin-left: auto; }
.uni-btn:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--uc) 45%, transparent); }
.uni-btn:hover .uni-model { filter: drop-shadow(0 18px 16px rgba(0, 0, 0, .6)) saturate(.95) brightness(.95); }
.uni-btn:active { transform: translateY(1px); }
/* Choisi : il s'allume dans sa couleur, le modèle se redresse et brille. */
.uni-btn[aria-pressed="true"] {
  border-color: var(--uc);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--uc) 45%, transparent), 0 0 30px color-mix(in srgb, var(--uc) 30%, transparent), 0 14px 30px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .08);
}
.uni-btn[aria-pressed="true"] .uni-text strong { text-shadow: 0 0 2px #fff, 0 0 14px color-mix(in srgb, var(--uc) 80%, transparent); }
.uni-btn[aria-pressed="true"] .uni-model { filter: drop-shadow(0 16px 16px rgba(0, 0, 0, .6)) drop-shadow(0 0 18px color-mix(in srgb, var(--uc) 55%, transparent)); transform: translateY(-6px) scale(1.06); }
.uni-btn[aria-pressed="true"]::after {
  content: ""; position: absolute; left: 1.2rem; right: 1.2rem; bottom: -1px; height: 2px; border-radius: 2px;
  background: var(--uc); box-shadow: 0 0 10px var(--uc);
}
@media (prefers-reduced-motion: reduce) { .uni-model { animation: none; } }
@media (max-width: 600px) {
  .uni-tabs { gap: .6rem; padding-top: 1.2rem; }
  .uni-btn { flex-direction: column; align-items: flex-start; justify-content: flex-end; min-height: 7.4rem; padding: 3.6rem .8rem .7rem; gap: .3rem; }
  .uni-kai .uni-model { height: 5.4rem; left: auto; right: .6rem; bottom: auto; top: -1rem; }
  .uni-jv .uni-model { height: 3.6rem; left: auto; right: .3rem; bottom: auto; top: -.4rem; }
  .uni-text strong { font-size: 1.15rem; }
  .uni-text small { font-size: .72rem; }
  .uni-btn .free-badge { position: absolute; left: .7rem; top: .7rem; margin: 0; }
}
/* L'ancien choix à plat, dans le panneau du sachet, n'existe plus. */
.stage .pu-tabs { display: none !important; }
@media (min-width: 861px) { .universe > .kai-news { padding-left: 2.6rem; } }
/* Bannière : plus de place pour l'éventail de sachets, le texte décalé vers la droite. */
@media (min-width: 861px) {
  .universe > .kai-news { grid-template-columns: 21rem minmax(0, 1fr); gap: 2.6rem; padding: 1.1rem 2rem 1.1rem 3rem; }
  .universe > .kai-news .kai-news-art { height: 9rem; }
}
/* Derniers gros tirages : la marge intérieure l'emporte enfin (#feed avait sa propre règle sans marge à gauche). */
#feed .rail-block { padding: 1.3rem 1.6rem 1.3rem !important; }
@media (max-width: 600px) { #feed .rail-block { padding: 1rem 1.1rem !important; } }

/* Jeux vidéo : le même sélecteur que Kaïra, chaque licence avec son sachet. */
.pu-jv .kp-ico { display: grid; place-items: center; height: .95rem; color: var(--kp); filter: drop-shadow(0 0 6px color-mix(in srgb, var(--kp) 55%, transparent)); }
.pu-jv .kp-ico .gs-icon { width: .95rem; height: .95rem; }
.pu-jv .kp-pack { width: 2.5rem; }
.pu-jv .kp-tile .free-badge { position: absolute; top: .4rem; right: .4rem; height: 1.15rem; padding: 0 .35rem; font-size: .66rem; }
.pu-jv .kp-tile .free-badge small { display: none; }
.pu-jv .kp-tile.is-soon { opacity: .45; filter: grayscale(.8); cursor: default; }
.pu-jv .kp-tile.is-soon:hover { transform: none; }
.pu-jv .kp-tile.is-soon small { font-size: .55rem; letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, .6); }
/* Tous les sachets du sélecteur à la même hauteur, quel que soit leur format. */
.pu-kai .kp-pack { width: auto !important; height: 3.9rem; object-fit: contain; }
@media (max-width: 600px) { .pu-kai .kp-pack { height: 3.1rem; } }

/* ---------- Nouveautés en diaporama, au-dessus du choix Kaïra / Jeux vidéo ---------- */
.news { position: relative; overflow: hidden; border-radius: .7rem; }
.news-track { display: grid; grid-template-columns: repeat(10, 100%); transform: translateX(calc(var(--n, 0) * -100%)); transition: transform .6s cubic-bezier(.6, .05, .25, 1); }
.news-slide { min-width: 0; opacity: .25; transition: opacity .5s ease; }
.news-slide.is-on { opacity: 1; }
.news-slide > .kai-news { height: 100%; margin: 0; }
.news-dots { position: absolute; right: 1rem; bottom: .7rem; display: flex; gap: .4rem; z-index: 3; }
.news-dots button { width: .55rem; height: .55rem; padding: 0; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .28); transition: width .25s ease, background .25s ease; cursor: pointer; }
.news-dots button[aria-pressed="true"] { width: 1.5rem; background: var(--n-red); box-shadow: 0 0 8px rgba(255, 51, 85, .7); }
@media (prefers-reduced-motion: reduce) { .news-track { transition: none; } }

/* Le Monster : orange citrouille et vert poison, le logo Pop Mart en 3D, la figurine qui flotte. */
.monster-news {
  border-color: rgba(255, 122, 26, .55) !important;
  background: radial-gradient(55% 130% at 18% 55%, rgba(255, 122, 26, .28), transparent 70%), radial-gradient(40% 90% at 30% 90%, rgba(182, 255, 92, .12), transparent 70%), rgba(10, 8, 6, .9) !important;
  box-shadow: 0 0 26px rgba(255, 122, 26, .2) !important;
}
.monster-news .eyebrow { color: #ff9a3c; }
.monster-news .kai-news-title { text-shadow: 0 0 2px #fff, 0 0 14px rgba(255, 122, 26, .8); }
.monster-news .btn-primary { background: linear-gradient(180deg, #ff9a3c, #e35d0a) !important; border-color: rgba(255, 200, 150, .7) !important; box-shadow: 0 0 18px rgba(255, 122, 26, .45) !important; }
.mn-art { position: relative; height: 9rem; }
.mn-fig { position: absolute; left: 12%; bottom: -1.2rem; width: auto; height: 10.5rem; filter: drop-shadow(0 10px 14px rgba(0, 0, 0, .7)) drop-shadow(0 0 18px rgba(182, 255, 92, .25)); animation: uni-float 5s ease-in-out infinite; --rot: -3deg; }
.mn-logo { position: absolute; right: -1rem; left: auto; top: .4rem; width: 9.5rem; height: auto; filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .6)); animation: uni-float 6.5s ease-in-out infinite; --rot: 7deg; z-index: 1; }
@media (max-width: 600px) {
  .mn-art { height: 6rem; }
  .mn-fig { height: 7rem; bottom: -.9rem; transform: translateX(-20%); }
  .mn-logo { width: 5.6rem; top: .3rem; }
  .news-dots { right: .7rem; bottom: .5rem; }
}

/* ---------- Boîte mystère : le bouton juste sous le titre, la boîte cliquable, une scène plus compacte ---------- */
.figure-shop { display: flex; flex-direction: column; align-items: center; gap: .7rem; }
.figure-shop > .figure-open { margin: .2rem 0 0; }
.figure-stage { height: clamp(240px, 32vh, 320px) !important; cursor: pointer; }
.figure-stage.is-busy { cursor: progress; }
.figure-stage:not(.is-busy):hover .capsule-canvas { filter: drop-shadow(0 0 18px rgba(255, 51, 85, .35)); }

/* Les deux diapositives : même grille, l'illustration à gauche, le texte bien décalé vers la droite. */
@media (min-width: 861px) {
  .news .kai-news { grid-template-columns: 21rem minmax(0, 1fr); gap: 2.6rem; padding: 1.1rem 2rem 1.6rem 3rem; min-height: 11.5rem; }
  .news .kai-news .kai-news-art { height: 9rem; }
}
@media (max-width: 600px) { .mn-logo { right: -.4rem; } .mn-fig { left: 0; } }
/* Boîte mystère : les rayons ne recouvrent plus le bouton. */
.figure-stage .capsule-rays { pointer-events: none; }
.figure-shop > .figure-open { position: relative; z-index: 4; }

/* Diapo Monster, mise en page : la figurine au centre de son halo, le logo Pop Mart posé devant comme le socle
   d'une vitrine, un minuteur en pastille sous le texte. */
.monster-news .mn-art { height: 10rem; display: grid; place-items: end center; }
.monster-news .mn-art::before {
  content: ""; position: absolute; left: 50%; top: 50%; width: 11rem; height: 11rem; translate: -50% -50%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 122, 26, .45), rgba(255, 122, 26, .08) 70%, transparent);
}
.monster-news .mn-fig { position: relative; left: auto; bottom: auto; height: 10.5rem; transform: none; margin-bottom: .9rem; }
.monster-news .mn-logo { position: absolute; left: 50%; right: auto; top: auto; bottom: -.2rem; width: 8.5rem; translate: -50% 0; --rot: -4deg; z-index: 2; }
.mn-timer {
  display: inline-flex; align-items: center; gap: .4rem; margin: 0 0 .4rem; padding: .28rem .7rem; border-radius: 999px;
  border: 1px solid rgba(255, 154, 60, .5); background: rgba(255, 122, 26, .12); color: #ffb46b; font: 700 .78rem/1 var(--ui);
}
@media (max-width: 600px) {
  .monster-news .mn-art { height: 6.6rem; }
  .monster-news .mn-art::before { width: 7rem; height: 7rem; }
  .monster-news .mn-fig { height: 6.6rem; margin-bottom: .6rem; }
  .monster-news .mn-logo { width: 5.4rem; }
  .mn-timer { font-size: .68rem; }
}

/* ---------- Téléphone : l'essentiel d'abord. Nouveautés, choix et sachet tiennent sur le premier écran. ---------- */
@media (max-width: 600px) {
  .atelier > .universe { gap: .55rem; }
  /* Nouveautés : un bandeau bas, l'image à gauche, le titre et le bouton à droite. */
  .news .kai-news { grid-template-columns: 5.6rem minmax(0, 1fr) !important; gap: .6rem !important; padding: .55rem 2.6rem .55rem .7rem !important; min-height: 0 !important; align-items: center; }
  .news .kai-news .kai-news-art, .monster-news .mn-art { height: 4.4rem !important; }
  .news .kn-pack { width: 2.2rem !important; transform: translateX(calc(-50% + var(--i) * .75rem)) rotate(calc(var(--i) * 7deg)) !important; }
  .news .eyebrow { font-size: .55rem; letter-spacing: .08em; }
  .news .kai-news-title { font-size: .95rem !important; }
  .news .kai-news-note, .news .mn-timer { display: none !important; }
  .news .kai-news-body { gap: .25rem; }
  .news .kai-news .btn { padding: .3rem .7rem !important; min-height: 0 !important; font-size: .76rem !important; }
  .monster-news .mn-art::before { width: 5rem; height: 5rem; }
  .monster-news .mn-fig { height: 4.6rem !important; margin-bottom: .45rem !important; }
  .monster-news .mn-logo { width: 4rem !important; bottom: -.1rem !important; }
  .news-dots { top: 50%; bottom: auto !important; right: .6rem !important; flex-direction: column; translate: 0 -50%; }
  .news-dots button[aria-pressed="true"] { width: .55rem; height: 1.2rem; }

  /* Kaïra / Jeux vidéo : deux boutons bas, le modèle à droite. */
  .uni-tabs { padding-top: .9rem; gap: .5rem; }
  .uni-btn { min-height: 4.4rem !important; padding: .6rem .7rem !important; justify-content: center !important; }
  .uni-kai .uni-model { height: 4.2rem !important; top: -.9rem !important; right: .3rem !important; }
  .uni-jv .uni-model { height: 2.8rem !important; top: -.5rem !important; right: .1rem !important; }
  .uni-text strong { font-size: 1.05rem !important; }
  .uni-text small { font-size: .66rem !important; }

  /* Boosters Kaïra et licences : une seule rangée qui défile du doigt. */
  .pu-games.pu-kai { display: flex !important; gap: .45rem !important; overflow-x: auto; scroll-snap-type: x proximity; margin: 0 -.9rem; padding: .1rem .9rem .3rem; scrollbar-width: none; }
  .pu-games.pu-kai::-webkit-scrollbar { display: none; }
  .pu-kai .kp-tile { flex: 0 0 5.2rem; scroll-snap-align: start; padding: .4rem .25rem !important; gap: .2rem !important; }
  .pu-kai .kp-pack { height: 2.4rem !important; }
  .pu-kai .kp-name { font-size: .7rem; }
  .pu-kai .kp-jp { font-size: .62rem; }

  /* Le titre du sachet plus discret, sa phrase sur une ligne ; les raccourcis en petites pastilles. */
  .stage > .stage-title { font-size: clamp(1.7rem, 8vw, 2.1rem) !important; }
  .stage > .lede { -webkit-line-clamp: 1 !important; font-size: .8rem !important; margin: -.2rem 0 0; }
  .stage > .perks { gap: .4rem; }
  .stage > .perks .perk { min-height: 2.2rem; padding: .25rem .7rem .25rem .35rem; font-size: .78rem; }
  .stage > .perks .perk img, .stage > .perks .perk svg { width: 1.4rem; height: 1.4rem; }
  .stage { row-gap: .5rem !important; padding: .8rem !important; }
  .stage > .booster-pack { max-width: 140px !important; }

  /* Compagnon : en bas à gauche, il ne cache plus le bouton Invoquer ni les textes à droite. */
  .companion:not(.is-left):not(.is-running) { opacity: .92; }
}
@media (max-width: 600px) {
  .pu-games.pu-kai { flex-wrap: nowrap !important; }
  .stage > .stage-title em { display: inline !important; margin-left: .25em; }
  .stage > .stage-title { line-height: 1.05 !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .stage > .lede { display: -webkit-box !important; -webkit-box-orient: vertical; overflow: hidden; }
}

@media (max-width: 600px) {
  /* Le sachet reste dans sa colonne, sa pile derrière comprise. */
  .stage > .booster-pack { overflow: visible; justify-self: center; }
  .stage > .booster-pack .pack-ghost { max-width: 100%; }
  .stage > .booster-pack .pack-count { top: -.5rem; right: -.4rem; font-size: .85rem; }
  /* Pastille « offerts » : sous le nom, plus par-dessus. */
  .uni-btn .free-badge { position: static !important; align-self: flex-start; margin-top: .25rem !important; height: 1.1rem; font-size: .62rem; }
  .uni-btn .free-badge small { display: none; }
  .pu-jv .kp-tile .free-badge { top: .25rem; right: .25rem; }
}
@media (max-width: 600px) {
  .stage > .booster-pack { width: min(100%, 8.6rem) !important; max-width: 8.6rem !important; }
  .stage > .booster-pack .pack-ghost { display: none !important; }
}

/* Annonce Riftbound : orange et or, comme le logo du jeu. */
.rb-news { border-color: rgba(233, 138, 60, .45); background: radial-gradient(60% 120% at 15% 50%, rgba(233, 138, 60, .2), transparent 70%), rgba(10, 10, 15, .8); box-shadow: 0 0 22px rgba(233, 138, 60, .15); }
.rb-news .eyebrow { color: #f2a65a; }
.rb-news .kai-news-title { text-shadow: 0 0 2px #fff, 0 0 14px rgba(233, 138, 60, .8); }
.rb-news .btn-primary { background: linear-gradient(180deg, #f2a65a, #d0671f) !important; border-color: rgba(255, 214, 170, .7) !important; box-shadow: 0 0 18px rgba(233, 138, 60, .45) !important; }
.rb-news .kn-pack { width: 4.4rem; border-radius: .3rem; }
.rb-news .rb-pack { width: 5rem; z-index: 1; border-radius: 0; }
.rb-news .rb-card { outline: 2px solid rgba(200, 170, 110, .85); outline-offset: -2px; }

/* Sachet flou sur iPhone : Safari/Chrome iOS dessinent une seule fois en basse définition un calque animé qui porte
   à la fois un filtre, une perspective 3D et will-change, puis l'agrandissent. Sur écran tactile, le sachet garde
   son ombre (portée par l'image) mais perd ces trois-là : il est redessiné net. */
@media (hover: none), (max-width: 600px) {
  .stage > .booster-pack { filter: none !important; }
  .booster-pack .pack.tilt { will-change: auto; }
  .booster-pack .pack.tilt:not(.tilting) { transform: none; }
  .booster-pack .pack-img { transform: translateZ(0); -webkit-backface-visibility: hidden; backface-visibility: hidden; }
}

/* ======================================================================
   Barre du haut, version enseigne (30 octobre 2026) : plus de capsule ronde ni de pastille dorée.
   Une plaque de verre fumé aux coins nets, bordée d'un fil rouge ; le nom s'allume en tubes (blanc, puis cyan),
   l'onglet ouvert s'éclaire en rouge avec un tube sous lui, les jetons sont des petites plaques de néon.
   Sur téléphone, l'onglet ouvert de la barre du bas porte un tube rouge au-dessus au lieu d'une case pleine.
   ====================================================================== */
.topbar.dock { border-radius: .85rem; }
.topbar.dock::before {
  border: 1px solid rgba(255, 51, 85, .26);
  background: linear-gradient(180deg, rgba(22, 16, 24, .9), rgba(8, 8, 13, .92));
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .5), 0 0 22px rgba(255, 51, 85, .12), 0 18px 46px -18px #000, inset 0 1px rgba(255, 255, 255, .06);
}
.topbar.dock::after { left: 8%; right: 8%; bottom: -1px; height: 1.5px; }

/* Le nom : « TIG » en tube blanc rosé, « Gacha » en tube cyan, et sa plaque « ガチャ ». */
.dock .wordmark-logo { border-radius: .6rem; box-shadow: 0 0 0 1.5px var(--n-red), 0 0 0 4px rgba(255, 51, 85, .14), 0 0 16px rgba(255, 51, 85, .5); }
.dock .wordmark:hover .wordmark-logo { scale: 1.06; box-shadow: 0 0 0 1.5px var(--n-cyan), 0 0 0 4px rgba(47, 230, 255, .14), 0 0 18px rgba(47, 230, 255, .5); }
.dock .wordmark-name { align-items: center; gap: .4rem; }
.dock .wordmark-name b, .dock .wordmark-name i {
  font: 400 1.32rem/1 var(--n-jp) !important; font-style: normal !important; letter-spacing: .02em; text-transform: none;
  -webkit-text-fill-color: currentColor; background: none !important;
}
.dock .wordmark-name b { color: #fff4f6; text-shadow: 0 0 2px #fff, 0 0 9px rgba(255, 51, 85, .8), 0 0 22px rgba(255, 51, 85, .4); }
.dock .wordmark-name i { color: #dffbff; text-shadow: 0 0 2px #fff, 0 0 9px rgba(47, 230, 255, .85), 0 0 22px rgba(47, 230, 255, .4); }
.dock .wordmark-name::after {
  content: "ガチャ";
  padding: .22rem .3rem .2rem; border: 1px solid rgba(255, 51, 85, .6); border-radius: .25rem;
  font: 400 .58rem/1 var(--n-jp); letter-spacing: .08em; color: var(--n-red-soft);
  text-shadow: 0 0 6px rgba(255, 51, 85, .7); box-shadow: 0 0 8px rgba(255, 51, 85, .25), inset 0 0 6px rgba(255, 51, 85, .15);
}

/* Les jetons : petites plaques aux coins nets, énergie en rouge, essence en cyan. */
.dock .pill { border-radius: .55rem; }
.dock .pill-stock { border-color: rgba(255, 51, 85, .45); background: linear-gradient(180deg, rgba(255, 51, 85, .09), rgba(255, 51, 85, .02)); box-shadow: 0 0 12px rgba(255, 51, 85, .12), inset 0 1px rgba(255, 255, 255, .05); }
.dock .pill-essence { border-color: rgba(47, 230, 255, .42); background: linear-gradient(180deg, rgba(47, 230, 255, .08), rgba(47, 230, 255, .02)); box-shadow: 0 0 12px rgba(47, 230, 255, .1), inset 0 1px rgba(255, 255, 255, .05); }
.dock .pill-stock:hover { background: rgba(255, 51, 85, .14); }
.dock .pill-essence:hover { background: rgba(47, 230, 255, .12); }
.dock .pill strong { text-shadow: 0 0 10px rgba(255, 255, 255, .25); }
.dock .pill-stock .pill-timer { font-family: var(--n-jp) !important; font-size: .62rem !important; letter-spacing: .06em; }

/* Connexion : la couleur de Discord, mais en néon sur plaque sombre. Connecté : la même plaque, cerclée de rouge. */
.dock .account .btn.btn-discord {
  border: 1px solid rgba(140, 150, 255, .75) !important; border-radius: .55rem;
  background: linear-gradient(180deg, rgba(88, 101, 242, .3), rgba(88, 101, 242, .12)) !important;
  box-shadow: 0 0 14px rgba(88, 101, 242, .45), inset 0 0 10px rgba(88, 101, 242, .2), inset 0 1px rgba(255, 255, 255, .12);
  text-shadow: 0 0 8px rgba(140, 150, 255, .9);
}
.dock .account .btn.btn-discord:hover:not(:disabled) { background: linear-gradient(180deg, rgba(88, 101, 242, .45), rgba(88, 101, 242, .2)) !important; box-shadow: 0 0 22px rgba(88, 101, 242, .6), inset 0 0 12px rgba(88, 101, 242, .25); }
.dock .account-me { border-radius: .55rem; border-color: rgba(255, 51, 85, .3); background: rgba(10, 10, 15, .7); }
.account-out { border-radius: .5rem; }
.account-out:hover { color: var(--n-red-soft); background: rgba(255, 51, 85, .1); }

/* Ordinateur : les onglets à plat, l'onglet ouvert éclairé en rouge avec un tube allumé dessous. */
@media (min-width: 861px) {
  .dock .tabs { gap: .15rem; padding: .2rem; border-radius: .65rem; background: rgba(0, 0, 0, .28); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05); }
  .dock .tabs > a, .dock .tab-more > summary { border-radius: .45rem; color: rgba(236, 228, 236, .62); }
  .dock .tabs > a:hover:not([aria-current="page"]), .dock .tab-more > summary:hover { color: #dffbff; text-shadow: 0 0 8px rgba(47, 230, 255, .6); }
  .dock .tabs > a:hover:not([aria-current="page"]) svg { color: var(--n-cyan); filter: drop-shadow(0 0 3px rgba(47, 230, 255, .7)); }
  .dock .tabs > a[aria-current="page"] { color: #fff !important; }
  .dock .tab-ink {
    border-radius: .45rem !important;
    background: linear-gradient(180deg, rgba(255, 51, 85, .16), rgba(255, 51, 85, .05)) !important;
    box-shadow: inset 0 0 0 1px rgba(255, 51, 85, .5), 0 0 18px rgba(255, 51, 85, .22) !important;
  }
  .dock .tab-ink::after {
    content: ""; position: absolute; left: 22%; right: 22%; bottom: 2px; height: 2px; border-radius: 2px;
    background: #ff8095; box-shadow: 0 0 4px #ff3355, 0 0 10px rgba(255, 51, 85, .9);
  }
  .dock .tab-more > summary > span:first-child { color: var(--n-red-soft); text-shadow: 0 0 6px rgba(255, 51, 85, .6); }
  .dock .tab-more[open] > summary, .dock .tab-more.is-active > summary { background: rgba(255, 51, 85, .1); color: #fff; }
  .dock .tab-more-menu { border: 1px solid rgba(255, 51, 85, .3); border-radius: .65rem; background: rgba(10, 10, 15, .96); box-shadow: 0 0 20px rgba(255, 51, 85, .15), 0 18px 40px -12px #000; }
}

/* Téléphone : la barre du bas en néon, l'onglet ouvert marqué d'un tube rouge au-dessus. */
@media (max-width: 860px) {
  .dock .tabs > a, .dock .tab-more > summary { border-radius: .5rem; color: rgba(236, 228, 236, .6); }
  .dock .tabs > a[aria-current="page"] { position: relative; background: linear-gradient(180deg, rgba(255, 51, 85, .14), transparent 85%) !important; box-shadow: none !important; color: #fff !important; text-shadow: 0 0 8px rgba(255, 51, 85, .9); }
  .dock .tabs > a[aria-current="page"]::before {
    content: ""; position: absolute; top: 0; left: 24%; right: 24%; height: 2px; border-radius: 2px;
    background: #ff8095; box-shadow: 0 0 4px #ff3355, 0 0 12px rgba(255, 51, 85, .9);
  }
  .dock .tab-more > summary > span:first-child { color: var(--n-red-soft) !important; text-shadow: 0 0 6px rgba(255, 51, 85, .6); }
}

/* ======================================================================
   Passe UX et mouvement (30 octobre 2026). Lecture : app de gacha pour la TIG, ruelle de Tokyo au néon,
   cadrans ÉNERGIE 3 / RYTHME 2 / MOUVEMENT 2. Ce qui change, et pourquoi :
   1. L'accueil sert à ouvrir un booster : le sachet et « Invoquer » remontent dans le premier écran
      (nouveautés, choix de l'univers et licences plus compacts, licences sur une seule ligne).
   2. Un seul mouvement permanent sur l'accueil, le sachet (c'est lui qu'on touche). Le reste ne bouge plus tout
      seul : les enseignes et les modèles 3D réagissent au survol, les cadeaux prêts gigotent trois fois puis s'arrêtent.
   3. Le néon garde sa place sur ce qui compte (onglet ouvert, Invoquer, licence choisie) ; les panneaux gardent
      leur fil rouge mais perdent leur halo, pour que ces accents ressortent.
   4. Les titres de section passent dans la police des enseignes (il restait du sérif de l'ancienne version).
   5. Le contour de focus clavier passe en cyan, la couleur de « ce qui est sélectionné ».
   6. Réglage « réduire les animations » : plus aucune boucle.
   ====================================================================== */

/* 2. Mouvement : les boucles décoratives s'arrêtent. */
.prop, .uni-model, .mn-fig, .mn-logo { animation: none !important; }
.uni-btn:hover .uni-model { transform: translateY(-5px) rotate(var(--rot, 0deg)); }
.gift.is-today svg, .perk svg { animation-iteration-count: 3 !important; }
.perk.perk-ready::after, .perk-ready::before { animation-iteration-count: 3 !important; }
.pack-count::after { animation-iteration-count: 2 !important; }
/* Le reflet du bouton Invoquer passe deux fois à l'arrivée, puis seulement au survol. */
.btn-invoke::after { animation-iteration-count: 2 !important; }
.btn-invoke:hover:not(:disabled)::after { animation: inv-shine-once .9s ease-out 1 !important; }
@keyframes inv-shine-once { from { left: -40%; } to { left: 130%; } }

/* 3. Halo : seulement sur l'accent. Les panneaux gardent leur fil rouge, sans lueur autour. */
.home-card, .stage, .frame, .filters, .atelier-feed .rail-block, .defi, .shop-pack, .profile-block {
  box-shadow: 0 18px 44px rgba(0, 0, 0, .38), inset 0 1px 0 rgba(255, 255, 255, .04) !important;
}
.defi { border-color: rgba(255, 51, 85, .14) !important; }
.defi:hover { border-color: rgba(255, 51, 85, .4) !important; }
.free-badge, .pick-universe .free-badge { box-shadow: none !important; }

/* 4. Titres de section : la police des enseignes, comme le reste. */
.section-title, .rail-title, .shop-pack-text h3, .earn-item h3, .market-door strong, .sheet h2, .detail-body h2,
.home-daily-title, .figure-shop-head h3, .ladder-rank {
  font-family: var(--n-jp) !important; font-weight: 400 !important; font-style: normal !important; letter-spacing: .01em !important;
}
.section-title { font-size: clamp(1.25rem, 2vw, 1.6rem) !important; }
.shop-wallet strong { font-family: var(--ui) !important; font-weight: 900 !important; color: var(--n-cyan) !important; text-shadow: var(--n-glow-cyan); }
.market-door { border-color: rgba(47, 230, 255, .3) !important; background: linear-gradient(90deg, rgba(47, 230, 255, .07), transparent 60%), var(--n-panel) !important; }
.market-door-go { color: var(--n-cyan) !important; }
#shop-switch button[aria-pressed="true"] { color: #fff !important; text-shadow: 0 0 8px rgba(255, 51, 85, .8); }
#shop-switch button[aria-pressed="true"]::after { background: var(--n-red) !important; box-shadow: 0 0 8px rgba(255, 51, 85, .8); }

/* 5. Focus clavier : un contour cyan bien visible partout. */
:focus-visible { outline: 2px solid var(--n-cyan) !important; outline-offset: 3px; }
.card-btn:focus-visible { outline: 3px solid var(--n-cyan) !important; }

/* 1. Premier écran, ordinateur : nouveautés plus basses, univers plus fins, licences sur une ligne. */
@media (min-width: 861px) {
  .news .kai-news { min-height: 0 !important; padding: .8rem 2rem .9rem 2.4rem !important; gap: 2rem !important; grid-template-columns: 15rem minmax(0, 1fr) !important; }
  .news .kai-news .kai-news-art, .monster-news .mn-art { height: 6.6rem !important; }
  .monster-news .mn-fig { height: 7.2rem !important; margin-bottom: .5rem !important; }
  .monster-news .mn-logo { width: 6.6rem !important; }
  .monster-news .mn-art::before { width: 8rem; height: 8rem; }
  .news .kai-news-note { margin-bottom: .1rem; }
  .uni-tabs { padding-top: 1rem !important; gap: .8rem !important; }
  .uni-btn { min-height: 4.6rem !important; padding-block: .6rem !important; }
  .uni-kai .uni-model { height: 6rem !important; }
  .uni-jv .uni-model { height: 4.2rem !important; bottom: .5rem !important; }
  .pu-games.pu-jv { grid-template-columns: repeat(auto-fit, minmax(5.2rem, 1fr)) !important; }
  .pu-jv .kp-tile { padding: .45rem .25rem .4rem !important; }
  .pu-jv .kp-pack { height: 3rem !important; width: auto !important; }
}

/* 1. Premier écran, téléphone : les licences défilent sur une ligne, les blocs du haut s'affinent. */
@media (max-width: 600px) {
  .uni-tabs { padding-top: .7rem !important; }
  .uni-btn { min-height: 3.6rem !important; }
  .uni-kai .uni-model { height: 3.6rem !important; top: -.7rem !important; }
  .uni-jv .uni-model { height: 2.4rem !important; top: -.35rem !important; }
  .pu-games.pu-jv {
    display: flex !important; gap: .4rem; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none;
    margin-inline: -.2rem; padding: .1rem .2rem .2rem;
  }
  .pu-games.pu-jv::-webkit-scrollbar { display: none; }
  .pu-jv .kp-tile { flex: 0 0 4.7rem; scroll-snap-align: start; padding: .35rem .2rem .35rem !important; gap: .2rem !important; }
  .pu-jv .kp-pack { height: 2.3rem !important; width: auto !important; }
  .pu-jv .kp-name { font-size: .68rem; }
  .pu-jv .kp-tile .free-badge { top: .2rem !important; right: .2rem !important; height: 1rem !important; font-size: .58rem !important; }
}

/* 6. Réduire les animations : aucune boucle, nulle part. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-iteration-count: 1 !important; }
  .booster-pack, .booster-pack .pack-sheen { animation: none !important; }
}
/* Suite : quelques pixels de plus pour que « Invoquer » tienne dans le premier écran. */
@media (min-width: 861px) {
  .atelier .stage { padding-top: 1.1rem !important; row-gap: .7rem !important; }
  .news .kai-news { padding-block: .55rem .7rem !important; }
  .news .kai-news .kai-news-art { height: 5.8rem !important; }
}
@media (max-width: 600px) {
  .stage > .lede { display: none !important; }
  .uni-btn .free-badge { position: absolute !important; right: .45rem; bottom: .45rem; left: auto !important; top: auto !important; margin: 0 !important; }
}
@media (max-width: 600px) {
  .news .kai-news .eyebrow { display: none; }
  .news .kai-news .kai-news-art, .monster-news .mn-art { height: 3.6rem !important; }
  .news .kai-news { padding-block: .45rem !important; }
  .pu-jv .kp-ico { display: none !important; }
  .stage > .stage-title { font-size: 1.85rem !important; margin: 0 !important; }
}
@media (max-width: 600px) {
  /* Les quatre quantités sur une ligne : le bouton Invoquer remonte d'autant. */
  .stage > .qty { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: .3rem !important; }
  .stage > .qty button { min-height: 2.5rem !important; padding: 0 !important; font-size: .82rem !important; }
}

/* Récompense du jour : sous chaque jour, son gain en petite plaque de néon. L'icône ne se sépare jamais de son
   nombre ; énergie en rouge, essence en cyan, comme dans la barre du haut. Le 7e jour empile ses deux gains. */
.sd-r { display: flex !important; flex-direction: column; align-items: center; gap: .2rem !important; font: 800 .7rem/1 var(--ui) !important; color: #fff !important; }
.sd-g {
  display: inline-flex; align-items: center; gap: .22rem; padding: .2rem .38rem .2rem .3rem; border-radius: .35rem; white-space: nowrap;
  font-variant-numeric: tabular-nums; letter-spacing: 0;
}
.sd-g-essence { color: #dffbff; background: rgba(47, 230, 255, .1); box-shadow: inset 0 0 0 1px rgba(47, 230, 255, .28); }
.sd-g-energy { color: #ffe3e8; background: rgba(255, 51, 85, .12); box-shadow: inset 0 0 0 1px rgba(255, 51, 85, .32); }
.sd-g .ico-essence {
  position: relative; width: .62rem !important; height: .62rem !important; border-radius: 0 !important; background: none !important; box-shadow: none !important;
  -webkit-mask: none !important; mask: none !important;
}
.sd-g .ico-essence::after { content: ""; position: absolute; inset: 0; background: var(--n-cyan); clip-path: polygon(50% 0, 100% 40%, 50% 100%, 0 40%); }
.sd-g .ico-energy { width: .42rem !important; height: .64rem !important; background: #ff8095 !important; filter: none !important; }
/* Jours passés : éteints. Jour du cadeau : plaques allumées. Septième jour : liseré ambre. */
.sd.is-done .sd-r { opacity: .38 !important; }
.sd.is-today .sd-g-essence { background: rgba(47, 230, 255, .18); box-shadow: inset 0 0 0 1px rgba(47, 230, 255, .6), 0 0 10px rgba(47, 230, 255, .25); }
.sd.is-today .sd-g-energy { background: rgba(255, 51, 85, .2); box-shadow: inset 0 0 0 1px rgba(255, 51, 85, .65), 0 0 10px rgba(255, 51, 85, .25); }
.sd.is-big:not(.is-done) .sd-g { box-shadow: inset 0 0 0 1px rgba(255, 182, 72, .55); }
@media (max-width: 600px) {
  .sd-r { font-size: .62rem !important; }
  .sd-g { padding: .16rem .28rem .16rem .22rem; gap: .16rem; }
}

/* Derniers gros tirages : le même bandeau d'enseigne que la récompense du jour, avec son kanji (速報 : les dernières nouvelles). */
#feed .rail-block { overflow: hidden; }
#feed .rail-block > .eyebrow:first-child {
  position: relative; display: flex; align-items: center; gap: .5rem;
  margin: -1.3rem -1.6rem .9rem; padding: .62rem 3.3rem .58rem 1.6rem;
  border-bottom: 1px solid rgba(255, 51, 85, .28);
  background: linear-gradient(90deg, rgba(255, 51, 85, .14), rgba(255, 51, 85, .03) 70%);
  color: var(--n-red-soft); font-size: .72rem; text-shadow: 0 0 8px rgba(255, 51, 85, .5);
}
#feed .rail-block > .eyebrow:first-child::after {
  content: "速報"; position: absolute; right: .85rem; top: 50%; translate: 0 -50%;
  font: 400 .9rem/1 var(--n-jp); color: var(--n-cyan); text-shadow: var(--n-glow-cyan); letter-spacing: 0;
}
@media (max-width: 600px) {
  #feed .rail-block > .eyebrow:first-child { margin: -1rem -1.1rem .8rem; padding-left: 1.1rem; }
}

/* Bandeau Pokémon : la Pokéball tremble trois fois comme pendant une capture, puis se fige ; les silhouettes des trois
   Pokémon attendent derrière (en couleur une fois attrapés). */
.poke-news .eyebrow { color: #ffcb05; text-shadow: 0 0 8px rgba(255, 203, 5, .45); }
.poke-news .kai-news-title { text-shadow: 0 0 2px #fff, 0 0 14px rgba(255, 60, 60, .7); }
.poke-news .btn-primary { background: linear-gradient(180deg, #ff4b4b, #c8102e) !important; border-color: rgba(255, 190, 190, .7) !important; box-shadow: 0 0 18px rgba(255, 60, 60, .4) !important; color: #fff !important; }
.pk-art { position: relative; height: 9rem; display: grid; place-items: end center; }
.pk-mon { position: absolute; bottom: 1.4rem; left: 50%; width: 5.4rem; height: auto; translate: calc(-50% + var(--i) * 3.6rem) 0; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .6)); }
.pk-mon:nth-of-type(2), .pk-mon:nth-of-type(3) { bottom: 3.4rem; width: 4.6rem; }
.pk-mon[src$="-ombre.webp"] { filter: brightness(.35) drop-shadow(0 0 8px rgba(255, 203, 5, .35)); opacity: .9; }
.pk-ball { position: relative; z-index: 2; width: 5.4rem; height: auto; margin-bottom: .4rem; transform-origin: 50% 90%; filter: drop-shadow(0 10px 12px rgba(0, 0, 0, .7)); animation: pk-catch 3.6s ease-in-out infinite; }
@keyframes pk-catch {
  0%, 8% { rotate: 0deg; }
  13% { rotate: -16deg; } 18% { rotate: 12deg; } 22% { rotate: 0deg; }
  34% { rotate: 0deg; } 39% { rotate: -16deg; } 44% { rotate: 12deg; } 48% { rotate: 0deg; }
  60% { rotate: 0deg; } 65% { rotate: -16deg; } 70% { rotate: 12deg; } 74% { rotate: 0deg; }
  80% { rotate: 0deg; scale: 1; filter: drop-shadow(0 10px 12px rgba(0, 0, 0, .7)); }
  84% { scale: 1.08; filter: drop-shadow(0 10px 12px rgba(0, 0, 0, .7)) drop-shadow(0 0 16px rgba(255, 255, 255, .9)); }
  90%, 100% { scale: 1; filter: drop-shadow(0 10px 12px rgba(0, 0, 0, .7)); }
}
@media (max-width: 600px) {
  .pk-art { height: 6.6rem; }
  .pk-mon { width: 3.8rem; bottom: 1.1rem; translate: calc(-50% + var(--i) * 2.6rem) 0; }
  .pk-mon:nth-of-type(2), .pk-mon:nth-of-type(3) { bottom: 2.5rem; width: 3.2rem; }
  .pk-ball { width: 4.2rem; }
}
@media (max-width: 600px) { .news .poke-news .pk-art { height: 4.4rem !important; } .news .poke-news .pk-mon { width: 2.8rem; bottom: .7rem; translate: calc(-50% + var(--i) * 1.9rem) 0; } .news .poke-news .pk-mon:nth-of-type(2), .news .poke-news .pk-mon:nth-of-type(3) { bottom: 1.6rem; width: 2.3rem; } .news .poke-news .pk-ball { width: 3.2rem; margin-bottom: .2rem; } }
@media (prefers-reduced-motion: reduce) { .pk-ball { animation: none; } }

/* Trophées du profil : une étagère de coupes, une par collection terminée. */
.trophy-shelf { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: .8rem; margin: 0; padding: .4rem 0 0; list-style: none; }
.trophy { --t1: #e2a36b; --t2: #8a4f24; --glow: rgba(226, 163, 107, .35);
  position: relative; display: flex; flex-direction: column; align-items: center; gap: .25rem; padding: 1rem .6rem .8rem; text-align: center;
  border: 1px solid color-mix(in srgb, var(--t1) 35%, transparent); border-radius: .9rem;
  background: radial-gradient(120% 80% at 50% 0%, color-mix(in srgb, var(--t1) 16%, transparent), transparent 70%), var(--panel); }
.trophy::after { content: ''; position: absolute; left: 18%; right: 18%; bottom: .55rem; height: 3px; border-radius: 3px; background: color-mix(in srgb, var(--t1) 45%, transparent); filter: blur(1px); }
.trophy.t-argent { --t1: #e4e9f2; --t2: #7d8796; --glow: rgba(228, 233, 242, .3); }
.trophy.t-or { --t1: #ffd56a; --t2: #b07a12; --glow: rgba(255, 213, 106, .45); }
.trophy.t-diamant { --t1: #8ff3ff; --t2: #3a7fd6; --glow: rgba(143, 243, 255, .5); }
.trophy-cup { width: 52px; height: 60px; filter: drop-shadow(0 0 12px var(--glow)); }
.trophy-cup svg { width: 100%; height: 100%; overflow: visible; }
.trophy-cup .cup { fill: var(--t1); }
.trophy-cup .ears { stroke: var(--t1); }
.trophy-cup .base { fill: var(--t2); }
.trophy-cup .shine { fill: none; stroke: rgba(255, 255, 255, .7); stroke-width: 2.4; stroke-linecap: round; }
.trophy strong { font-size: .86rem; line-height: 1.2; overflow-wrap: anywhere; }
.trophy small { color: var(--muted); font-size: .72rem; margin-bottom: .45rem; }
.trophy.t-diamant .trophy-cup { animation: trophy-shine 3.2s ease-in-out infinite; }
@keyframes trophy-shine { 50% { filter: drop-shadow(0 0 20px var(--glow)) brightness(1.15); } }
@media (prefers-reduced-motion: reduce) { .trophy.t-diamant .trophy-cup { animation: none; } }
.defi-trophy { display: inline-block; margin-left: .3rem; padding: 0 .4rem; border-radius: 1rem; font-style: normal; font-size: .68rem; font-weight: 700; letter-spacing: .02em;
  color: #1a1206; background: #e2a36b; vertical-align: 1px; }
.defi-trophy.t-argent { background: #dfe5ee; }
.defi-trophy.t-or { background: #ffd56a; }
.defi-trophy.t-diamant { background: #8ff3ff; }
@media (max-width: 600px) { .trophy-shelf { grid-template-columns: repeat(2, 1fr); gap: .6rem; } }

/* Mode test : une vraie barre, visible, avec un bouton pour revenir à son compte (31 octobre 2026). */
.test-banner.test-bar { top: auto; bottom: calc(1rem + env(safe-area-inset-bottom, 0px)); left: 50%; translate: -50% 0; flex-direction: row; gap: .75rem;
  max-width: calc(100% - 2rem); padding: .5rem .5rem .5rem 1rem; border: 1px solid var(--essence); border-radius: 999px;
  background: color-mix(in srgb, var(--ink) 82%, var(--essence)); box-shadow: 0 0 0 1px rgb(0 0 0 / .3), 0 10px 30px rgb(0 0 0 / .45), 0 0 24px color-mix(in srgb, var(--essence) 35%, transparent); }
.test-banner.test-bar strong { writing-mode: horizontal-tb; rotate: none; font-size: .72rem; }
.test-banner.test-bar span { display: block; font-size: .8rem; color: var(--cream); opacity: .85; }
.test-banner.test-bar button { width: auto; height: auto; padding: .45rem .9rem; border-radius: 999px; font-size: .78rem; white-space: nowrap; }
@media (max-width: 760px) {
  .test-banner.test-bar { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
  .test-banner.test-bar span { display: none; }
}

/* Réglages. */
.settings { width: min(520px, calc(100% - 2rem)); padding: 0; }
.settings .sheet-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; padding: 1.2rem 1.2rem .6rem; }
.settings h2 { margin: .1rem 0 0; }
.set-list { display: grid; padding: 0 1.2rem; }
.set-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .85rem 0; border-top: 1px solid var(--line); cursor: pointer; }
.set-row span { display: grid; gap: .15rem; }
.set-row small { color: var(--muted); font-size: .8rem; }
.switch { appearance: none; flex: none; position: relative; width: 2.6rem; height: 1.5rem; margin: 0; border-radius: 999px; background: color-mix(in srgb, var(--cream) 18%, transparent); cursor: pointer; transition: background .2s; }
.switch::after { content: ''; position: absolute; top: .2rem; left: .2rem; width: 1.1rem; height: 1.1rem; border-radius: 50%; background: var(--cream); transition: translate .2s; }
.switch:checked { background: var(--pink); box-shadow: 0 0 12px color-mix(in srgb, var(--pink) 50%, transparent); }
.switch:checked::after { translate: 1.1rem 0; }
.switch:focus-visible { outline: 2px solid var(--essence); outline-offset: 2px; }
.set-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .6rem; padding: 1rem 1.2rem 1.2rem; border-top: 1px solid var(--line); }
.tab-more-menu button { display: block; width: 100%; padding: .7rem .75rem; border: 0; border-radius: .45rem; background: none; color: var(--muted); font: inherit; font-size: .88rem; text-align: left; cursor: pointer; }
.tab-more-menu button:hover { background: var(--panel-2); color: var(--cream); }

/* Événement de la semaine : trois cartes de l'anime en éventail. */
.week-news { border-color: rgba(95, 212, 255, .4); background: radial-gradient(60% 120% at 15% 50%, rgba(95, 212, 255, .16), transparent 70%), rgba(10, 10, 15, .8); box-shadow: 0 0 22px rgba(95, 212, 255, .12); }
.week-news .eyebrow { color: var(--essence, #5fd4ff); }
.kn-card { position: absolute; bottom: .3rem; left: 50%; width: 4.4rem; aspect-ratio: 5 / 7; object-fit: cover; border-radius: .4rem; border: 1px solid rgba(255, 255, 255, .25);
  transform: translateX(calc(-50% + var(--i) * 3rem)) rotate(calc(var(--i) * 8deg)); transform-origin: 50% 120%; box-shadow: 0 8px 18px rgba(0, 0, 0, .6); }
.kn-card:nth-child(2) { z-index: 1; width: 4.9rem; }
/* Booster d'un anime, dans la boutique. */
.shop-anime-pick { display: block; margin: .3rem 0 .4rem; }
.shop-anime-pick select { width: 100%; max-width: 22rem; }
.shop-anime-have { margin: 0 0 .6rem; color: var(--muted); font-size: .85rem; }

.coll-trophy { font-weight: 700; color: #e2a36b; }
.coll-trophy.t-argent { color: #dfe5ee; } .coll-trophy.t-or { color: #ffd56a; } .coll-trophy.t-diamant { color: #8ff3ff; }

/* Booster éphémère de la semaine : sachet Kaïra viré au cyan électrique, avec une pastille « cette semaine ». */
.pack-g-kai.pack-k-semaine > .pack-img { filter: hue-rotate(150deg) saturate(1.6) brightness(1.05) drop-shadow(0 0 1.2rem rgba(60, 220, 255, .3)) drop-shadow(0 1.2rem 1.4rem rgba(0, 0, 0, .62)); }
.pack-g-kai.pack-k-semaine { --kp: #3fe0ff; }
.pu-kai .kp-semaine { --kp: #3fe0ff; position: relative; }
.pu-kai .kp-semaine .kp-pack { filter: hue-rotate(150deg) saturate(1.6) drop-shadow(0 6px 8px rgba(0, 0, 0, .55)); }
.pu-kai .kp-badge { position: absolute; top: .3rem; left: 50%; translate: -50% 0; z-index: 2; padding: .12rem .45rem; border-radius: 999px;
  background: #3fe0ff; color: #04131a; font-size: .58rem; font-weight: 800; letter-spacing: .02em; line-height: 1.2; white-space: nowrap; box-shadow: 0 0 10px rgba(63, 224, 255, .5); }
.pu-kai .kp-semaine { padding-top: 1.3rem !important; }
/* Autant de tuiles que de boosters, toutes sur une ligne (la 7e ne part plus seule en dessous). */
@media (min-width: 601px) {
  .pu-games.pu-kai:not(.pu-jv) { grid-template-columns: none !important; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
}
.kn-pack.kp-semaine { filter: hue-rotate(150deg) saturate(1.6) drop-shadow(0 8px 10px rgba(0, 0, 0, .6)); }
.pack-ghost.kg-semaine img { filter: hue-rotate(150deg) saturate(1.6) brightness(.8) drop-shadow(0 18px 22px rgba(0, 0, 0, .6)); }
.pu-kai .kp-semaine .kp-name { max-width: 7.5rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Sondage du booster de la semaine prochaine : trois choix, la barre de fond montre la part des votes. */
.poll-news { grid-template-columns: 1fr; border-color: rgba(63, 224, 255, .35); background: radial-gradient(60% 120% at 85% 50%, rgba(63, 224, 255, .12), transparent 70%), rgba(10, 10, 15, .8); }
.poll-news .eyebrow { color: #3fe0ff; }
.poll-opts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; margin: .5rem 0 .4rem; }
.poll-opt { position: relative; overflow: hidden; display: flex; align-items: center; gap: .55rem; min-width: 0; padding: .45rem .55rem; border: 1px solid rgba(255, 255, 255, .14); border-radius: .6rem;
  background: linear-gradient(90deg, rgba(63, 224, 255, .2) var(--p), transparent var(--p)), rgba(255, 255, 255, .03); color: var(--cream); font: inherit; text-align: left; cursor: pointer; transition: border-color .2s, transform .2s; }
.poll-opt:hover:not(:disabled) { border-color: #3fe0ff; transform: translateY(-1px); }
.poll-opt:disabled { cursor: default; }
.poll-opt.is-mine { border-color: #3fe0ff; box-shadow: 0 0 14px rgba(63, 224, 255, .35); }
.poll-opt img { flex: none; width: 2.2rem; aspect-ratio: 5 / 7; object-fit: cover; border-radius: .3rem; }
.poll-opt span { display: grid; min-width: 0; }
.poll-opt strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .82rem; }
.poll-opt small { color: var(--muted); font-size: .7rem; }
@media (max-width: 600px) { .poll-opts { grid-template-columns: 1fr; } .poll-opt img { width: 1.8rem; } }
.news .kai-news.poll-news { grid-template-columns: minmax(0, 1fr) !important; padding-right: 3rem; }
.poll-news .kai-news-body { align-items: stretch; }
.poll-news .kai-news-title { text-shadow: 0 0 10px rgba(63, 224, 255, .55); }
@media (max-width: 600px) {
  .news .kai-news.poll-news { padding: .55rem 2.4rem .55rem .7rem !important; }
  .poll-news .poll-opts { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .3rem; margin: .25rem 0 0; }
  .poll-news .poll-opt { flex-direction: column; align-items: center; gap: .2rem; padding: .3rem; text-align: center; }
  .poll-news .poll-opt img { width: 1.6rem; }
  .poll-news .poll-opt strong { font-size: .68rem; max-width: 100%; }
  .poll-news .poll-opt small, .poll-news .eyebrow { display: none; }
}

/* Sachet illustré du booster de la semaine (Naruto…) : ses vraies couleurs, sans bandeau ajouté. */
.pack-g-kai.pack-k-semaine.pack-art > .pack-img { filter: drop-shadow(0 0 1.2rem rgba(255, 190, 60, .28)) drop-shadow(0 1.2rem 1.4rem rgba(0, 0, 0, .62)); }
.pack-art .pack-band { display: none !important; }
.pack-art .pack-sheen { -webkit-mask-image: var(--art) !important; mask-image: var(--art) !important; }
.pu-kai .kp-semaine .kp-pack[src*="booster-semaine"], .pack-ghost.kg-semaine img[src*="booster-semaine"] { filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .55)) !important; }

/* Notes de patch : des cartes courtes plutôt qu'un bloc de texte. */
.patch-notes .welcome-lead { margin-bottom: .8rem; }
.patch-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem; margin: 0; padding: 0; list-style: none; }
.patch-cards li { display: flex; align-items: flex-start; gap: .65rem; padding: .7rem .75rem; border: 1px solid rgba(255, 255, 255, .08); border-radius: .7rem;
  background: radial-gradient(120% 120% at 0% 0%, rgba(255, 51, 85, .1), transparent 60%), rgba(255, 255, 255, .025); }
.patch-cards .pc-ico { flex: none; display: grid; place-items: center; width: 2.2rem; height: 2.2rem; border-radius: .6rem; background: rgba(255, 255, 255, .06); font-size: 1.15rem; line-height: 1; }
.patch-cards div { display: grid; gap: .15rem; min-width: 0; }
.patch-cards strong { font-size: .92rem; color: var(--cream); }
.patch-cards span { color: var(--muted); font-size: .8rem; line-height: 1.35; }
.patch-older { margin-top: 1rem; border-top: 1px solid var(--line); padding-top: .7rem; }
.patch-older summary { cursor: pointer; color: var(--muted); font-size: .85rem; }
.patch-older h3 { margin: .2rem 0 .5rem; font-size: 1rem; }
.patch-older .patch-cards { grid-template-columns: 1fr; }
@media (max-width: 600px) { .patch-cards { grid-template-columns: 1fr; gap: .4rem; } .patch-cards li { padding: .55rem .65rem; } }

/* Booster de la semaine en tête, plus grand, posé sans cadre ; les boosters permanents un peu plus petits. */
.pu-kai .kp-tile:not(.kp-semaine) .kp-pack { height: 3.3rem !important; }
.pu-kai .kp-tile.kp-semaine { border: 0 !important; background: none !important; box-shadow: none !important; overflow: visible; padding-top: 1.4rem !important; }
.pu-kai .kp-tile.kp-semaine:hover { transform: translateY(-2px); }
.pu-kai .kp-semaine .kp-pack { height: 6.2rem !important; transform-origin: 50% 100%; filter: drop-shadow(0 0 14px rgba(255, 190, 60, .35)) drop-shadow(0 8px 12px rgba(0, 0, 0, .6)) !important; }
.pu-kai .kp-semaine[aria-pressed="true"] .kp-pack { filter: drop-shadow(0 0 22px rgba(63, 224, 255, .55)) drop-shadow(0 8px 12px rgba(0, 0, 0, .6)) !important; }
.pu-kai .kp-semaine .kp-name { font-size: .92rem; color: #fff; }
.pu-kai .kp-semaine .kp-badge { top: 0; }
@media (min-width: 601px) {
  .pu-games.pu-kai:not(.pu-jv):has(.kp-semaine) { grid-template-columns: minmax(0, 1.35fr) !important; align-items: end; }
}
@media (max-width: 600px) {
  .pu-kai .kp-tile:not(.kp-semaine) .kp-pack { height: 2.2rem !important; }
  .pu-kai .kp-tile.kp-semaine { flex: 0 0 6rem !important; padding-top: 1.2rem !important; }
  .pu-kai .kp-semaine .kp-pack { height: 3.6rem !important; }
  .pu-kai .kp-semaine .kp-badge { font-size: .52rem; }
}

/* Booster de la semaine, version soignée : halo doré qui respire, sachet incliné, pastille compte à rebours. */
.pu-kai .kp-tile.kp-semaine { isolation: isolate; gap: .3rem !important; padding: 1.5rem .2rem .2rem !important; }
.pu-kai .kp-tile.kp-semaine::after { display: none !important; }
.pu-kai .kp-halo { position: absolute; z-index: -1; left: 50%; top: 52%; width: 7rem; height: 7rem; translate: -50% -50%; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 196, 70, .38), rgba(255, 120, 40, .12) 45%, transparent 70%); animation: kp-breathe 3.2s ease-in-out infinite; }
.pu-kai .kp-semaine[aria-pressed="true"] .kp-halo { background: radial-gradient(circle, rgba(255, 206, 90, .55), rgba(63, 224, 255, .16) 50%, transparent 72%); }
@keyframes kp-breathe { 50% { scale: 1.12; opacity: .75; } }
.pu-kai .kp-semaine .kp-pack { rotate: -6deg; transition: rotate .25s ease, translate .25s ease !important; }
.pu-kai .kp-semaine:hover .kp-pack, .pu-kai .kp-semaine[aria-pressed="true"] .kp-pack { rotate: 0deg; translate: 0 -4px; transform: none !important; }
.pu-kai .kp-semaine .kp-badge { top: .1rem; padding: .18rem .55rem; background: linear-gradient(90deg, #ffd25a, #ff8a3d); color: #2a1300;
  font-size: .6rem; letter-spacing: .06em; text-transform: uppercase; box-shadow: 0 0 14px rgba(255, 160, 60, .55); }
.pu-kai .kp-semaine .kp-sub { font: 700 .56rem/1 var(--ui); letter-spacing: .08em; text-transform: uppercase; color: #ffc65a; }
.pu-kai .kp-semaine .kp-name { font: 400 1.05rem/1 var(--n-jp, inherit); letter-spacing: .02em; color: #fff;
  text-shadow: 0 0 10px rgba(255, 180, 60, .6); }
.pu-kai .kp-semaine[aria-pressed="true"] .kp-name { text-shadow: 0 0 12px rgba(255, 200, 80, .9); }
@media (prefers-reduced-motion: reduce) { .pu-kai .kp-halo { animation: none; } }
@media (max-width: 600px) { .pu-kai .kp-halo { width: 5rem; height: 5rem; } .pu-kai .kp-semaine .kp-name { font-size: .85rem; } .pu-kai .kp-semaine .kp-sub { font-size: .48rem; } }
@media (max-width: 600px) {
  .pu-games.pu-kai:has(.kp-semaine) { padding-top: .5rem !important; }
  .pu-kai .kp-tile.kp-semaine { flex-basis: 6.6rem !important; padding-top: 1.45rem !important; }
  .pu-kai .kp-semaine .kp-sub { white-space: nowrap; }
}

/* Motion (motion.js?v=99d0e466f7) prend le relais de ces animations CSS une fois chargé. */
.has-motion .sheet[open], .has-motion .detail[open], .has-motion .toast:not(.is-leaving),
.has-motion .spread.summary > .rc, .has-motion .spread.single > .rc, .has-motion .grid.enter .card-btn,
.has-motion .view.entering, .has-motion .booster-pack.swap .pack { animation: none !important; }

/* Reflet holographique WebGL (holo3d.js?v=a9639d05d0) : posé sur l'illustration, en mode « éclaircir ». */
.holo3d { position: absolute; inset: 0; z-index: 2; width: 100% !important; height: 100% !important; pointer-events: none; border-radius: inherit;
  mix-blend-mode: color-dodge; opacity: .42; }
.card.r5 .holo3d { opacity: .5; }
.card:has(.holo3d) .f-art::before, .card:has(.holo3d)::before { opacity: 0 !important; animation: none !important; }
/* Décor 3D de l'ouverture (opening3d.js?v=86543cd9ad) : derrière tout le reste. */
.opening3d { position: fixed; inset: 0; z-index: -1; width: 100% !important; height: 100% !important; pointer-events: none; opacity: .9; }


/* ======================================================================
   Barre de navigation, passe de calme (31 octobre 2026), d'après IT-Tools : une barre qu'on lit sans qu'elle crie.
   - Un seul marqueur pour l'onglet ouvert : un fond rouge léger, le texte blanc, l'icône rouge. Plus de cadre néon,
     de halo ni de trait lumineux dessous (quatre signaux pour une seule information).
   - Survol : un fond à peine éclairé, sans lueur cyan.
   - Pastille des défis : un compteur net à côté du mot, sans halo ni anneau qui pulse en boucle.
   Le néon reste sur ce qui compte ailleurs (Invoquer, licence choisie).
   ====================================================================== */
.dock .tabs > a, .dock .tab-more > summary { text-shadow: none !important; transition: background-color .15s ease, color .15s ease; }
.dock .tabs > a svg, .dock .tab-more > summary svg { filter: none !important; }
.dock .tabs > a:hover:not([aria-current="page"]), .dock .tab-more > summary:hover { color: #fff !important; background: rgba(255, 255, 255, .05) !important; text-shadow: none !important; }
.dock .tabs > a:hover:not([aria-current="page"]) svg { color: inherit !important; }
.tabs a[aria-current="page"], .dock .tabs > a[aria-current="page"] { color: #fff !important; text-shadow: none !important; }
.tabs a[aria-current="page"] svg, .dock .tabs > a[aria-current="page"] svg { color: var(--n-red-soft) !important; }
.dock .tab-ink { background: rgba(255, 51, 85, .14) !important; box-shadow: none !important; }
.dock .tab-ink::after { content: none !important; }
.dock .tab-more > summary > span:first-child { text-shadow: none !important; }
.dock .tabs > a:focus-visible, .dock .tab-more > summary:focus-visible { outline: 2px solid var(--n-red-soft); outline-offset: 2px; }
.tabs .badge {
  position: static !important; margin-left: .1rem; min-width: 1.35rem; height: 1.15rem; padding: 0 .32rem;
  border: 0 !important; border-radius: .35rem !important; background: var(--n-red) !important; color: #fff !important;
  font: 700 .66rem/1 var(--ui); font-variant-numeric: tabular-nums; letter-spacing: 0; box-shadow: none !important;
}
.tabs .badge:not([hidden])::after { content: none !important; animation: none !important; }
@media (max-width: 860px) {
  .dock .tabs > a[aria-current="page"] { background: rgba(255, 51, 85, .12) !important; box-shadow: none !important; }
  .dock .tabs > a[aria-current="page"]::before { box-shadow: none !important; background: var(--n-red-soft) !important; }
  .tabs .badge { position: absolute !important; top: .15rem; left: calc(50% + .4rem); margin: 0; }
}

/* Booster de la semaine à la hauteur des autres (31 octobre 2026) : il dépassait de 50 px et laissait un grand vide
   au-dessus de la rangée. Le sachet est un peu plus petit, l'étiquette « Éphémère » se pose sur son haut au lieu
   d'occuper sa propre ligne, et toute la rangée s'aligne. */
.pu-games.pu-kai:not(.pu-jv) { align-items: stretch !important; }
.pu-kai .kp-tile.kp-semaine { padding: .55rem .2rem .45rem !important; justify-content: flex-end; }
.pu-kai .kp-semaine .kp-pack { height: 4.4rem !important; }
.pu-kai .kp-semaine .kp-badge { top: -.55rem !important; white-space: nowrap; }
.pu-kai .kp-halo { width: 5.6rem; height: 5.6rem; top: 45%; }
@media (max-width: 600px) {
  .pu-kai .kp-tile.kp-semaine { padding: .5rem .2rem .35rem !important; }
  .pu-kai .kp-semaine .kp-pack { height: 3rem !important; }
  .pu-kai .kp-semaine .kp-badge { top: -.45rem !important; }
}


/* Naruto qui court sur le trait du pied de page (31 octobre 2026), ordinateur seulement. La planche
   assets/props/naruto-course.webp contient 16 images d'un cycle de course de 0,63 s (rendu du modèle 3D animé) :
   elles défilent en place pendant que Naruto traverse la largeur, puis il attend hors champ avant de repasser. */
.footer { position: relative; }
.naruto-run { display: none; }
@media (min-width: 861px) and (prefers-reduced-motion: no-preference) {
  .naruto-run { display: block; position: absolute; left: 0; right: 0; top: -96px; height: 96px; overflow: hidden; pointer-events: none; }
  .naruto-run span {
    position: absolute; bottom: 0; left: 0; width: 96px; height: 96px;
    background: url("assets/props/naruto-course.webp?v=e7f4edaa6f") 0 0 / 1536px 96px no-repeat;
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .55));
    animation: nr-legs .63s steps(16) infinite, nr-cross 12s linear infinite;
  }
}
@keyframes nr-legs { to { background-position: -1536px 0; } }
@keyframes nr-cross { 0% { translate: -110px 0; } 55% { translate: calc(100vw + 10px) 0; } 100% { translate: calc(100vw + 10px) 0; } }

/* Mode test : la barre ne cache plus les boutons du bas (31 octobre 2026). Pendant l'ouverture d'un booster, un plein
   écran de carte ou une fenêtre, elle monte en haut de l'écran ; le reste du temps, la page garde de la place dessous. */
body.is-test { padding-bottom: 4.5rem; }
body:has(#opening:not([hidden])) .test-banner.test-bar,
body:has(#moment:not([hidden])) .test-banner.test-bar,
body:has(dialog[open]) .test-banner.test-bar {
  top: calc(.6rem + env(safe-area-inset-top, 0px)); bottom: auto; padding: .3rem .35rem .3rem .8rem; opacity: .92;
}
body:has(#opening:not([hidden])) .test-banner.test-bar span,
body:has(#moment:not([hidden])) .test-banner.test-bar span { display: none; }
@media (max-width: 760px) {
  /* Téléphone : pas de place libre en haut pendant l'ouverture (titre, compteurs, « Ranger ») : la barre se cache le temps
     de l'ouverture ou du plein écran, et revient dès qu'on les ferme. */
  body:has(#opening:not([hidden])) .test-banner.test-bar,
  body:has(#moment:not([hidden])) .test-banner.test-bar { display: none; }
}

/* Bandeaux des nouveautés, ordinateur (31 octobre 2026) : l'éventail de six sachets (16 rem) débordait de sa colonne
   (15 rem) sur le titre et touchait l'enseigne de gauche, pendant que la droite restait vide. La colonne s'élargit,
   l'éventail se resserre et se centre dedans, le bloc se décale de l'enseigne et le texte respire. */
@media (min-width: 861px) {
  .news .kai-news { grid-template-columns: 20rem minmax(0, 1fr) !important; gap: 3rem !important; padding-left: 4.2rem !important; padding-right: 3rem !important; }
  .news .kai-news:not(.rb-news) .kn-pack { width: 4.2rem; transform: translateX(calc(-50% + var(--i) * 2.05rem)) rotate(calc(var(--i) * 6deg)); }
  .news .kai-news-body { max-width: 34rem; }
}


/* Karaoké (31 octobre 2026) : carte musique. Le personnage de l'anime en fond, un vinyle qui dépasse en bas à droite,
   et une étiquette Opening / Ending / OST en haut. Le troisième grand bouton d'univers, en rose. */
.f-art .kar-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; }
.kar-disc { position: absolute; right: -18%; bottom: 14%; width: 62%; aspect-ratio: 1; border-radius: 50%; z-index: 1;
  background: radial-gradient(circle, #0c090e 0 6%, #ff408c 6.5% 24%, #0c090e 24.5% 26%, transparent 26.5%),
    repeating-radial-gradient(circle, #141018 0 2.2%, #221c28 2.4% 2.8%);
  box-shadow: 0 6px 14px rgba(0, 0, 0, .55); animation: kar-spin 9s linear infinite paused; }
.card-btn:hover .kar-disc, .rc.flipped .kar-disc { animation-play-state: running; }
@keyframes kar-spin { to { rotate: 360deg; } }
.kar-tag { position: absolute; top: 15%; left: 7%; z-index: 2; padding: .2em .6em; border-radius: .3em; font: 800 clamp(.45rem, 3.2cqw, .72rem)/1.2 var(--ui);
  letter-spacing: .04em; color: #fff; background: #ff3d8b; box-shadow: 0 2px 6px rgba(0, 0, 0, .45); }
.kar-tag.kar-ed { background: #7b5cff; }
.kar-tag.kar-ost { background: #0fb5a6; }
.fcard.missing .kar-disc { filter: grayscale(1) brightness(.5); }
.fcard.missing .kar-tag { filter: grayscale(1); opacity: .7; }
/* La plante Piranha qui chante (modèle 3D rendu en image, assets/props/plante-piranha.webp), comme la tuile de mahjong et la PlayStation. */
@media (prefers-reduced-motion: reduce) { .kar-disc { animation: none; } }
.uni-btn.uni-kar { --uc: #ff3d8b; }
.uni-kar .uni-model { height: 7.6rem; --rot: 10deg; animation-delay: -1.5s; }
@media (max-width: 600px) {
  .uni-kar .uni-model { height: 4rem !important; left: auto !important; right: .3rem !important; bottom: auto !important; top: -.9rem !important; }
}