:root {
  --bg:#0c0d0c;
  --panel:#141614;
  --panel2:#1b1e1b;
  --line:#292d29;
  --text:#f2f4f3;
  --muted:#939b95;
  --green:#a6e85d;
  --green2:#d6ff9d;
  --red:#ed6d67;
}

* {
  box-sizing:border-box;
}

body {
  margin:0;
  background:var(--bg);
  color:var(--text);
  font:14px Inter,Arial,sans-serif;
}

.app {
  min-height:100vh;
  display:flex;
}

aside {
  position:fixed;
  inset:0 auto 0 0;
  width:238px;
  border-right:1px solid var(--line);
  padding:27px 14px 18px;
  display:flex;
  flex-direction:column;
  background:#101110;
}

.logo {
  font:800 22px Outfit;
  color:#fff;
  text-decoration:none;
  margin:0 12px 32px;
}

.logo span {
  color:var(--green);
}

nav {
  display:grid;
  gap:3px;
}

nav a,.side-bottom a {
  display:flex;
  gap:11px;
  align-items:center;
  padding:10px 12px;
  border-radius:9px;
  color:#b7bdb8;
  text-decoration:none;
  font-weight:600;
}

nav a:hover,nav a.active {
  color:#eaffc9;
  background:#20251d;
}

.nav-icon {
  width:18px;
  text-align:center;
  color:#a6e85d;
}

.side-bottom {
  margin-top:auto;
}

.coin {
  border:0;
  background:#242a20;
  color:#d8ffab;
  width:100%;
  padding:10px 12px;
  border-radius:9px;
  text-align:left;
  font-weight:800;
  margin-bottom:8px;
}

main {
  width:min(1180px,calc(100% - 238px));
  margin-left:238px;
  padding:46px 52px 70px;
}

.page-head {
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  margin-bottom:30px;
}

h1 {
  font:700 32px Outfit;
  margin:0 0 7px;
  letter-spacing:-.5px;
}

h2 {
  font:700 18px Outfit;
  margin:0;
}

p {
  color:var(--muted);
  line-height:1.5;
  margin:0;
}

.eyebrow {
  color:var(--green);
  font-size:12px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.08em;
}

.button {
  border:0;
  border-radius:9px;
  padding:11px 16px;
  font:700 13px Inter;
  background:var(--green);
  color:#182111;
  cursor:pointer;
}

.button:hover {
  background:var(--green2);
}

.button.ghost {
  background:#20231f;
  color:#e6eae5;
  border:1px solid #303530;
}

.card {
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:13px;
}

.pack {
  min-height:310px;
  padding:38px;
  display:grid;
  place-items:center;
  text-align:center;
  background:radial-gradient(circle at 50% 0,#2b3b20,#151714 56%);
  position:relative;
  overflow:hidden;
}

.pack-icon {
  font-size:70px;
  filter:drop-shadow(0 10px 20px #000);
}

.pack h2 {
  font-size:25px;
  margin:16px 0 7px;
}

.pack .button {
  margin-top:21px;
  min-width:150px;
}

.stats {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:15px;
  margin-top:18px;
}

.stat {
  padding:19px;
}

.stat b {
  display:block;
  font:700 24px Outfit;
  margin-top:4px;
}

.toolbar {
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom:21px;
}

.filter,input {
  background:#191c19;
  border:1px solid #303530;
  color:#dfe4df;
  border-radius:8px;
  padding:10px 12px;
  font:600 12px Inter;
}

.filter.active {
  border-color:#a6e85d;
  color:#d9ffae;
}

.cards {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(202px,1fr));
  gap:14px;
}

.game-card {
  background:#171a17;
  border:1px solid #313731;
  border-radius:12px;
  overflow:hidden;
  min-height:246px;
  position:relative;
}

.card-art {
  height:111px;
  background:linear-gradient(135deg,#456739,#172b22);
  display:flex;
  align-items:center;
  justify-content:center;
  font:800 42px Outfit;
  color:#d8f5b8;
}

.rarity {
  position:absolute;
  top:8px;
  left:8px;
  padding:3px 6px;
  border-radius:5px;
  background:#3d8137;
  color:#eaffc9;
  font-size:10px;
  font-weight:800;
}

.game-card .info {
  padding:12px;
}

.game-card h3 {
  font:700 14px Outfit;
  margin:0 0 5px;
}

.game-card p {
  font-size:11px;
  height:32px;
  overflow:hidden;
}

.power {
  display:flex;
  gap:14px;
  margin-top:10px;
  font-size:11px;
  font-weight:800;
  color:#d4d8d5;
}

.power i {
  color:#ee766d;
  font-style:normal;
}

.power i+ i {
  color:#68b6ec;
}

.tabs {
  display:flex;
  gap:20px;
  border-bottom:1px solid var(--line);
  margin:0 0 24px;
}

.tabs button {
  border:0;
  background:none;
  color:var(--muted);
  padding:0 0 12px;
  font:700 13px Inter;
}

.tabs button.active {
  color:var(--green);
  border-bottom:2px solid var(--green);
}

.empty {
  padding:60px 25px;
  text-align:center;
}

.empty .emoji {
  font-size:37px;
  margin-bottom:12px;
}

.market-item {
  display:grid;
  grid-template-columns:82px 1fr auto;
  gap:15px;
  padding:13px;
  border-bottom:1px solid var(--line);
  align-items:center;
}

.market-item:last-child {
  border:0;
}

.thumb {
  height:65px;
  border-radius:8px;
  background:linear-gradient(135deg,#4e6143,#1b2920);
  display:grid;
  place-items:center;
  font:700 25px Outfit;
}

.bid {
  text-align:right;
  font-size:11px;
  color:var(--muted);
}

.bid b {
  display:block;
  color:var(--green);
  font-size:15px;
  margin-top:4px;
}

.profile {
  padding:30px;
}

.avatar {
  height:64px;
  width:64px;
  border-radius:50%;
  background:#314e35;
  color:#e0ffc2;
  display:grid;
  place-items:center;
  font:800 22px Outfit;
}

.profile-row {
  display:flex;
  gap:15px;
  align-items:center;
}

.setting {
  padding:19px 0;
  border-bottom:1px solid var(--line);
  display:flex;
  justify-content:space-between;
  gap:20px;
  align-items:center;
}

.setting:last-child {
  border:0;
}

.setting h3 {
  font-size:14px;
  margin:0 0 5px;
}

.toggle {
  width:39px;
  height:22px;
  background:#355432;
  border-radius:20px;
  padding:3px;
}

.toggle:after {
  content:'';
  display:block;
  width:16px;
  height:16px;
  border-radius:50%;
  background:#baff75;
  margin-left:17px;
}

.progress {
  height:7px;
  border-radius:10px;
  background:#282c29;
  overflow:hidden;
  margin-top:9px;
}

.progress span {
  display:block;
  height:100%;
  background:var(--green);
}

.achievement {
  padding:16px;
  display:grid;
  grid-template-columns:34px 1fr;
  gap:11px;
}

.achievement .title {
  font-weight:800;
  margin-bottom:4px;
}

.notice {
  padding:23px;
  border-left:3px solid var(--green);
  background:#192017;
  border-radius:10px;
}

.toast {
  position:fixed;
  bottom:24px;
  right:24px;
  opacity:0;
  transform:translateY(10px);
  transition:.2s;
  background:#d8ffae;
  color:#14200f;
  padding:12px 15px;
  border-radius:9px;
  font-weight:800;
}

.toast.show {
  opacity:1;
  transform:none;
}

.mobile-nav {
  display:none;
}

@media(max-width:750px) {
  aside {
    display:none;
  }
  main {
    width:100%;
    margin:0;
    padding:27px 17px 90px;
  }
  .mobile-nav {
    display:flex;
    position:fixed;
    bottom:0;
    left:0;
    right:0;
    z-index:5;
    background:#111311;
    border-top:1px solid var(--line);
    justify-content:space-around;
    padding:7px;
  }
  .mobile-nav a {
    font-size:0;
    padding:9px;
  }
  .mobile-nav .nav-icon {
    font-size:19px;
  }
  .page-head {
    margin-bottom:23px;
  }
  h1 {
    font-size:27px;
  }
  .stats {
    grid-template-columns:1fr;
  }
  .cards {
    grid-template-columns:repeat(2,1fr);
    gap:9px;
  }
  .game-card {
    min-height:220px;
  }
  .market-item {
    grid-template-columns:58px 1fr;
  }
  .market-item .bid {
    display:none;
  }
}

/* ───────────── Ajouts : états, rareté, modales, formulaires ───────────── */

:root {
  --r-C: #6f7771;
  --r-PC: #3d8137;
  --r-R: #2f6fb0;
  --r-SR: #8048c9;
  --r-UR: #d0762c;
  --r-L: #d9a521;
}

.hidden {
  display: none !important;
}

button {
  font-family: inherit;
  cursor: pointer;
}

button:disabled,
.button:disabled {
  opacity: .45;
  cursor: not-allowed;
}

.button.danger {
  background: #3a1d1c;
  color: #ffb5b0;
  border: 1px solid #5a2b29;
}

.button.small {
  padding: 7px 11px;
  font-size: 12px;
}

.row {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

.spacer {
  flex: 1;
}

.muted {
  color: var(--muted);
}

.section-title {
  margin: 30px 0 14px;
}

/* Navigation */
nav a {
  position: relative;
}

.badge {
  margin-left: auto;
  min-width: 19px;
  height: 19px;
  padding: 0 6px;
  border-radius: 10px;
  background: var(--red);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  display: grid;
  place-items: center;
}

.mobile-nav .badge {
  position: absolute;
  top: 2px;
  right: 0;
  font-size: 10px;
  min-width: 16px;
  height: 16px;
}

/* Cartes */
.game-card {
  cursor: pointer;
  transition: transform .15s, border-color .15s;
}

.game-card:hover {
  transform: translateY(-2px);
  border-color: #48514a;
}

.game-card .card-art {
  background: linear-gradient(135deg, var(--rc, #456739), #141814);
}

.game-card.not-owned {
  opacity: .45;
  filter: grayscale(.8);
}

.game-card.not-owned:hover {
  opacity: .8;
}

[data-r="C"] { --rc: var(--r-C); }
[data-r="PC"] { --rc: var(--r-PC); }
[data-r="R"] { --rc: var(--r-R); }
[data-r="SR"] { --rc: var(--r-SR); }
[data-r="UR"] { --rc: var(--r-UR); }
[data-r="L"] { --rc: var(--r-L); }

.rarity {
  background: var(--rc, #3d8137);
  color: #fff;
  text-shadow: 0 1px 2px #0006;
}

.market-item .rarity,
.inline-rarity {
  position: static;
  display: inline-block;
  margin-bottom: 5px;
}

.game-card[data-r="L"] {
  border-color: #6d5717;
  box-shadow: 0 0 22px #d9a52133;
}

.copies {
  position: absolute;
  top: 8px;
  right: 40px;
  padding: 3px 6px;
  border-radius: 5px;
  background: #000a;
  font-size: 10px;
  font-weight: 800;
}

.new-tag {
  position: absolute;
  top: 8px;
  right: 8px;
  padding: 3px 6px;
  border-radius: 5px;
  background: var(--green);
  color: #182111;
  font-size: 10px;
  font-weight: 800;
}

.favorite {
  position: absolute;
  top: 5px;
  right: 6px;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 7px;
  background: #0008;
  color: #fff;
  font-size: 15px;
}

.favorite.active {
  color: #ffd45e;
}

.thumb {
  background: linear-gradient(135deg, var(--rc, #4e6143), #172018);
}

/* Paquets */
.pack-count {
  font: 700 13px Inter;
  color: var(--green);
  margin-top: 10px;
}

.reveal .game-card {
  animation: flip .45s both;
}

.reveal .game-card:nth-child(2) { animation-delay: .25s; }
.reveal .game-card:nth-child(3) { animation-delay: .5s; }
.reveal .game-card:nth-child(4) { animation-delay: .75s; }
.reveal .game-card:nth-child(5) { animation-delay: 1s; }

@keyframes flip {
  from {
    opacity: 0;
    transform: rotateY(90deg) scale(.9);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* Onglets */
.tabs button {
  cursor: pointer;
}

.tabs .count {
  margin-left: 5px;
  color: var(--muted);
}

/* Modales */
.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 20;
  background: #000b;
  display: grid;
  place-items: center;
  padding: 18px;
  animation: fade .15s;
}

.modal {
  position: relative;
  width: min(760px, 100%);
  max-height: calc(100vh - 36px);
  overflow: auto;
  padding: 26px;
}

.modal.narrow {
  width: min(440px, 100%);
}

.modal-close {
  position: absolute;
  top: 12px;
  right: 14px;
  border: 0;
  background: none;
  color: var(--muted);
  font-size: 24px;
}

.modal .cards {
  margin-top: 18px;
}

.modal-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  flex-wrap: wrap;
  margin-top: 22px;
}

@keyframes fade {
  from { opacity: 0; }
}

/* Formulaires */
label.field {
  display: grid;
  gap: 6px;
  margin-top: 14px;
  font-weight: 700;
  font-size: 12px;
  color: #c9cfca;
}

select,
textarea {
  background: #191c19;
  border: 1px solid #303530;
  color: #dfe4df;
  border-radius: 8px;
  padding: 10px 12px;
  font: 600 13px Inter;
}

textarea {
  resize: vertical;
  min-height: 80px;
}

input:focus,
select:focus,
textarea:focus,
button:focus-visible,
a:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 1px;
}

.toolbar input[data-search],
.toolbar input[data-market-search] {
  flex: 1;
  min-width: 200px;
}

.filter {
  cursor: pointer;
}

/* Interrupteurs */
.toggle {
  border: 0;
  flex-shrink: 0;
  cursor: pointer;
}

.toggle.off {
  background: #2a2e2a;
}

.toggle.off:after {
  margin-left: 0;
  background: #7b837d;
}

/* Listes génériques */
.list-item {
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
}

.list-item:last-child {
  border: 0;
}

.list-item .avatar {
  width: 42px;
  height: 42px;
  font-size: 15px;
  flex-shrink: 0;
}

.list-item h3 {
  margin: 0 0 3px;
  font: 700 15px Outfit;
}

.pager {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: center;
  margin-top: 22px;
}

/* Échanges */
.trade {
  padding: 18px;
  margin-bottom: 14px;
}

.trade-sides {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 14px;
  align-items: start;
  margin-top: 14px;
}

.trade-arrow {
  font-size: 22px;
  color: var(--green);
  align-self: center;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 9px;
  border-radius: 7px;
  background: #1d211d;
  border: 1px solid #333a33;
  font-size: 12px;
  font-weight: 600;
  color: #dfe4df;
}

.chip::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--rc, #666);
}

button.chip.selected {
  border-color: var(--green);
  background: #24301d;
}

.picker {
  max-height: 210px;
  overflow: auto;
  padding: 2px;
}

.status {
  font-size: 11px;
  font-weight: 800;
  padding: 3px 7px;
  border-radius: 5px;
  background: #262a26;
  color: var(--muted);
}

.status.accepted,
.status.sold,
.status.win {
  background: #24331d;
  color: var(--green);
}

.status.declined,
.status.loss,
.status.cancelled,
.status.expired {
  background: #351d1c;
  color: #ffb5b0;
}

/* Messages */
.chat {
  display: grid;
  grid-template-columns: 250px 1fr;
  min-height: 460px;
  overflow: hidden;
}

.chat-list {
  border-right: 1px solid var(--line);
  overflow: auto;
}

.chat-list a {
  display: block;
  padding: 13px 15px;
  border-bottom: 1px solid var(--line);
  color: inherit;
  text-decoration: none;
}

.chat-list a.active,
.chat-list a:hover {
  background: #1b2019;
}

.chat-list p {
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chat-thread {
  display: flex;
  flex-direction: column;
}

.chat-messages {
  flex: 1;
  overflow: auto;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 520px;
}

.bubble {
  max-width: 75%;
  padding: 9px 12px;
  border-radius: 12px;
  background: #222722;
  align-self: flex-start;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.bubble.mine {
  align-self: flex-end;
  background: #2f4422;
}

.chat-form {
  display: flex;
  gap: 9px;
  padding: 12px;
  border-top: 1px solid var(--line);
}

.chat-form input {
  flex: 1;
}

/* Tableaux */
.table {
  width: 100%;
  border-collapse: collapse;
}

.table th,
.table td {
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid var(--line);
}

.table th {
  color: var(--muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.table tr.me td {
  background: #1b2417;
}

.table tr:last-child td {
  border: 0;
}

/* Profil */
.showcase {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.slot-empty {
  min-height: 246px;
  border: 2px dashed #333a33;
  border-radius: 12px;
  background: none;
  color: var(--muted);
  font-weight: 700;
}

.slot-empty:hover {
  border-color: var(--green);
  color: var(--green);
}

.achievement.done {
  border-color: #3f5a2b;
}

.achievement > div:first-child {
  font-size: 24px;
}

.achievement.locked > div:first-child {
  filter: grayscale(1);
  opacity: .5;
}

/* Bataille */
.rounds {
  display: grid;
  gap: 10px;
  margin-top: 16px;
}

.round {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border-radius: 10px;
  background: #191c19;
}

.round .vs {
  color: var(--muted);
  font-weight: 800;
}

.round .won {
  color: var(--green);
}

.result-title {
  font: 800 30px Outfit;
  text-align: center;
  margin: 8px 0;
}

.loading {
  padding: 50px;
  text-align: center;
  color: var(--muted);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}

@media (max-width: 750px) {
  .chat {
    grid-template-columns: 1fr;
  }

  .chat-list {
    border-right: 0;
    border-bottom: 1px solid var(--line);
    max-height: 200px;
  }

  .showcase {
    grid-template-columns: repeat(2, 1fr);
  }

  .trade-sides {
    grid-template-columns: 1fr;
  }

  .trade-arrow {
    transform: rotate(90deg);
    justify-self: center;
  }

  .table th:nth-child(4),
  .table td:nth-child(4) {
    display: none;
  }

  .toast {
    left: 16px;
    right: 16px;
    bottom: 80px;
  }
}

body.no-anim .reveal .game-card {
  animation: none;
}

.toast {
  z-index: 30;
  max-width: 360px;
}

.side-bottom .coin {
  color: #d8ffab;
  background: #242a20;
}

.toast-stack {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 30;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  pointer-events: none;
}

.toast-stack .toast {
  position: static;
}

.toast.error {
  background: #ffb5b0;
  color: #3a1110;
}

@media (max-width: 750px) {
  .toast-stack {
    left: 16px;
    right: 16px;
    bottom: 80px;
    align-items: stretch;
  }
}

@media (max-width: 750px) {
  .mobile-nav {
    justify-content: flex-start;
    gap: 4px;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .mobile-nav a {
    flex-shrink: 0;
    position: relative;
  }

  .mobile-nav a.active {
    background: #20251d;
  }
}

/* ───────────── Connexion, types de cartes, images ───────────── */

body.logged-out aside,
body.logged-out .mobile-nav {
  display: none;
}

body.logged-out main {
  width: 100%;
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px 16px;
}

.auth {
  width: min(420px, 100%);
  padding: 32px 28px;
}

.auth .logo {
  display: block;
  margin: 0;
  font-size: 28px;
}

.auth .tabs {
  margin-bottom: 4px;
}

label.check {
  display: flex;
  gap: 9px;
  align-items: center;
  margin-top: 16px;
  font-size: 12px;
  color: #c9cfca;
}

.kind {
  position: absolute;
  top: 82px;
  left: 8px;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  background: #000a;
  display: grid;
  place-items: center;
  font-size: 13px;
}

.card-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.game-card .info p b {
  color: #c9d3ca;
  font-weight: 700;
}

/* Les icônes (objets, monstres) sont détourées : on les affiche entières, centrées. */
.card-art img {
  object-fit: contain;
  padding: 8px;
  filter: drop-shadow(0 6px 10px #0008);
}

.thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 4px;
}

/* ───────────── Ouverture de paquet carte par carte ───────────── */

body.revealing {
  overflow: hidden;
}

.reveal-overlay {
  position: fixed;
  inset: 0;
  z-index: 25;
  overflow: auto;
  background: radial-gradient(circle at 50% 30%, #1d2a17 0, #0c0d0c 62%);
  display: grid;
  place-items: center;
  padding: 24px 16px;
  animation: fade .2s;
}

.reveal-stage {
  width: min(360px, 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.reveal-stage.wide {
  width: min(1100px, 100%);
}

.reveal-stage.wide .cards {
  width: 100%;
  text-align: left;
}

.reveal-counter {
  font: 600 15px Inter;
  margin-bottom: 22px;
}

.reveal-counter b {
  color: var(--green);
  font-size: 19px;
}

.reveal-card {
  width: 280px;
  height: 400px;
  perspective: 1200px;
  cursor: pointer;
}

.reveal-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform .6s cubic-bezier(.2, .8, .2, 1);
  transform-style: preserve-3d;
}

.reveal-card.is-shown .reveal-inner {
  transform: rotateY(180deg);
}

.reveal-back,
.reveal-front {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  border-radius: 16px;
}

.reveal-back {
  display: grid;
  place-content: center;
  gap: 10px;
  border: 2px solid #3a4a30;
  background:
    repeating-linear-gradient(45deg, #1a2316 0 14px, #151c12 14px 28px);
  box-shadow: 0 20px 50px #000a;
}

.reveal-back span {
  font: 800 92px Outfit;
  color: var(--green);
  text-shadow: 0 0 30px #a6e85d66;
}

.reveal-back small {
  color: var(--muted);
  font-weight: 700;
}

.reveal-front {
  transform: rotateY(180deg);
}

.reveal-front .game-card {
  height: 100%;
  cursor: default;
  border-radius: 16px;
  box-shadow: 0 20px 50px #000a;
}

.reveal-front .game-card:hover {
  transform: none;
}

.reveal-front .card-art {
  height: 220px;
  font-size: 90px;
}

.reveal-front .game-card h3 {
  font-size: 20px;
}

.reveal-front .game-card p {
  font-size: 13px;
  height: auto;
}

.reveal-front .power {
  position: absolute;
  bottom: 16px;
  left: 14px;
  right: 14px;
  justify-content: space-between;
  font-size: 15px;
  padding-top: 12px;
  border-top: 1px solid #ffffff1a;
}

.reveal-front .kind {
  top: 190px;
}

.reveal-card.glow .reveal-front .game-card {
  border-color: var(--rc);
  box-shadow: 0 0 0 1px var(--rc), 0 0 40px var(--rc), 0 20px 50px #000a;
  animation: pulse 1.6s ease-in-out .6s 2;
}

@keyframes pulse {
  50% { box-shadow: 0 0 0 2px var(--rc), 0 0 70px var(--rc), 0 20px 50px #000a; }
}

.reveal-rarity {
  margin-top: 16px;
  font: 800 14px Outfit;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--rc, var(--muted));
}

.reveal-rarity[data-r="C"] {
  color: #b9c1bb;
}

.reveal-nav {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 14px;
}

.round-btn {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid #303530;
  background: #1b1e1b;
  color: #e6eae5;
  font-size: 24px;
  line-height: 1;
}

.dots {
  display: flex;
  gap: 7px;
}

.dots span {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #333a33;
  transition: transform .2s;
}

.dots span.seen {
  background: var(--rc, #6f7771);
}

.dots span.current {
  transform: scale(1.35);
  outline: 2px solid #ffffff55;
}

.reveal-main {
  margin-top: 22px;
  min-width: 220px;
  padding: 13px 20px;
  font-size: 15px;
}

.reveal-skip {
  margin-top: 12px;
  border: 0;
  background: none;
  color: var(--muted);
  font-weight: 700;
  text-decoration: underline;
}

body.no-anim .reveal-inner {
  transition: none;
}

@media (max-width: 750px) {
  .reveal-card {
    width: 250px;
    height: 360px;
  }

  .reveal-front .card-art {
    height: 190px;
  }

  .reveal-front .kind {
    top: 160px;
  }
}

/* Pendant l’ouverture d’un paquet, les notifications passent en haut pour ne pas masquer les boutons. */
body.revealing .toast-stack {
  top: 16px;
  bottom: auto;
}

/* ───────────── Collection et marché : grille dense, filtres, sélection ───────────── */

.collection-bar {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.collection-bar .search-xl {
  flex: 1;
  min-width: 220px;
  padding: 14px 16px;
  font-size: 14px;
}

.collection-bar select {
  min-width: 190px;
  padding: 12px 14px;
}

.rarity-chips {
  display: flex;
  gap: 4px;
  margin-bottom: 22px;
  flex-wrap: wrap;
}

.rarity-chip {
  border: 1px solid transparent;
  background: none;
  color: var(--rc);
  font: 800 13px Inter;
  padding: 6px 12px;
  border-radius: 8px;
}

.rarity-chip:hover {
  background: #ffffff0d;
}

.rarity-chip.active {
  background: color-mix(in srgb, var(--rc) 22%, transparent);
  border-color: var(--rc);
}

.rarity-chip[data-r="C"] {
  color: #b9c1bb;
}

/* Carte teintée selon sa rareté (corps sombre éclairé par la couleur de rareté). */
.cards.dense {
  grid-template-columns: repeat(auto-fill, minmax(176px, 1fr));
  gap: 16px;
}

.cards.dense .game-card,
.market-card .game-card {
  min-height: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  border-color: color-mix(in srgb, var(--rc) 45%, #2a2f2a);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--rc) 26%, #151815) 0%, #141714 70%);
}

.cards.dense .game-card .card-art,
.market-card .game-card .card-art {
  height: 128px;
  background: radial-gradient(circle at 50% 60%, color-mix(in srgb, var(--rc) 55%, #1b1f1b), #121512 75%);
}

.cards.dense .game-card .info,
.market-card .game-card .info {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.cards.dense .game-card .power,
.market-card .game-card .power {
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid #ffffff14;
  justify-content: space-between;
}

.cards.dense .game-card p,
.market-card .game-card p {
  height: auto;
  max-height: 44px;
  margin-bottom: 8px;
}

.cards.dense .kind,
.market-card .kind {
  top: 98px;
}

.card-slot {
  position: relative;
  border-radius: 14px;
}

.cards.selecting .card-slot::after {
  content: '';
  position: absolute;
  top: 8px;
  right: 8px;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  border: 2px solid #ffffffaa;
  background: #000a;
  pointer-events: none;
}

.cards.selecting .card-slot .favorite {
  display: none;
}

.cards.selecting .card-slot.selected::after {
  content: '✓';
  display: grid;
  place-items: center;
  background: var(--green);
  border-color: var(--green);
  color: #182111;
  font-weight: 900;
  font-size: 14px;
}

.cards.selecting .card-slot.selected .game-card {
  outline: 3px solid var(--green);
  outline-offset: 2px;
}

.selection-bar {
  position: sticky;
  top: 10px;
  z-index: 4;
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  padding: 12px 14px;
  margin-bottom: 18px;
  border: 1px solid #3f5a2b;
  border-radius: 12px;
  background: #18211499;
  backdrop-filter: blur(8px);
}

.button.active-ghost {
  border-color: var(--green);
  color: var(--green2);
}

.pager {
  margin: 0 0 20px;
}

.cards + .pager {
  margin: 22px 0 0;
}

/* Marché */
.market-card {
  display: flex;
  flex-direction: column;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel);
}

.market-card .game-card {
  cursor: default;
  height: 268px;
}

.market-card .game-card:hover {
  transform: none;
}

.market-meta {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-top: 10px;
}

.market-meta small {
  display: block;
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
}

.market-meta b {
  font: 700 14px Inter;
}

.market-meta .price {
  color: var(--green);
}

.market-seller {
  margin-top: 6px;
  font-size: 11px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.market-action {
  margin-top: 10px;
}

.market-action .button {
  width: 100%;
}

@media (max-width: 750px) {
  .collection-bar select {
    flex: 1;
    min-width: 0;
  }

  .cards.dense {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  .market-card .game-card {
    height: 240px;
  }
}

/* ───────────── Format de carte unifié : image en haut, bas coloré selon la rareté ───────────── */

:root {
  /* Teintes claires du bas de carte, une par rareté. */
  --body-C: #dfe7e1;
  --body-PC: #cfe0f2;
  --body-R: #ddd2f3;
  --body-SR: #f3cfe0;
  --body-UR: #f7d9b8;
  --body-L: #f6e7a6;
}

[data-r="C"] { --rb: var(--body-C); }
[data-r="PC"] { --rb: var(--body-PC); }
[data-r="R"] { --rb: var(--body-R); }
[data-r="SR"] { --rb: var(--body-SR); }
[data-r="UR"] { --rb: var(--body-UR); }
[data-r="L"] { --rb: var(--body-L); }

.game-card,
.cards.dense .game-card,
.market-card .game-card {
  display: flex;
  flex-direction: column;
  aspect-ratio: 5 / 7;
  height: auto;
  min-height: 0;
  border: 0;
  border-radius: 14px;
  overflow: hidden;
  background: var(--rb, #e6e9e6);
  color: #1d211d;
  box-shadow: 0 6px 18px #0007, inset 0 0 0 1px #ffffff40;
}

.game-card:hover {
  border-color: transparent;
  box-shadow: 0 10px 24px #000a, inset 0 0 0 1px #ffffff60;
}

.game-card[data-r="L"] {
  box-shadow: 0 0 22px #d9a52155, 0 6px 18px #0007;
}

/* Illustration : ~45 % de la hauteur, fond teinté par la rareté. */
.game-card .card-art,
.cards.dense .game-card .card-art,
.market-card .game-card .card-art {
  flex: 0 0 45%;
  height: auto;
  background: linear-gradient(160deg, color-mix(in srgb, var(--rc) 70%, #fff) 0%, var(--rc) 100%);
  color: #ffffffd9;
  font: 800 46px Outfit;
  text-shadow: 0 2px 10px #0004;
}

/* Bas de carte : couleur de rareté, texte sombre. */
.game-card .info,
.cards.dense .game-card .info,
.market-card .game-card .info {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 12px 14px 12px;
  background: linear-gradient(180deg, var(--rb, #e6e9e6), color-mix(in srgb, var(--rb, #e6e9e6) 82%, var(--rc)));
}

.game-card h3 {
  color: #141714;
  font: 700 15px Outfit;
  line-height: 1.2;
  margin: 0 0 4px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.game-card p,
.cards.dense .game-card p,
.market-card .game-card p {
  color: #3f4640;
  font-size: 11px;
  line-height: 1.35;
  height: auto;
  max-height: none;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.game-card .info p b {
  color: #1d211d;
}

/* Attaque / défense en pied de carte, séparées par un filet. */
.game-card .power,
.cards.dense .game-card .power,
.market-card .game-card .power {
  margin-top: auto;
  padding-top: 9px;
  border-top: 1px solid #1d211d26;
  justify-content: space-between;
  color: #1d211d;
  font-size: 12px;
}

.game-card .power i {
  color: #c23a33;
}

.game-card .power i + i {
  color: #2a62b8;
}

/* Pastilles en haut de carte. */
.game-card .rarity {
  top: 10px;
  left: 10px;
  padding: 3px 7px;
  border-radius: 6px;
  background: #ffffffd9;
  color: color-mix(in srgb, var(--rc) 75%, #000);
  text-shadow: none;
  font-size: 11px;
}

.game-card .favorite {
  top: 6px;
  right: 6px;
  background: none;
  color: #ffffffcc;
  font-size: 19px;
  text-shadow: 0 1px 4px #0006;
}

.game-card .favorite.active {
  color: #ffd45e;
}

.game-card .copies {
  top: 10px;
  right: 38px;
  background: #ffffffd9;
  color: #1d211d;
}

.game-card .kind,
.cards.dense .kind,
.market-card .kind {
  top: auto;
  bottom: calc(55% + 8px);
  left: 10px;
  background: #ffffffcc;
}

.game-card.not-owned {
  opacity: .5;
  filter: grayscale(.9);
}

/* Carte agrandie à l'ouverture d'un paquet. */
.reveal-front .game-card {
  height: 100%;
  aspect-ratio: auto;
}

.reveal-front .card-art {
  flex-basis: 50%;
  font-size: 90px;
}

.reveal-front .game-card h3 {
  font-size: 21px;
}

.reveal-front .game-card p {
  font-size: 13px;
}

.reveal-front .power {
  position: static;
  font-size: 15px;
  border-top-color: #1d211d26;
}

.reveal-front .kind {
  top: auto;
  bottom: calc(50% + 10px);
}

/* Le marché garde la carte au format, les infos de vente dessous. */
.market-card .game-card {
  height: auto;
}

.slot-empty {
  min-height: 0;
  aspect-ratio: 5 / 7;
}

/* ───────────── Dimensions des cartes : ratio 5:7, ~8 par ligne sur un portable ───────────── */

main {
  width: min(1640px, calc(100% - 238px));
  padding: 40px 40px 70px;
}

.cards.dense {
  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
  gap: 16px 18px;
}

.cards.dense .game-card .card-art,
.market-card .game-card .card-art {
  font-size: 36px;
}

.cards.dense .game-card .info,
.market-card .game-card .info {
  padding: 9px 10px 9px;
}

.cards.dense .game-card h3,
.market-card .game-card h3 {
  font-size: 13px;
  margin-bottom: 3px;
}

.cards.dense .game-card p,
.market-card .game-card p {
  font-size: 10px;
  line-height: 1.3;
}

.cards.dense .game-card .power,
.market-card .game-card .power {
  font-size: 11px;
  padding-top: 7px;
}

.cards.dense .game-card .rarity,
.market-card .game-card .rarity {
  top: 7px;
  left: 7px;
  font-size: 10px;
  padding: 2px 6px;
}

.cards.dense .game-card .favorite {
  top: 3px;
  right: 3px;
  font-size: 17px;
}

.cards.dense .game-card .copies {
  top: 7px;
  right: 30px;
  font-size: 9px;
}

.cards.dense .kind,
.market-card .kind {
  width: 20px;
  height: 20px;
  font-size: 11px;
  left: 7px;
}

/* Le marché garde un peu plus de place pour les infos de vente sous la carte. */
.market-grid.cards.dense {
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
}

.showcase {
  grid-template-columns: repeat(auto-fill, minmax(150px, 190px));
}

@media (max-width: 750px) {
  main {
    width: 100%;
    padding: 27px 16px 90px;
  }

  .cards.dense {
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
  }

  .market-grid.cards.dense {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 430px) {
  .cards.dense {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* La zone d'image fait exactement 45 % de la carte, quelle que soit la taille de l'image. */
.game-card .card-art,
.cards.dense .game-card .card-art,
.market-card .game-card .card-art {
  flex: none;
  height: 45%;
  min-height: 0;
  overflow: hidden;
}

.game-card .card-art img {
  display: block;
  width: 100%;
  height: 100%;
  max-height: 100%;
}

.reveal-front .card-art {
  height: 50%;
}

.game-card .info {
  min-height: 0;
}

/* ───────────── Menu latéral proportionnel à la fenêtre ───────────── */

:root {
  --sidebar-w: clamp(200px, 14vw, 320px);
}

aside {
  width: var(--sidebar-w);
  padding: clamp(18px, 3.2vh, 40px) clamp(10px, 1.1vw, 22px) clamp(14px, 2.4vh, 30px);
  overflow-y: auto;
  scrollbar-width: none;
}

aside .logo {
  font-size: clamp(20px, 1.7vw, 32px);
  margin: 0 clamp(8px, .9vw, 16px) clamp(18px, 4.5vh, 56px);
}

/* Les entrées s'espacent selon la hauteur de la fenêtre et grossissent avec sa largeur. */
aside nav {
  gap: clamp(2px, .9vh, 14px);
}

aside nav a,
.side-bottom a {
  font-size: clamp(13px, 1.05vw, 18px);
  gap: clamp(10px, .9vw, 16px);
  padding: clamp(8px, 1.35vh, 16px) clamp(10px, 1vw, 18px);
  border-radius: clamp(8px, .7vw, 12px);
}

aside .nav-icon {
  width: clamp(18px, 1.5vw, 28px);
  font-size: clamp(14px, 1.25vw, 22px);
  flex-shrink: 0;
}

aside nav a.active::after {
  content: '';
  width: 6px;
  height: 6px;
  margin-left: auto;
  border-radius: 50%;
  background: var(--green);
}

aside nav a.active .badge {
  margin-left: 8px;
}

.side-bottom {
  padding-top: clamp(10px, 2vh, 24px);
}

.side-bottom .coin {
  font-size: clamp(13px, 1.05vw, 18px);
}

main {
  margin-left: var(--sidebar-w);
  width: min(1640px, calc(100% - var(--sidebar-w)));
  padding: clamp(28px, 4vh, 48px) clamp(24px, 2.6vw, 52px) 70px;
}

@media (max-width: 750px) {
  main {
    margin-left: 0;
    width: 100%;
    padding: 27px 16px 90px;
  }
}

/* Le menu remplit exactement la hauteur : les entrées se répartissent dans l'espace disponible. */
aside {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

aside .logo {
  flex-shrink: 0;
  margin-bottom: clamp(10px, 3vh, 48px);
}

aside nav {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  gap: 0;
}

aside nav a,
.side-bottom a {
  font-size: clamp(12px, min(1.05vw, 1.75vh), 18px);
  padding: clamp(5px, 1vh, 14px) clamp(10px, 1vw, 18px);
}

aside .nav-icon {
  font-size: clamp(14px, min(1.25vw, 2.1vh), 22px);
}

.side-bottom {
  flex-shrink: 0;
  margin-top: 0;
  padding-top: clamp(6px, 1.5vh, 24px);
}

.side-bottom .coin {
  font-size: clamp(12px, min(1.05vw, 1.75vh), 18px);
  margin-bottom: clamp(4px, .8vh, 10px);
}

/* ───────────── Menus déroulants : chevron personnalisé, aligné ───────────── */

select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%23b7bdb8' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 12px 8px;
  cursor: pointer;
  line-height: 1.2;
}

select:hover {
  border-color: #48514a;
}

select option,
select optgroup {
  background: #191c19;
  color: #dfe4df;
}

/* ───────────── Icônes SVG et finitions ───────────── */

.nav-icon {
  display: inline-grid;
  place-items: center;
  color: var(--green);
}

.nav-icon .icon {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
}

aside .nav-icon {
  width: clamp(18px, min(1.4vw, 2.4vh), 24px);
  height: clamp(18px, min(1.4vw, 2.4vh), 24px);
}

aside nav a:not(.active) .nav-icon {
  color: #8fbf5c;
}

/* Les libellés restent sur une ligne. */
aside nav a,
.side-bottom a {
  white-space: nowrap;
  min-width: 0;
}

.nav-label {
  overflow: hidden;
  text-overflow: ellipsis;
}

:root {
  --sidebar-w: clamp(216px, 14vw, 320px);
}

/* Solde : un seul bloc « 245 CR », sans espace parasite. */
.side-bottom .coin .nav-label b {
  font-weight: 800;
  margin-right: 3px;
}

.side-bottom .coin {
  border: 0;
}

.mobile-nav .nav-icon {
  width: 21px;
  height: 21px;
}

/* Boutons avec icône */
.button.with-icon {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.button.with-icon .icon {
  width: 16px;
  height: 16px;
}

/* Boutons désactivés plus lisibles */
.button:disabled {
  opacity: 1;
  background: #2a2f2a;
  color: #7b837d;
  border-color: #2a2f2a;
}

/* ───────────── Page Paquets ───────────── */

.pulls {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding-top: clamp(0px, 2vh, 24px);
}

.pulls h1 {
  font-size: clamp(30px, 2.6vw, 42px);
}

.link-button {
  margin-top: 10px;
  border: 0;
  background: none;
  color: var(--green);
  font: 600 13px Inter;
}

.link-button:hover {
  text-decoration: underline;
}

.pack-art {
  margin-top: clamp(24px, 5vh, 56px);
  width: clamp(150px, 13vw, 210px);
  border: 0;
  padding: 0;
  background: none;
  filter: drop-shadow(0 16px 30px #0009) drop-shadow(0 0 26px #a6e85d40);
  transition: transform .2s, filter .2s;
  animation: pack-float 3.2s ease-in-out infinite;
}

.pack-svg {
  display: block;
  width: 100%;
  height: auto;
}

.is-ready .pack-art:hover {
  transform: translateY(-4px) rotate(-1.5deg) scale(1.03);
  filter: drop-shadow(0 20px 36px #000a) drop-shadow(0 0 40px #a6e85d70);
}

.is-ready .pack-shine {
  animation: pack-shine 3.2s ease-in-out infinite;
}

/* Sans paquet : sachet éteint, immobile. */
.is-empty .pack-art {
  filter: grayscale(.85) brightness(.55) drop-shadow(0 16px 30px #0009);
  animation: none;
  cursor: not-allowed;
}

@keyframes pack-float {
  50% { transform: translateY(-6px); }
}

@keyframes pack-shine {
  0%, 55% { transform: skewX(-14deg) translateX(0); }
  100% { transform: skewX(-14deg) translateX(320px); }
}

.open-label {
  margin-top: clamp(16px, 3vh, 28px);
  border: 0;
  background: none;
  color: var(--green);
  font: 800 clamp(22px, 1.8vw, 28px) Outfit;
}

.open-label:disabled {
  color: #3e5a33;
  cursor: not-allowed;
}

.is-ready .open-label:hover {
  color: var(--green2);
}

.pack-counter {
  margin-top: clamp(16px, 3vh, 28px);
  min-width: 200px;
  padding: 12px 22px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel);
  display: grid;
  gap: 3px;
  color: var(--muted);
  font-size: 13px;
}

.pack-counter b {
  font: 700 22px Outfit;
  color: #c9cfca;
}

.pack-counter .ok {
  color: var(--green);
}

.pack-counter .none {
  color: #e8a33d;
}

.pack-counter code {
  font: 700 13px ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--green);
}

.buy-pack {
  margin-top: 16px;
  min-width: min(380px, 100%);
  padding: 14px 24px;
  font-size: 15px;
}

.buy-hint {
  margin-top: 10px;
  font-size: 12px;
}

.how-list {
  margin: 14px 0 0;
  padding-left: 18px;
  display: grid;
  gap: 8px;
  color: #c9cfca;
  line-height: 1.45;
}

.how-rarities {
  display: grid;
  gap: 8px;
}

.how-rarities > div {
  display: grid;
  grid-template-columns: 34px 1fr auto;
  align-items: center;
  gap: 10px;
}

.how-rarities .rarity {
  margin: 0;
  text-align: center;
}

@media (prefers-reduced-motion: reduce) {
  .pack-art,
  .pack-shine {
    animation: none !important;
  }
}

/* ───────────── Effets brillants / holographiques sur le bas de carte ───────────── */
/* Plus la rareté est haute, plus l'effet est marqué. --mx / --my suivent la souris (voir app.js). */

.game-card {
  --mx: 50%;
  --my: 50%;
  transform-style: preserve-3d;
}

.game-card .info {
  position: relative;
  isolation: isolate;
}

.game-card .info::before,
.game-card .info::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0;
  transition: opacity .3s;
}

/* R : reflet lumineux qui traverse la carte. */
.game-card[data-r="R"] .info::after,
.game-card[data-r="SR"] .info::after,
.game-card[data-r="UR"] .info::after,
.game-card[data-r="L"] .info::after {
  opacity: .75;
  background: linear-gradient(115deg, transparent 35%, #ffffffb0 48%, transparent 60%);
  background-size: 260% 100%;
  mix-blend-mode: soft-light;
  animation: card-sheen 5s ease-in-out infinite;
}

/* SR : irisation arc-en-ciel douce. */
.game-card[data-r="SR"] .info::before {
  opacity: .45;
  background:
    repeating-linear-gradient(115deg,
      #ff6fb5 0%, #ffd36f 8%, #8dff8a 16%, #6fd7ff 24%, #b98cff 32%, #ff6fb5 40%);
  background-size: 260% 260%;
  background-position: var(--mx) var(--my);
  mix-blend-mode: overlay;
}

/* UR : holographique plus fort avec paillettes. */
.game-card[data-r="UR"] .info::before {
  opacity: .6;
  background:
    radial-gradient(circle at 18% 30%, #fff 0 1px, transparent 2px),
    radial-gradient(circle at 72% 22%, #fff 0 1.2px, transparent 2.2px),
    radial-gradient(circle at 46% 64%, #fff 0 1px, transparent 2px),
    radial-gradient(circle at 84% 72%, #fff 0 1.4px, transparent 2.4px),
    radial-gradient(circle at 28% 86%, #fff 0 1px, transparent 2px),
    repeating-linear-gradient(120deg,
      #ff7a7a 0%, #ffcf6b 6%, #a8ff78 12%, #6be4ff 18%, #a78bff 24%, #ff7ad9 30%, #ff7a7a 36%);
  background-size: 60px 60px, 70px 70px, 50px 50px, 80px 80px, 64px 64px, 240% 240%;
  background-position: 0 0, 0 0, 0 0, 0 0, 0 0, var(--mx) var(--my);
  mix-blend-mode: color-dodge;
  animation: card-sparkle 2.4s ease-in-out infinite;
}

/* L : feuille d'or scintillante. */
.game-card[data-r="L"] .info::before {
  opacity: .85;
  background:
    radial-gradient(circle at 20% 25%, #fff 0 1.2px, transparent 2.4px),
    radial-gradient(circle at 70% 40%, #fff 0 1.5px, transparent 2.8px),
    radial-gradient(circle at 40% 75%, #fff 0 1.2px, transparent 2.4px),
    radial-gradient(circle at 88% 82%, #fff 0 1px, transparent 2px),
    linear-gradient(125deg, #fff3b0 0%, #e8b93c 22%, #fff8d6 38%, #c8901e 55%, #ffe680 72%, #b5841f 100%);
  background-size: 54px 54px, 68px 68px, 46px 46px, 76px 76px, 260% 260%;
  background-position: 0 0, 0 0, 0 0, 0 0, var(--mx) var(--my);
  mix-blend-mode: overlay;
  animation: card-sparkle 2s ease-in-out infinite;
}

/* L'illustration des UR et L reçoit aussi un léger reflet. */
.game-card[data-r="UR"] .card-art,
.game-card[data-r="L"] .card-art {
  position: relative;
}

.game-card[data-r="UR"] .card-art::after,
.game-card[data-r="L"] .card-art::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 35%, #ffffff70 48%, transparent 60%);
  background-size: 260% 100%;
  mix-blend-mode: soft-light;
  animation: card-sheen 5s ease-in-out infinite;
}

@keyframes card-sheen {
  0%, 35% { background-position: 130% 0; }
  70%, 100% { background-position: -30% 0; }
}

@keyframes card-sparkle {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.35); }
}

/* Survol : le reflet suit la souris et la carte s'incline légèrement. */
.game-card.tilting {
  transition: transform .08s linear;
}

.game-card.tilting[data-r="SR"] .info::before,
.game-card.tilting[data-r="UR"] .info::before,
.game-card.tilting[data-r="L"] .info::before {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .game-card .info::before,
  .game-card .info::after,
  .game-card .card-art::after {
    animation: none !important;
  }
}

body.no-anim .game-card .info::before,
body.no-anim .game-card .info::after,
body.no-anim .game-card .card-art::after {
  animation: none;
}

/* Réglages d'intensité des effets brillants. */
.game-card[data-r="R"] .info::after,
.game-card[data-r="SR"] .info::after,
.game-card[data-r="UR"] .info::after,
.game-card[data-r="L"] .info::after {
  opacity: 1;
  background: linear-gradient(115deg, transparent 32%, #ffffffd0 46%, #ffffff40 52%, transparent 62%);
  background-size: 260% 100%;
  mix-blend-mode: overlay;
}

.game-card[data-r="SR"] .info::before {
  opacity: .6;
  mix-blend-mode: soft-light;
}

/* UR : arc-en-ciel saturé en « overlay » (au lieu de color-dodge qui délavait le fond). */
.game-card[data-r="UR"] .info::before {
  opacity: .75;
  mix-blend-mode: overlay;
}

.game-card[data-r="UR"] .info {
  background: linear-gradient(180deg, #f7d3a8, #f0b77a);
}

.game-card[data-r="L"] .info {
  background: linear-gradient(180deg, #f9e6a0, #ecc760);
}

/* ───────────── Page de détail d'une vente ───────────── */

.listing-page {
  max-width: 1080px;
  margin: 0 auto;
}

.back-link {
  display: inline-block;
  margin-bottom: 22px;
  color: var(--muted);
  font-weight: 600;
  text-decoration: none;
}

.back-link:hover {
  color: var(--text);
}

.listing-layout {
  display: grid;
  grid-template-columns: minmax(240px, 340px) 1fr;
  gap: clamp(20px, 2.6vw, 36px);
  align-items: start;
}

.listing-card .game-card {
  cursor: default;
}

.listing-card .game-card h3 {
  font-size: 20px;
}

.listing-card .game-card p {
  font-size: 13px;
}

.listing-card .game-card .power {
  font-size: 15px;
}

.listing-card .game-card .card-art {
  font-size: 80px;
}

.listing-side h1 {
  margin-bottom: 4px;
}

.listing-seller {
  margin-bottom: 18px;
}

.listing-seller b {
  color: var(--green);
}

.listing-box {
  display: grid;
  gap: 14px;
  padding: 18px 20px;
  margin-bottom: 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel);
}

.listing-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.listing-row .text {
  color: var(--text);
}

.listing-price {
  color: var(--green);
  font: 800 30px Outfit;
}

.listing-price.small {
  font-size: 18px;
}

.listing-closed {
  color: var(--text);
  font-weight: 700;
}

.bid-input {
  display: grid;
  grid-template-columns: 48px 1fr 48px auto;
  gap: 0;
  align-items: stretch;
}

.bid-input .stepper {
  border: 1px solid #303530;
  background: #191c19;
  color: #e6eae5;
  font-size: 20px;
}

.bid-input .stepper:first-child {
  border-radius: 10px 0 0 10px;
}

.bid-input .stepper:nth-child(3) {
  border-radius: 0 10px 10px 0;
  margin-right: 10px;
}

.bid-input .stepper:hover {
  background: #222622;
}

.bid-amount {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 14px;
  border-top: 1px solid #303530;
  border-bottom: 1px solid #303530;
  background: #141714;
}

.bid-amount .nav-icon {
  width: 18px;
  height: 18px;
  color: var(--muted);
}

.bid-amount input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: none;
  padding: 14px 0;
  text-align: center;
  font: 700 18px Inter;
  color: var(--text);
  -moz-appearance: textfield;
}

.bid-amount input::-webkit-outer-spin-button,
.bid-amount input::-webkit-inner-spin-button {
  -webkit-appearance: none;
}

.bid-amount input:focus {
  outline: none;
}

.bid-amount:focus-within {
  box-shadow: inset 0 0 0 2px var(--green);
}

.bid-input .miser {
  padding: 0 26px;
  font-size: 15px;
}

.bid-help {
  font-size: 12px;
  line-height: 1.5;
}

.bid-warning {
  color: #ffb5b0;
  font-size: 13px;
  font-weight: 600;
}

.bid-history .avatar {
  width: 36px;
  height: 36px;
  font-size: 13px;
}

.market-card {
  cursor: pointer;
  transition: border-color .15s;
}

.market-card:hover {
  border-color: #48514a;
}

.market-action a.button {
  display: block;
  text-align: center;
  text-decoration: none;
}

@media (max-width: 900px) {
  .listing-layout {
    grid-template-columns: 1fr;
  }

  .listing-card {
    max-width: 300px;
    margin: 0 auto;
  }

  .bid-input {
    grid-template-columns: 44px 1fr 44px;
    row-gap: 10px;
  }

  .bid-input .miser {
    grid-column: 1 / -1;
    padding: 12px;
  }

  .bid-input .stepper:nth-child(3) {
    margin-right: 0;
  }
}

/* Les colonnes de la page de détail peuvent rétrécir sous la largeur de leur contenu (mobile). */
.listing-layout > * {
  min-width: 0;
}

@media (max-width: 900px) {
  .listing-layout {
    grid-template-columns: minmax(0, 1fr);
  }
}

.listing-box > *,
.bid-amount {
  min-width: 0;
}

.bid-input {
  grid-template-columns: 48px minmax(0, 1fr) 48px auto;
}

@media (max-width: 900px) {
  .bid-input {
    grid-template-columns: 44px minmax(0, 1fr) 44px;
  }
}

/* ───────────── Détail d'enchère : prix, meneur, temps, historique compact ───────────── */

.listing-box .label {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
}

.listing-price {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.listing-price .nav-icon {
  width: 26px;
  height: 26px;
}

.time-left {
  font-weight: 700;
}

/* Dernière minute : temps en jaune. */
.time-row.urgent .time-left {
  color: #f2c94c;
}

.history-title {
  margin: 34px 0 12px;
  font: 700 14px Inter;
  letter-spacing: .04em;
  color: #c9cfca;
}

.bid-history {
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  background: var(--panel);
}

.bid-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 18px;
  align-items: center;
  padding: 13px 18px;
  border-bottom: 1px solid var(--line);
}

.bid-row:last-child {
  border-bottom: 0;
}

.bid-row.leading {
  background: #18211499;
}

.bid-name {
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bid-date {
  color: var(--muted);
  font-size: 13px;
}

.bid-amount-cell {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 72px;
  justify-content: flex-end;
  color: var(--green);
}

.bid-amount-cell .nav-icon {
  width: 15px;
  height: 15px;
}

@media (max-width: 750px) {
  .bid-row {
    grid-template-columns: 1fr auto;
  }

  .bid-date {
    grid-row: 2;
    font-size: 12px;
  }
}

/* ───────────── Page Succès ───────────── */

.ach-overall {
  padding: 18px 22px;
  margin-bottom: 26px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel);
}

.ach-overall-head {
  display: flex;
  justify-content: space-between;
  margin-bottom: 12px;
  color: #c9cfca;
  font-weight: 600;
}

.ach-overall-head b {
  color: var(--green);
}

.ach-bar {
  height: 8px;
  border-radius: 99px;
  background: #262b26;
  overflow: hidden;
}

.ach-bar.thin {
  height: 5px;
}

.ach-bar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--green);
  transition: width .4s;
}

.ach-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
  gap: 16px;
}

.ach {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 14px;
  padding: 20px 22px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel);
}

.ach-icon {
  font-size: 30px;
  line-height: 1.1;
  text-align: center;
}

.ach h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 4px;
  font: 700 16px Outfit;
}

.ach p {
  font-size: 13px;
}

.ach small {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  font-size: 12px;
}

.ach-check {
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 5px;
  background: var(--green);
  color: #182111;
  font-size: 12px;
  font-weight: 900;
}

.ach-progress {
  margin-top: 12px;
}

.ach-progress-head {
  display: flex;
  justify-content: space-between;
  margin-bottom: 7px;
  font-size: 12px;
  color: var(--muted);
}

.ach-progress-head span:last-child {
  color: var(--green);
  font-weight: 700;
}

/* Débloqué : pleine lumière. Commencé : normal. Jamais commencé : atténué. */
.ach.done {
  border-color: #3a5a2a;
  background: linear-gradient(180deg, #172215, var(--panel));
}

.ach.locked .ach-icon {
  filter: grayscale(1);
  opacity: .45;
}

.ach.locked h3,
.ach.locked p,
.ach.locked small {
  opacity: .5;
}

.ach.started .ach-icon {
  filter: grayscale(.6);
  opacity: .8;
}

/* Catalogue : toutes les cartes en pleines couleurs ; les cartes possédées portent une pastille. */
.game-card.not-owned,
.game-card.not-owned:hover {
  opacity: 1;
  filter: none;
}

.owned-badge {
  position: absolute;
  top: calc(45% - 30px);
  right: 8px;
  padding: 3px 7px;
  border-radius: 6px;
  background: var(--green);
  color: #182111;
  font-size: 10px;
  font-weight: 800;
  box-shadow: 0 2px 6px #0006;
}

/* ───────────── Catalogue : statistiques, filtres, halo de rareté ───────────── */

.catalog-stats {
  padding: 18px 22px;
  margin-bottom: 20px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel);
}

.catalog-counts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  font-size: 15px;
  color: var(--muted);
}

.catalog-counts span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.catalog-counts b {
  color: var(--text);
}

.catalog-counts .dot {
  width: 11px;
  height: 11px;
  border-radius: 3px;
  background: var(--rb);
  box-shadow: inset 0 0 0 1px var(--rc);
}

.catalog-stats p {
  margin-top: 10px;
  font-size: 12px;
}

.wish-chip {
  --rc: #c9cfca;
  border: 1px solid var(--line);
  margin-right: 6px;
}

.wish-chip.active {
  --rc: #ff8fb1;
}

/* Halo de la couleur de rareté autour des cartes des grilles. */
.cards.dense .game-card {
  box-shadow: 0 0 16px color-mix(in srgb, var(--rc) 35%, transparent), 0 6px 18px #0007;
}

.cards.dense .game-card[data-r="UR"],
.cards.dense .game-card[data-r="L"] {
  box-shadow: 0 0 22px color-mix(in srgb, var(--rc) 55%, transparent), 0 6px 18px #0007;
}

/* ───────────── Logo HoloCarte ───────────── */

.logo {
  display: grid;
  line-height: 1;
  letter-spacing: .02em;
}

.logo small {
  margin-top: 5px;
  font: 600 clamp(9px, .62vw, 12px) Inter;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--muted);
}

aside .logo {
  font-size: clamp(26px, 2.2vw, 40px);
}

.auth .logo {
  font-size: 40px;
}

.logo-mark {
  font: inherit;
  color: #fff;
  white-space: nowrap;
}

.logo-mark em {
  font-style: normal;
  color: var(--green);
}

.auth .logo {
  display: grid;
  justify-items: start;
}

/* ───────────── Ouverture : cartes affichées directement, navigation par flèches ───────────── */

.reveal-card.shown {
  cursor: default;
}

.reveal-card.shown .reveal-front {
  position: absolute;
  inset: 0;
  transform: none;
  backface-visibility: visible;
}

/* Arrivée de la carte : depuis la droite (suivante) ou la gauche (précédente). */
.reveal-card.from-right .reveal-front {
  animation: card-in-right .35s cubic-bezier(.2, .8, .2, 1);
}

.reveal-card.from-left .reveal-front {
  animation: card-in-left .35s cubic-bezier(.2, .8, .2, 1);
}

/* Première apparition d'une carte rare : léger effet de zoom. */
.reveal-card.first.glow .reveal-front {
  animation: card-in-rare .6s cubic-bezier(.2, .8, .2, 1);
}

@keyframes card-in-right {
  from { opacity: 0; transform: translateX(60px) rotate(3deg); }
}

@keyframes card-in-left {
  from { opacity: 0; transform: translateX(-60px) rotate(-3deg); }
}

@keyframes card-in-rare {
  0% { opacity: 0; transform: scale(.7); }
  60% { opacity: 1; transform: scale(1.06); }
  100% { transform: none; }
}

/* Les points de progression deviennent cliquables. */
.dots button {
  width: 9px;
  height: 9px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #333a33;
  transition: transform .2s;
}

.dots button.seen {
  background: var(--rc, #6f7771);
}

.dots button.current {
  transform: scale(1.35);
  outline: 2px solid #ffffff55;
}

body.no-anim .reveal-card .reveal-front {
  animation: none !important;
}

/* ───────────── Illustration pleine largeur : la moitié haute de la carte ───────────── */
.game-card .card-art,
.cards.dense .game-card .card-art,
.market-card .game-card .card-art {
  flex: 0 0 50%;
  position: relative;
  overflow: hidden;
  padding: 0;
}

.game-card .card-art img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 4px;
  object-fit: contain; /* sprites détourés (Dofus) : en entier, sur toute la hauteur */
  filter: drop-shadow(0 6px 10px #0008);
}

/* Icônes carrées opaques (World of Warcraft) : elles couvrent toute la zone ;
   le léger zoom masque le cadre intégré à l'icône. */
.game-card .card-art img.fill {
  padding: 0;
  object-fit: cover;
  transform: scale(1.12);
  filter: saturate(1.08);
}

/* Infobulle du jeu d'origine, affichée sur les grandes cartes (ouverture, détail, marché). */
.game-card .card-details {
  margin: 6px 0 0;
  padding-top: 6px;
  border-top: 1px solid #0000001a;
  color: #2d332e;
  font-size: 11px;
  line-height: 1.4;
  white-space: pre-line;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
}

/* Infobulle flottante au survol des cartes dans les grilles. */
.card-tip {
  position: fixed;
  z-index: 60;
  max-width: 320px;
  padding: 12px 14px;
  border-radius: 10px;
  background: #0d1210f2;
  border: 1px solid color-mix(in srgb, var(--rc, #8a8) 70%, #000);
  box-shadow: 0 12px 30px #000c;
  color: #e9eee9;
  font-size: 12px;
  line-height: 1.45;
  white-space: pre-line;
  pointer-events: none;
  opacity: 0;
  transition: opacity .12s;
}

.card-tip.show {
  opacity: 1;
}

.card-tip b {
  display: block;
  margin-bottom: 4px;
  color: var(--rc, #fff);
  font: 700 14px Outfit;
}

.card-tip small {
  display: block;
  margin-bottom: 6px;
  color: #9aa59c;
}

/* Récapitulatif du paquet : cartes centrées, quelle que soit la largeur de l'écran. */
.reveal-stage.wide .cards.dense.reveal {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
}

.reveal-stage.wide .cards.dense.reveal .game-card {
  flex: 0 0 176px;
  width: 176px;
}

@media (max-width: 640px) {
  .reveal-stage.wide .cards.dense.reveal .game-card {
    flex-basis: calc(50% - 8px);
    width: calc(50% - 8px);
  }
}

.modal-details {
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  background: #ffffff0a;
  border: 1px solid #ffffff14;
  font-size: 13px;
  line-height: 1.5;
  white-space: pre-line;
  max-height: 260px;
  overflow: auto;
}

/* ───────────── Bêta : paquets par jeu, comptes, modération ───────────── */

.pack-series {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 14px 0 4px;
}

.pack-series button {
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--panel2);
  color: var(--muted);
  font: 600 13px Inter;
  cursor: pointer;
}

.pack-series button:hover {
  color: var(--text);
}

.pack-series button.active {
  border-color: var(--green);
  background: color-mix(in srgb, var(--green) 16%, var(--panel2));
  color: var(--green2);
}

.notice {
  margin: 0 0 18px;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid #e3b34155;
  background: #e3b3411a;
  color: #f1d9a0;
  line-height: 1.5;
}

.notice.ok {
  border-color: #a6e85d55;
  background: #a6e85d14;
  color: var(--green2);
}

.ok-text { color: var(--green); }
.warn-text { color: #f0c062; }

.legal-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 16px;
  margin-top: 22px;
  font-size: 12px;
}

.legal-links a {
  color: var(--muted);
}

.forgot-link {
  display: block;
  margin: 14px auto 0;
}

.check a {
  color: var(--green);
}

.captcha {
  margin-top: 16px;
  min-height: 65px;
}

.chat-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
}

.chat-head a {
  color: var(--text);
  text-decoration: none;
}

.link-button.with-icon {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.link-button.with-icon .icon {
  width: 15px;
  height: 15px;
}

.excerpt {
  margin: 8px 0 0;
  padding: 8px 12px;
  border-left: 3px solid #ed6d6799;
  background: #ffffff08;
  white-space: pre-line;
  color: var(--text);
}

.admin-report .row {
  flex-wrap: wrap;
  justify-content: flex-end;
}

.admin-messages {
  max-height: 260px;
  overflow: auto;
}

.plain-list {
  margin: 0;
  padding-left: 18px;
  color: var(--muted);
  line-height: 1.6;
}

@media (max-width: 720px) {
  .admin-report {
    flex-direction: column;
    align-items: stretch;
  }

  .table {
    display: block;
    overflow-x: auto;
  }
}

/* Grande carte (ouverture, marché) : le texte du bas ne déborde jamais sur l'illustration. */
.game-card .info {
  min-height: 0;
  overflow: hidden;
}

.reveal-front .game-card .info {
  padding-top: 10px;
}

.reveal-front .game-card .card-details,
.listing-card .game-card .card-details {
  -webkit-line-clamp: 5;
  font-size: 10.5px;
  line-height: 1.38;
}

.reveal-front .game-card p {
  -webkit-line-clamp: 2;
}

/* Mobile : la barre latérale laisse la place à la barre de navigation du bas
   (à garder en fin de fichier, après les règles « aside { display: flex } »). */
@media (max-width: 750px) {
  aside {
    display: none;
  }
}

/* Logo HoloCarte : nom plus long que l'ancien sigle, taille ajustée. */
aside .logo { font-size: clamp(22px, 1.75vw, 32px); }
.auth .logo { font-size: 38px; }

/* Icône WoW d'origine (56 px) en attendant sa version HD : petite et centrée, comme avant. */
.game-card .card-art img.small-icon {
  inset: 0;
  margin: auto;
  width: clamp(40px, 42%, 84px);
  height: auto;
  aspect-ratio: 1;
  padding: 0;
  object-fit: cover;
  border-radius: 8px;
  border: 2px solid #0006;
  filter: drop-shadow(0 4px 8px #0008);
}

/* ───────────── Corrections mobile ───────────── */
/* Les listes déroulantes (bataille : noms de cartes longs) ne dépassent jamais de leur conteneur. */
select { max-width: 100%; min-width: 0; text-overflow: ellipsis; }
.field select { width: 100%; }

@media (max-width: 750px) {
  /* Onglets trop nombreux : défilement horizontal plutôt que débordement. */
  .tabs { overflow-x: auto; scrollbar-width: none; gap: 16px; }
  .tabs::-webkit-scrollbar { display: none; }
  .tabs button { flex: 0 0 auto; }
  /* Tableaux (classement, modération) : défilent dans leur carte. */
  section.card:has(> .table) { overflow-x: auto; }
}

@media (max-width: 380px) {
  /* Très petits écrans : deux cartes par ligne qui tiennent dans la largeur. */
  .market-grid.cards.dense { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .table th, .table td { padding-left: 6px; padding-right: 6px; }
}

/* ═════════════ Navigation mobile : solde en haut à droite, onglets du bas, menu « Plus » ═════════════ */
.topbar, .sheet-backdrop, .title-icon { display: none; }

@media (max-width: 750px) {
  :root { --tabbar-h: 66px; }

  /* Solde : en haut à droite de la page, il défile avec elle. */
  .topbar {
    display: flex;
    justify-content: flex-end;
    position: absolute;
    top: 0; left: 0; right: 0;
    z-index: 4;
    padding: calc(env(safe-area-inset-top) + 12px) 16px 0;
    pointer-events: none;
  }
  .chip-stat {
    pointer-events: auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 38px;
    padding: 0 14px;
    border-radius: 12px;
    background: var(--panel2);
    color: var(--green);
    font: 700 16px Outfit;
    text-decoration: none;
  }
  .chip-stat .icon { width: 19px; height: 19px; }

  main {
    padding: calc(env(safe-area-inset-top) + 64px) 16px calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 24px) !important;
  }

  /* Onglets du bas : 5 entrées égales, icône + libellé, actif en vert. */
  .mobile-nav {
    display: grid !important;
    grid-template-columns: repeat(5, 1fr);
    gap: 0 !important;
    overflow: visible !important;
    z-index: 20;
    height: calc(var(--tabbar-h) + env(safe-area-inset-bottom));
    padding: 6px 2px calc(6px + env(safe-area-inset-bottom)) !important;
    background: #111311;
  }
  .mobile-nav a, .mobile-nav .more {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-width: 0;
    padding: 2px !important;
    border: 0;
    background: none !important;
    color: var(--muted);
    font: 500 12px Inter !important;
    text-decoration: none;
    cursor: pointer;
  }
  .mobile-nav .nav-label { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .mobile-nav .nav-icon { display: grid; place-items: center; width: auto; height: 26px; }
  .mobile-nav .nav-icon .icon { width: 24px; height: 24px; }
  .mobile-nav .more .icon { width: 26px; height: 26px; }
  .mobile-nav .more .icon circle { fill: currentColor; stroke: none; }
  .mobile-nav a.active, .mobile-nav .more.active, body.sheet-open .mobile-nav .more { color: var(--green); }
  .mobile-nav .badge { position: absolute; top: 0; left: calc(50% + 8px); }

  /* Menu « Plus » : liste flottante au-dessus de la barre, côté droit. */
  .sheet-backdrop:not([hidden]) {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 19;
    background: #0006;
    animation: fade-in .12s ease;
  }
  .sheet {
    position: absolute;
    right: 8px;
    bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 4px);
    width: min(270px, calc(100vw - 16px));
    max-height: calc(100vh - var(--tabbar-h) - 40px);
    overflow-y: auto;
    padding: 6px;
    background: #141614;
    border: 1px solid var(--line);
    border-radius: 18px;
    box-shadow: 0 16px 40px #000c;
    transform-origin: bottom right;
    animation: menu-pop .14s ease;
  }
  .sheet-list a {
    position: relative;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 13px 16px;
    border-radius: 12px;
    color: var(--text);
    font: 500 17px Inter;
    text-decoration: none;
  }
  .sheet-list a .nav-icon { display: grid; place-items: center; }
  .sheet-list a .icon { width: 24px; height: 24px; }
  .sheet-list a:active, .sheet-list a:focus-visible { background: var(--panel2); outline: none; }
  .sheet-list a.active { color: var(--green); }
  .sheet-list .badge { margin-left: auto; }

  body.logged-out .topbar { display: none; }
  body.logged-out main { padding-top: 24px !important; }

  /* En-têtes : icône verte devant le titre, actions à droite (ou dessous si la place manque). */
  .page-head { flex-wrap: wrap; gap: 14px; align-items: flex-start; margin-bottom: 22px !important; }
  .page-head > div:first-child { flex: 1 1 180px; min-width: 0; }
  .page-head h1 { display: flex; align-items: center; gap: 12px; font-size: 30px; }
  .title-icon { display: inline-grid; place-items: center; color: var(--green); }
  .title-icon .icon { width: 28px; height: 28px; }
  .page-head p { font-size: 15px; }
  .page-head > :not(:first-child) { display: flex; flex-wrap: wrap; gap: 8px; }
  .page-head .button { white-space: nowrap; }
}

@keyframes menu-pop { from { transform: scale(.94); opacity: 0; } }
@keyframes fade-in { from { opacity: 0; } }

/* ───────────── Texte des cartes : jeu, puis phrase d'ambiance ───────────── */
.game-card .info .card-game {
  margin: 2px 0 0;
  font-weight: 700;
  font-size: .78em;
  letter-spacing: .02em;
}
.game-card .info .card-lore {
  margin: 3px 0 0;
  font-size: .74em;
  font-style: italic;
  line-height: 1.35;
  opacity: .85;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.game-card .power { display: none; }

/* Drapeau « signaler » sur l'illustration : discret, visible au survol (toujours visible sur écran tactile). */
.game-card .report-art {
  position: absolute;
  right: 6px;
  bottom: 6px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: #000a;
  color: #fff;
  cursor: pointer;
  opacity: 0;
  transition: opacity .15s;
}
.game-card .report-art .icon { width: 14px; height: 14px; }
.game-card:hover .report-art, .game-card .report-art:focus-visible { opacity: .85; }
.game-card .report-art:hover { opacity: 1; background: var(--red); }
@media (hover: none) { .game-card .report-art { opacity: .55; } }

.radio-list { display: grid; gap: 8px; margin: 14px 0; }
.admin-thumb { width: 56px; height: 56px; border-radius: 10px; object-fit: contain; background: var(--panel2); flex: 0 0 auto; }
.admin-card-report { align-items: flex-start; gap: 14px; }

/* ───────────── Abonnement Pro ───────────── */
.plan-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--panel2);
  border: 1px solid var(--line);
  color: var(--muted);
  font: 800 12px Inter;
  letter-spacing: .08em;
}
.plan-badge.pro { background: linear-gradient(135deg, #a6e85d, #5de8c8 55%, #b48cff); color: #0c0d0c; border: 0; }
.premium-card { margin-bottom: 20px; }
.premium-card.is-pro { border-color: #a6e85d66; box-shadow: 0 0 0 1px #a6e85d33, 0 10px 40px #a6e85d14; }
.plan-table { margin-top: 12px; }
.plan-table td:nth-child(n+2), .plan-table th:nth-child(n+2) { text-align: center; }
body.is-pro .chip-stat::after, body.is-pro .side-bottom .coin .nav-label::after {
  content: 'PRO';
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 6px;
  background: linear-gradient(135deg, #a6e85d, #5de8c8 55%, #b48cff);
  color: #0c0d0c;
  font: 800 10px Inter;
  letter-spacing: .06em;
}

/* Page « bientôt disponible » (combats) */
.coming-soon { text-align: center; padding: 42px 24px; }
.coming-soon .coming-icon { display: inline-grid; place-items: center; width: 64px; height: 64px; border-radius: 18px; background: #a6e85d1a; color: var(--green); margin-bottom: 14px; }
.coming-soon .coming-icon .icon { width: 32px; height: 32px; }
.coming-soon p { max-width: 520px; margin: 10px auto 0; }

/* Mobile : pas de zoom au double-tap (un tap à côté d'un bouton faisait zoomer/dézoomer la page) ;
   le pincement pour zoomer reste possible. */
html, body { touch-action: manipulation; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
a, button, input, select, textarea, label, [data-action] { touch-action: manipulation; }
@media (max-width: 750px) {
  /* iOS zoome automatiquement sur un champ dont le texte fait moins de 16 px. */
  input, select, textarea { font-size: 16px !important; }
}

/* ───────────── Centre de notifications ───────────── */
.side-bottom .bell-link { position: relative; }
.side-bottom .bell-link .badge, .topbar .bell .badge { position: absolute; }
.side-bottom .bell-link .badge { top: 6px; left: 26px; }
.badge[hidden] { display: none !important; }
@media (max-width: 750px) {
  .topbar { gap: 8px; align-items: center; }
  .topbar .bell {
    pointer-events: auto;
    position: relative;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: var(--text);
    cursor: pointer;
  }
  .topbar .bell .icon { width: 24px; height: 24px; }
  .topbar .bell .badge { top: 2px; right: 0; }
}
.notif-list { display: grid; gap: 6px; margin-top: 14px; max-height: 65vh; overflow-y: auto; }
.notif {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px;
  border-radius: 12px;
  background: var(--panel2);
  border: 1px solid var(--line);
  color: var(--text);
  text-decoration: none;
}
.notif.unread { border-color: #a6e85d55; }
.notif.alert { border-color: #a6e85d; background: #a6e85d14; }
.notif-icon { display: grid; place-items: center; width: 32px; height: 32px; flex: 0 0 auto; border-radius: 10px; background: #a6e85d1a; color: var(--green); }
.notif-icon .icon { width: 18px; height: 18px; }
.notif-text { display: block; line-height: 1.4; }
.notif small { display: block; margin-top: 3px; color: var(--muted); }

/* ───────────── Pack Pro du jour ───────────── */
.daily-pack {
  display: flex;
  align-items: center;
  gap: 16px;
  width: min(100%, 520px);
  margin: 22px auto 0;
  padding: 16px 18px;
  text-align: left;
  border-radius: 16px;
  background: #171427;
  border: 1px solid #3a2f63;
}
.daily-pack > div { flex: 1; }
.daily-pack h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 4px; }
.daily-pack p { margin: 0; color: var(--muted); }
.daily-pack.ready { border-color: #b48cff; box-shadow: 0 0 30px #b48cff22; }

/* ───────────── Statistiques du profil ───────────── */
.game-stats { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) !important; }
.completion { display: grid; gap: 12px; margin-top: 22px; }
.completion-row { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; align-items: center; }
.completion-row .ach-bar { grid-column: 1 / -1; }
.best-card { margin-top: 18px; }
.best-card b[data-r="L"] { color: #f5b942; }
.best-card b[data-r="UR"] { color: #ff8a3d; }
.best-card b[data-r="SR"] { color: #b48cff; }

/* ═════════════ Anti-décalage horizontal (iPhone surtout) ═════════════ */
/* Dans une grille, un élément ne doit jamais imposer une colonne plus large que l'écran
   (pseudo long, texte sans espace…) : c'est ce qui faisait « glisser » la page sur le côté. */
.cards > *, .market-grid > *, .showcase > *, .stats > *, .game-stats > * { min-width: 0; }
.market-seller, .market-meta, .game-card h3, .game-card .info p, .notif-text, .list-item h3, .list-item p {
  overflow-wrap: anywhere;
}
@media (max-width: 750px) {
  .cards, .cards.dense, .market-grid.cards.dense { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .showcase { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  main, #page { max-width: 100vw; }
}
/* Filet de sécurité : la page ne peut pas défiler horizontalement (clip garde le « sticky »). */
html, body { overflow-x: hidden; }
@supports (overflow: clip) { html, body { overflow-x: clip; } }
/* Très petits écrans (iPhone SE) : la carte de connexion tient dans la largeur. */
@media (max-width: 380px) {
  .auth { width: 100%; padding: 26px 18px; box-sizing: border-box; }
  .auth .legal-links { flex-wrap: wrap; }
  body.logged-out main { padding-left: 12px !important; padding-right: 12px !important; }
}

/* ═════════════ Textes des boutons sur mobile ═════════════ */
@media (max-width: 750px) {
  /* Un libellé de bouton tient sur une ligne. */
  .button, .link-button, .tabs button, .rarity-chip, .pager .button { white-space: nowrap; }
  /* Paramètres : le bouton passe sous le texte s'il manque de place (« Se déconnecter » débordait). */
  .setting { flex-wrap: wrap; gap: 10px 14px; }
  .setting > div { flex: 1 1 180px; min-width: 0; }
  .setting > .button { flex: 0 0 auto; }
  /* Barres de recherche : le champ prend la ligne entière, les boutons et tris dessous. */
  .collection-bar { flex-wrap: wrap; gap: 8px; }
  .collection-bar > input, .collection-bar .search-xl { flex: 1 1 100%; min-width: 0; }
  .collection-bar > .button, .collection-bar > select { flex: 1 1 auto; }
  /* Pagination compacte. */
  .pager { gap: 8px; flex-wrap: wrap; justify-content: center; }
  .pager .button { padding-left: 12px; padding-right: 12px; }
  /* Puces de cartes (échanges) : une ligne, nom tronqué. */
  .chip { max-width: 100%; white-space: normal; overflow-wrap: anywhere; text-align: left; line-height: 1.3; }
  /* Mise : boutons − / + carrés, centrés. */
  .stepper { display: grid; place-items: center; line-height: 1; padding: 0; min-width: 44px; }
  /* Vitrine : emplacements vides lisibles. */
  .slot-empty { font-size: 13px; padding: 10px; white-space: normal; overflow-wrap: normal; word-break: normal; }
  /* Statistiques du profil : deux par ligne. */
  .game-stats { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; }
  .game-stats .stat { padding: 14px; }
  /* Tableau Gratuit / Pro : colonnes chiffrées serrées. */
  .plan-table td:first-child { white-space: normal; }
  .plan-table td:nth-child(n+2), .plan-table th:nth-child(n+2) { white-space: nowrap; width: 1%; }
}

/* ───────────── Illustration de secours (carte sans image) ───────────── */
.fallback-art {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: #fffe;
  background:
    radial-gradient(circle at 50% 42%, #ffffff38 0, transparent 58%),
    repeating-linear-gradient(135deg, #ffffff0d 0 6px, transparent 6px 14px);
}
.fallback-art svg {
  width: 46%;
  max-width: 96px;
  height: auto;
  filter: drop-shadow(0 4px 10px #0006);
}
.fallback-art span {
  font: 700 clamp(8px, 1.6vw, 11px) Inter;
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: .8;
}

/* Rendus de personnages / portraits de boss WoW (images rectangulaires avec décor) : remplissent l'illustration. */
.game-card .card-art img.cover { padding: 0; object-fit: cover; object-position: 50% 25%; filter: none; }

/* ═════════════ Performance : effets animés par le GPU, sans repeindre les cartes ═════════════ */
/* Avant : les reflets animaient background-position (et filter: brightness() pour les paillettes) : chaque carte
   R et plus était repeinte à chaque image, avec son halo et l'ombre de son illustration (≈ 900 « paint » par
   seconde sur une page de collection). Désormais le reflet est une bande déplacée par transform et le
   scintillement joue sur l'opacité : le compositeur anime, rien n'est repeint. Rendu identique. */
.game-card[data-r="R"] .info::after,
.game-card[data-r="SR"] .info::after,
.game-card[data-r="UR"] .info::after,
.game-card[data-r="L"] .info::after,
.game-card[data-r="UR"] .card-art::after,
.game-card[data-r="L"] .card-art::after {
  inset: 0 auto 0 0;
  width: 260%;
  background-size: 100% 100%;
  transform: translateX(-80%);
  animation: card-sheen-x 5s ease-in-out infinite;
}

/* background-position 130 % → -30 % d'un fond 260 % ≙ translation de -80 % → +18,46 % d'une bande de 260 %. */
@keyframes card-sheen-x {
  0%, 35% { transform: translateX(-80%); }
  70%, 100% { transform: translateX(18.46%); }
}

.game-card[data-r="UR"] .info::before { animation: card-glint 2.4s ease-in-out infinite; }
.game-card[data-r="L"] .info::before { animation: card-glint 2s ease-in-out infinite; }

@keyframes card-glint {
  50% { opacity: 1; }
}

/* Survol d'une carte brillante : la carte devient un calque, son inclinaison ne repeint plus la page. */
.game-card.tilting { will-change: transform; }
.game-card.tilting .info::before { animation: none; }

/* Page masquée par l'ouverture d'un paquet ou une fenêtre : ses animations décoratives s'arrêtent. */
body.revealing main *,
body.revealing main *::before,
body.revealing main *::after,
body.modal-open main *,
body.modal-open main *::before,
body.modal-open main *::after {
  animation-play-state: paused !important;
}

/* Halo pulsé de la carte rare à l'ouverture : on anime l'opacité d'un calque (et non box-shadow, repeint à chaque image). */
.reveal-card.glow .reveal-front .game-card { animation: none; }
.reveal-card.glow .reveal-front::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 16px;
  box-shadow: 0 0 0 2px var(--rc), 0 0 70px var(--rc);
  opacity: 0;
  pointer-events: none;
  animation: glow-pulse 1.6s ease-in-out .6s 2;
}

@keyframes glow-pulse {
  50% { opacity: 1; }
}

body.no-anim .reveal-card.glow .reveal-front::after { animation: none; }

@media (prefers-reduced-motion: reduce) {
  .game-card .info::before,
  .game-card .info::after,
  .game-card .card-art::after,
  .reveal-card.glow .reveal-front::after {
    animation: none !important;
  }
}

/* Infobulle : déplacée par transform (voir placeTip), sans relayout à chaque mouvement de souris. */
.card-tip { left: 0; top: 0; will-change: transform; }

/* ═════════════ Pagination à la hauteur de l'écran ═════════════ */
.fit-hidden { display: none !important; }
.fit-pager { margin: 12px 0 0; }

.grid-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 12px;
  margin: 4px 0 12px;
}

.grid-head .pager { margin: 0; }
.cards + .pager-bottom { margin-top: 22px; }

.rarity-chip small {
  margin-left: 5px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
}

.collection-bar .rarity-chips { margin: 0; align-items: center; }

/* Titre et nom du jeu ne rétrécissent jamais (le titre sur deux lignes était rogné et chevauché) :
   seule la phrase d'ambiance cède la place. */
.game-card .info > h3, .game-card .info > .card-game { flex-shrink: 0; }
.profile-bio { margin: 26px 0; }

/* Paramètres : sur téléphone une seule colonne (abonnement en premier) ; deux colonnes sur grand écran. */
.settings-grid { display: flex; flex-direction: column; gap: 20px; }
.settings-col { display: contents; }
.settings-grid .premium-card { order: -1; margin: 0; }
.settings-sub { margin-top: 27px; }

/* ═════════════ Ordinateur : chaque page tient dans l'écran, sans défilement ═════════════ */
@media (min-width: 751px) {
  main { padding: clamp(14px, 2.6vh, 34px) clamp(20px, 2.4vw, 48px) clamp(12px, 2vh, 24px); }

  /* En-têtes compacts : titre et sous-titre sur une ligne, actions à droite. */
  .page-head { margin-bottom: clamp(10px, 1.8vh, 20px); align-items: center; gap: 16px; }
  .page-head > div:first-child { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 16px; min-width: 0; }
  .page-head h1 { margin: 0; font-size: clamp(24px, 2vw, 32px); }
  .page-head p { font-size: 13px; }
  .tabs { margin-bottom: clamp(10px, 1.8vh, 20px); }
  .notice { margin-bottom: 12px; padding: 9px 14px; }

  /* Barre de recherche + filtres de rareté sur une même ligne. */
  .collection-bar { align-items: center; margin-bottom: clamp(6px, 1.2vh, 12px); }
  .collection-bar .search-xl { padding: 10px 14px; min-width: 200px; }
  .collection-bar select { min-width: 150px; padding: 10px 30px 10px 12px; }
  .collection-bar .button { padding: 10px 16px; }
  .rarity-chips { margin-bottom: 10px; }
  .grid-head { min-height: 34px; margin: 0 0 10px; }
  .grid-head .pager .button { padding: 7px 12px; }
  .pager-bottom { display: none; }
  .selection-bar { margin-bottom: 10px; padding: 8px 12px; }

  /* Marché : prix et temps sur une ligne, vendeur et bouton sur la suivante. */
  .market-card { padding: 8px; }
  .market-card > * { grid-column: 1 / -1; }
  .market-meta { margin-top: 6px; }
  .market-meta small { font-size: 9px; }
  .market-meta b { font-size: 13px; }
  .market-seller { margin-top: 3px; line-height: 1.3; }
  .market-action { margin-top: 6px; }
  .market-action .button, .market-action a.button { padding: 6px 10px; font-size: 12px; }

  /* Fenêtre d'échange : les deux listes de cartes se partagent la hauteur, la fenêtre ne défile pas. */
  .modal .picker { max-height: clamp(80px, calc((100vh - 380px) / 2), 260px); }

  /* Paquets : tailles proportionnelles à la hauteur de l'écran. */
  .pulls { padding-top: 0; }
  .pulls h1 { font-size: clamp(26px, 2.2vw, 38px); margin-bottom: 2px; }
  .pulls .link-button { margin-top: 4px; }
  .pack-art { margin-top: clamp(8px, 2.2vh, 40px); width: clamp(100px, min(13vw, 21vh), 220px); }
  .open-label { margin-top: clamp(4px, 1.2vh, 22px); }
  .pack-counter { margin-top: clamp(6px, 1.2vh, 22px); padding: 8px 20px; }
  .pack-counter b { font-size: 20px; }
  .buy-pack { margin-top: clamp(8px, 1.2vh, 16px); padding: 11px 24px; }
  .buy-hint { margin-top: 6px; }
  .daily-pack { margin-top: clamp(8px, 1.6vh, 22px); padding: 10px 16px; }

  /* Listes compactes (classement, succès, listes de joueurs) : la pagination fait le reste. */
  .table th, .table td { padding: clamp(6px, 1.1vh, 12px) 16px; }
  .ach-overall { margin-bottom: 14px; padding: 12px 18px; }
  .ach-grid { gap: 12px; }
  .ach { padding: 14px 16px; }
  .section-title { margin: 18px 0 10px; }
  .list-item { padding-top: clamp(8px, 1.4vh, 16px); padding-bottom: clamp(8px, 1.4vh, 16px); }

  /* Messages : la conversation occupe la hauteur restante et défile en interne (comme toute messagerie). */
  .chat { height: calc(100vh - clamp(14px, 2.6vh, 34px) - clamp(12px, 2vh, 24px) - 70px); min-height: 300px; }
  .chat-messages { max-height: none; min-height: 0; }
  .chat-thread { min-height: 0; }

  /* Détail d'une vente : carte à gauche à la hauteur de l'écran, infos et historique des mises à droite. */
  .listing-page {
    display: grid;
    grid-template-columns: min(340px, calc((100vh - 120px) / 1.4)) minmax(0, 1fr);
    grid-template-rows: auto auto auto 1fr;
    column-gap: clamp(20px, 2.6vw, 36px);
    align-items: start;
  }
  .listing-page > .back-link { grid-column: 1 / -1; }
  .listing-layout { display: contents; }
  .listing-card { grid-column: 1; grid-row: 2 / span 3; max-width: none; }
  .listing-side { grid-column: 2; grid-row: 2; }
  .listing-page > .history-title { grid-column: 2; grid-row: 3; margin-top: 16px; }
  .listing-page > .bid-history, .listing-page > p.muted { grid-column: 2; grid-row: 4; }
}

@media (min-width: 1024px) {
  /* Profil : statistiques à gauche, vitrine (2 × 2 cartes à la hauteur de l'écran) à droite. */
  .profile-layout { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(16px, 2vw, 32px); align-items: start; }
  .profile-layout .profile { padding: clamp(16px, 2.6vh, 30px); }
  .profile-bio { margin: clamp(10px, 2vh, 22px) 0; }
  .profile-layout .game-stats { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 10px; margin-top: 0; }
  .profile-layout .game-stats .stat { padding: clamp(10px, 1.6vh, 18px) 14px; }
  .profile-layout .completion { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px 20px; margin-top: clamp(12px, 2vh, 22px); }
  .profile-showcase .section-title { margin: 0 0 10px; }
  .profile-showcase .showcase {
    --sc-w: clamp(110px, calc((100vh - 200px) / 2 / 1.4), 240px);
    grid-template-columns: repeat(2, var(--sc-w));
  }

  /* Paramètres : deux colonnes. */
  .settings-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
  .settings-col { display: grid; gap: 16px; }
  .settings-grid .premium-card { order: 0; }
  .settings-grid .profile { padding: clamp(14px, 2.2vh, 26px) clamp(16px, 1.6vw, 26px); }
  .settings-grid .setting { padding: clamp(8px, 1.3vh, 16px) 0; }
  .settings-grid .setting p { font-size: 13px; }
  .settings-sub { margin-top: clamp(12px, 2vh, 24px); }
  .settings-grid .legal-links { margin-top: 12px; }
  .plan-table th, .plan-table td { padding: clamp(5px, .9vh, 10px) 12px; }
}

@media (max-width: 750px) {
  /* Téléphone : les nombres de cartes par rareté du catalogue restent dans l'infobulle (une seule ligne de filtres). */
  .rarity-chip small { display: none; }
}

/* ───────────── Ouverture de paquet ───────────── */
/* Sur ordinateur, le menu de gauche reste visible : l'ouverture occupe seulement la zone de contenu,
   donc le centre de l'écran ne bouge pas entre la page Paquets et l'ouverture. */
@media (min-width: 751px) {
  .reveal-overlay { left: var(--sidebar-w, 238px); }
}
/* « Encore N cartes » est une simple indication (on avance avec la flèche ou en touchant la carte),
   à la même hauteur que le bouton « Voir le paquet » pour que rien ne saute. */
.reveal-left {
  display: grid;
  place-items: center;
  min-height: 46px;
  margin: 0;
  color: var(--muted);
  font: 600 15px Inter;
  cursor: default;
  user-select: none;
}
.reveal-main { min-height: 46px; }
.reveal-stage .reveal-main { height: 48px; min-height: 48px; box-sizing: border-box; margin-top: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0; display: grid; place-items: center; }

/* ───────────── Navigation instantanée ───────────── */
/* Page sans cache qui tarde (> 120 ms) : fine barre animée en haut ; la page précédente reste affichée. */
body.nav-pending::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  z-index: 80;
  width: 40%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--green), transparent);
  pointer-events: none;
  animation: nav-progress .9s ease-in-out infinite;
}

@keyframes nav-progress {
  from { transform: translateX(-100%); }
  to { transform: translateX(250%); }
}

/* Page du catalogue pas encore en cache : la grille actuelle s'estompe un peu (seulement si l'attente dure). */
#catalog-results.is-pending {
  opacity: .55;
  transition: opacity .15s .12s;
}

/* Ouverture d'un paquet : le sachet tremble et se déchire pendant la requête. */
.pack-intro .intro-pack {
  width: clamp(150px, 40vw, 210px);
  filter: drop-shadow(0 16px 30px #0009) drop-shadow(0 0 30px #a6e85d60);
  animation: pack-tear .52s cubic-bezier(.3, .7, .4, 1) both, pack-wait .9s .52s ease-in-out infinite;
}

.pack-intro .reveal-counter {
  margin-top: 22px;
}

@keyframes pack-tear {
  0% { transform: scale(.92); }
  20% { transform: scale(1.04) rotate(-3deg); }
  40% { transform: scale(1.06) rotate(3deg); }
  60% { transform: scale(1.08) rotate(-2deg); }
  100% { transform: scale(1.12); opacity: .9; }
}

@keyframes pack-wait {
  50% { transform: scale(1.15); opacity: 1; }
}

body.no-anim .pack-intro .intro-pack {
  animation: none;
}

/* ───────────── Cadrage des illustrations (voir artFrames dans app.js) ───────────── */
/* Proportions proches du cadre : l'image le couvre. */
.game-card .card-art.art-cover img:not(.art-bg) {
  padding: 0;
  object-fit: cover;
  filter: none;
}

/* Proportions très différentes : image entière sur une copie floutée et assombrie d'elle-même. */
.game-card .card-art.art-framed img:not(.art-bg) {
  padding: 0;
  object-fit: contain;
  filter: drop-shadow(0 4px 12px #000a);
}

/* Copie floutée dessinée au quart de sa taille puis agrandie : 16 fois moins de pixels à flouter. */
.game-card .card-art img.art-bg {
  inset: auto;
  top: 0;
  left: 0;
  width: 25%;
  height: 25%;
  padding: 0;
  object-fit: cover;
  transform-origin: 0 0;
  transform: scale(4.4) translate(-6%, -6%);
  filter: blur(3px) brightness(.45) saturate(1.15);
}

.game-card .card-art:not(.art-framed) img.art-bg {
  display: none;
}

/* Pixel art agrandi : net, sans lissage. */
.game-card .card-art img.pixel {
  image-rendering: pixelated;
}

/* ───────────── Messages sur téléphone : le fil seul, au-dessus de la barre du bas ───────────── */
.chat-back {
  display: none;
}

.chat,
.chat-thread {
  min-width: 0;
}

.chat-head {
  min-width: 0;
}

.chat-head > a.spacer {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 750px) {
  /* Conversation ouverte : la liste et le titre de page laissent toute la place au fil. */
  #page:has(.chat.has-thread) > .page-head {
    display: none;
  }

  .chat.has-thread .chat-list {
    display: none;
  }

  .chat.has-thread {
    display: flex;
    flex-direction: column;
    height: calc(100vh - env(safe-area-inset-top) - 64px - var(--tabbar-h, 66px) - env(safe-area-inset-bottom) - 24px);
    height: calc(100dvh - env(safe-area-inset-top) - 64px - var(--tabbar-h, 66px) - env(safe-area-inset-bottom) - 24px);
    min-height: 260px;
  }

  .chat.has-thread .chat-thread {
    flex: 1;
    min-height: 0;
  }

  .chat.has-thread .chat-messages {
    max-height: none;
    min-height: 0;
  }

  .chat-back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    margin: -10px 0 -10px -12px;
    font-size: 20px;
  }

  .chat-form input {
    font-size: 16px; /* iOS : pas de zoom automatique sur le champ */
  }
}

/* ───────────── Cibles tactiles d'au moins 44 px (écrans tactiles) ───────────── */
@media (pointer: coarse) {
  .tabs button,
  .button.small,
  .chat-form .button,
  .pager .button {
    min-height: 44px;
  }

  /* Petits éléments : zone de tap agrandie sans changer leur dessin. */
  /* .favorite, .report-art et .modal-close sont déjà positionnés (coins de la carte / de la fenêtre). */
  .toggle,
  .link-button,
  .rarity-chip,
  .dots button {
    position: relative;
  }

  .toggle::before,
  .report-art::before,
  .link-button::before,
  .favorite::before,
  .rarity-chip::before,
  .dots button::before,
  .modal-close::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: max(100%, 44px);
    height: max(100%, 44px);
    transform: translate(-50%, -50%);
  }
}

/* Fil sans droit d'écriture : champ désactivé et courte explication. */
.chat-form[aria-disabled="true"] input {
  opacity: .6;
}

.chat-note {
  padding: 0 12px 12px;
  font-size: 12px;
}

/* ═════════════ Cartes holographiques ═════════════
   Style retenu : « Arc-en-ciel classique » (reflet Pokémon). Structure commune à tous les styles :
   - .holo-fx > .holo-foil  : reflet propre au style (classe holo-<style> sur la carte : holo-rainbow aujourd'hui ;
     d'autres styles — galaxie, or… — pourront s'ajouter par rareté avec une nouvelle classe) ;
   - .holo-fx > .holo-glare : éclat blanc commun, centré sur le pointeur.
   --mx / --my (pourcentages, déclarés avec @property pour pouvoir être animés) suivent le pointeur ou l'inclinaison
   du téléphone ; sans interaction, la carte ondule seule (sway). Seules les cartes visibles (.holo-live) sont animées. */
@property --mx { syntax: '<percentage>'; inherits: true; initial-value: 50%; }
@property --my { syntax: '<percentage>'; inherits: true; initial-value: 50%; }

.game-card.holo {
  isolation: isolate;
  border-color: #c9a24a;
}

.holo-fx {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  border-radius: inherit;
  /* Intensité du reflet par zone : franc sur le cadre (bord de 6 px), modéré sur l'illustration (moitié haute),
     très léger sur le texte. Les couches du masque s'additionnent. */
  -webkit-mask-image:
    linear-gradient(90deg, #000 0 6px, #0000 6px calc(100% - 6px), #000 calc(100% - 6px)),
    linear-gradient(#000 0 6px, #0000 6px calc(100% - 6px), #000 calc(100% - 6px)),
    linear-gradient(#0009 0 48%, #0003 54%, #0002 100%);
  mask-image:
    linear-gradient(90deg, #000 0 6px, #0000 6px calc(100% - 6px), #000 calc(100% - 6px)),
    linear-gradient(#000 0 6px, #0000 6px calc(100% - 6px), #000 calc(100% - 6px)),
    linear-gradient(#0009 0 48%, #0003 54%, #0002 100%);
}

.holo-foil,
.holo-glare {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  border-radius: inherit;
}

.holo-glare {
  z-index: 4;
  mix-blend-mode: overlay;
  background: radial-gradient(farthest-corner circle at var(--mx) var(--my), #fffc 0%, #fff4 22%, #0000 55%);
  opacity: .8;
}

.holo-glare { opacity: .45; }

.modal .game-card.holo .holo-foil,
.reveal-front .game-card.holo .holo-foil,
.forge-result .game-card.holo .holo-foil,
.listing-card .game-card.holo .holo-foil {
  opacity: .38;
}

.modal .game-card.holo .holo-glare,
.reveal-front .game-card.holo .holo-glare,
.forge-result .game-card.holo .holo-glare,
.listing-card .game-card.holo .holo-glare {
  opacity: .45;
}

/* Grande carte : reflet plus fort, mais un peu moins appuyé sur l'illustration (elle doit rester bien lisible). */
.modal .game-card.holo .holo-fx,
.reveal-front .game-card.holo .holo-fx,
.forge-result .game-card.holo .holo-fx,
.listing-card .game-card.holo .holo-fx {
  -webkit-mask-image:
    linear-gradient(90deg, #000 0 7px, #0000 7px calc(100% - 7px), #000 calc(100% - 7px)),
    linear-gradient(#000 0 7px, #0000 7px calc(100% - 7px), #000 calc(100% - 7px)),
    linear-gradient(#0008 0 48%, #0003 54%, #0002 100%);
  mask-image:
    linear-gradient(90deg, #000 0 7px, #0000 7px calc(100% - 7px), #000 calc(100% - 7px)),
    linear-gradient(#000 0 7px, #0000 7px calc(100% - 7px), #000 calc(100% - 7px)),
    linear-gradient(#0008 0 48%, #0003 54%, #0002 100%);
}

/* Liseré irisé fin autour de la carte holo (le reflet du cadre s'y ajoute). */
.game-card.holo {
  box-shadow: 0 0 0 1.5px #ffffffb0, 0 0 14px -2px #b98cffaa;
}

/* Animation automatique (sans souris / sur mobile) : seulement sur les cartes visibles. */
.game-card.holo.holo-live:not(.tilting):not(.holo-device) {
  animation: holo-sway 6s ease-in-out infinite;
}

@keyframes holo-sway {
  0%, 100% { --mx: 20%; --my: 25%; transform: perspective(900px) rotateX(4deg) rotateY(-7deg); }
  50% { --mx: 80%; --my: 75%; transform: perspective(900px) rotateX(-4deg) rotateY(7deg); }
}

/* Inclinaison du téléphone : la carte suit l'appareil (pas d'ondulation automatique). */
.game-card.holo.holo-device {
  transition: transform .12s linear;
}

/* 1. Arc-en-ciel classique. Les corps de carte sont clairs (dorés, pastel) : en color-dodge le reflet les brûlait ;
   en overlay il garde ses couleurs sans effacer l'illustration ni le texte. Discret en grille, plus spectaculaire
   en grand (fenêtre de détail, ouverture de paquet, forge). */
.holo-rainbow .holo-foil {
  mix-blend-mode: overlay;
  opacity: .34;
  background:
    repeating-linear-gradient(110deg, #ff7773 0%, #ffed5f 6%, #a8ff5f 12%, #83fff7 18%, #7894ff 24%, #d875ff 30%, #ff7773 36%),
    repeating-linear-gradient(45deg, #0e152e 0%, #8fa3a3 4%, #8fc1c1 5%, #0e152e 9%);
  background-size: 300% 300%, 220% 220%;
  background-blend-mode: exclusion;
  background-position: calc(var(--mx) * 1.6) calc(var(--my) * 1.2), var(--mx) var(--my);
  filter: brightness(.8) contrast(1.6) saturate(1.3);
}

/* Animations réduites : reflet figé (position par défaut), carte immobile. */
@media (prefers-reduced-motion: reduce) {
  .game-card.holo.holo-live:not(.tilting) { animation: none; }
}

body.no-anim .game-card.holo.holo-live { animation: none; }

#page a.button,
.modal a.button {
  text-decoration: none;
}

.modal a.button .icon {
  width: 16px;
  height: 16px;
  vertical-align: -3px;
}

.holo-badge {
  display: inline-block;
  margin-left: 5px;
  padding: 2px 5px;
  border-radius: 4px;
  font: 800 9.5px/1.1 system-ui, sans-serif;
  letter-spacing: .08em;
  vertical-align: 1px;
  color: #111;
  background: linear-gradient(90deg, #ff9bd2, #ffe48a, #9bffcf, #8ad4ff, #c79bff);
  pointer-events: none;
}

/* La pastille de rareté passe au-dessus du reflet. */
.game-card .rarity.has-holo {
  z-index: 5;
}

.holo-pill {
  display: inline-block;
  vertical-align: middle;
  margin-left: 8px;
  padding: 3px 8px;
  border-radius: 999px;
  font: 800 11px/1.2 Outfit, system-ui, sans-serif;
  letter-spacing: .06em;
  color: #1b1030;
  background: linear-gradient(110deg, #ffd1f3, #fff2b8 30%, #c8ffe1 55%, #c4ecff 75%, #e3d4ff);
}

.holo-note {
  margin: 4px 0 8px;
  font-size: 13px;
  color: #b9a6ff;
}

.chip.chip-holo {
  background: linear-gradient(110deg, #ffd1f333, #fff2b833 30%, #c8ffe133 55%, #c4ecff33 75%, #e3d4ff33);
  box-shadow: inset 0 0 0 1px #c7a8ff;
}

.rarity-chip.holo-chip {
  background: linear-gradient(110deg, #ffd1f322, #c4ecff22);
  box-shadow: inset 0 0 0 1px #b79cff88;
}

.rarity-chip.holo-chip.active {
  color: #1b1030;
  background: linear-gradient(110deg, #ffd1f3, #fff2b8 30%, #c8ffe1 55%, #c4ecff 75%, #e3d4ff);
}

.holo-word {
  background: linear-gradient(90deg, #ff7ad9, #ffd36e, #7dffb0, #6ed3ff, #b18cff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-weight: 800;
}

.version-link {
  display: inline-block;
  margin-top: 6px;
}

.stat-holo b {
  background: linear-gradient(90deg, #ff7ad9, #ffd36e, #6ed3ff, #b18cff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.holo-completion {
  margin-top: 12px;
}

.holo-completion .ach-bar span {
  background: linear-gradient(90deg, #ff7ad9, #ffd36e, #7dffb0, #6ed3ff, #b18cff);
}

.how-holo {
  font-size: 14px;
  line-height: 1.5;
}

/* ───────── Ouverture de paquet : moment holo ───────── */
.reveal-card.holo-pull {
  position: relative;
}

.holo-burst,
.holo-flash {
  position: absolute;
  pointer-events: none;
}

.holo-burst {
  inset: -45%;
  z-index: -1;
  display: grid;
  place-items: center;
}

.holo-rays {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, #ff7ad955 0deg 6deg, transparent 6deg 15deg, #6ed3ff55 15deg 21deg, transparent 21deg 30deg,
    #ffd36e55 30deg 36deg, transparent 36deg 45deg);
  -webkit-mask: radial-gradient(circle, #000 20%, transparent 68%);
  mask: radial-gradient(circle, #000 20%, transparent 68%);
  opacity: 0;
  transform: scale(.4) rotate(0deg);
  animation: holo-rays 1.6s cubic-bezier(.2, .8, .2, 1) .15s forwards, holo-spin 18s linear 1.75s infinite;
}

.holo-ring {
  position: absolute;
  width: 60%;
  aspect-ratio: 1;
  border-radius: 50%;
  box-shadow: 0 0 0 3px #ffffffcc, 0 0 40px 12px #b18cffaa, inset 0 0 30px 6px #6ed3ff88;
  opacity: 0;
  transform: scale(.3);
  animation: holo-ring 1.1s ease-out .1s forwards;
}

.holo-flash {
  position: fixed;
  inset: 0;
  z-index: 5;
  background: radial-gradient(circle at 50% 45%, #fff 0%, #ffffffcc 25%, #e9dcff88 50%, transparent 75%);
  opacity: 0;
  animation: holo-flash .9s ease-out forwards;
}

@keyframes holo-flash {
  0% { opacity: 0; }
  12% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes holo-rays {
  to { opacity: 1; transform: scale(1) rotate(40deg); }
}

@keyframes holo-spin {
  from { transform: scale(1) rotate(40deg); }
  to { transform: scale(1) rotate(400deg); }
}

@keyframes holo-ring {
  0% { opacity: 0; transform: scale(.3); }
  30% { opacity: 1; }
  100% { opacity: 0; transform: scale(1.6); }
}

.reveal-rarity.is-holo {
  font-size: 1.15em;
}

@media (prefers-reduced-motion: reduce) {
  .holo-flash { display: none; }
  .holo-rays, .holo-ring { animation: none; opacity: .6; transform: none; }
}

body.no-anim .holo-flash { display: none; }
body.no-anim .holo-rays,
body.no-anim .holo-ring { animation: none; opacity: .6; transform: none; }

/* ───────── Forge holo ───────── */
.forge-link .icon,
.forge-go .icon {
  width: 17px;
  height: 17px;
}

.forge-rarities {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 4px 0 14px;
}

.forge-rarity {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: 10px;
  align-items: center;
  min-height: 56px;
  padding: 10px 14px;
  border: 1px solid #ffffff22;
  border-radius: 12px;
  background: #ffffff0a;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.forge-rarity .rarity { grid-row: span 2; position: static; }
.forge-rarity small { opacity: .7; }

.forge-rarity.active {
  border-color: transparent;
  box-shadow: 0 0 0 2px #c7a8ff, 0 6px 20px -8px #9d7bff;
  background: linear-gradient(110deg, #ff7ad914, #6ed3ff14);
}

.forge-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 18px;
}

.forge-col {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.forge-step {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 10px;
  font-size: 16px;
}

.forge-step > span {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  font-size: 13px;
  color: #1b1030;
  background: linear-gradient(110deg, #ffd1f3, #fff2b8 30%, #c8ffe1 55%, #c4ecff 75%, #e3d4ff);
}

.forge-step small { margin-left: auto; font-weight: 600; }

.forge-search { margin-bottom: 10px; }

/* Ordinateur : un seul écran, chaque colonne défile. */
.forge-grid {
  --forge-w: 128px;
  grid-template-columns: repeat(auto-fill, minmax(var(--forge-w), 1fr)) !important;
  align-content: start;
  max-height: calc(100vh - 380px);
  min-height: 220px;
  overflow: auto;
  padding: 4px;
  overscroll-behavior: contain;
}

.forge-tile {
  position: relative;
  min-width: 0;
  border-radius: 14px;
  cursor: pointer;
  outline: none;
  transition: transform .15s ease;
}

.forge-tile .game-card { pointer-events: none; min-height: 0; }
.forge-tile:focus-visible { box-shadow: 0 0 0 3px #6ed3ff; }

.forge-tile.selected {
  transform: translateY(-3px);
  box-shadow: 0 0 0 3px #c7a8ff, 0 10px 24px -8px #9d7bffcc;
}

.forge-check {
  position: absolute;
  z-index: 6;
  top: -6px;
  right: -6px;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  font-weight: 800;
  color: #1b1030;
  background: linear-gradient(110deg, #ffd1f3, #c4ecff);
  box-shadow: 0 2px 6px #0007;
}

.forge-hint { margin-top: 8px; }

.forge-bar {
  position: sticky;
  bottom: 12px;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 16px;
  padding: 12px 14px;
  border-radius: 16px;
  background: #121512ee;
  box-shadow: 0 0 0 1px #c7a8ff55, 0 10px 30px -10px #000c;
  backdrop-filter: blur(8px);
}

.forge-slots {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.forge-slot {
  flex: 1 1 0;
  min-width: 0;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 8px;
  border: 1px dashed #ffffff33;
  border-radius: 10px;
  font-size: 12px;
  text-align: center;
}

.forge-slot.filled {
  border: 0;
  padding: 0;
  background: linear-gradient(110deg, #ffd1f322, #c4ecff22);
  box-shadow: inset 0 0 0 1px #c7a8ff99;
}

.forge-slot-btn {
  width: 100%;
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 10px;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.forge-slot-name { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: 600; }
.forge-slot-x { opacity: .6; font-size: 16px; }
.forge-arrow { font-size: 20px; opacity: .7; }

.forge-go {
  min-height: 48px;
  padding: 0 22px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 800;
  background: linear-gradient(110deg, #ff7ad9, #ffd36e 35%, #7dffb0 60%, #6ed3ff 80%, #b18cff);
  color: #1b1030;
}

.forge-go:disabled { filter: grayscale(.8) brightness(.7); }

/* Animation de forge. */
.forge-stage {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.forge-burns {
  position: absolute;
  top: 0;
  left: 50%;
  width: 0;
  height: 0;
}

.forge-burn {
  position: absolute;
  top: 40px;
  width: 140px;
  margin-left: -70px;
}

.forge-burn.b0 { transform: translate3d(-170px, 0, 0) rotate(-8deg); }
.forge-burn.b1 { transform: translate3d(0, -30px, 0); }
.forge-burn.b2 { transform: translate3d(170px, 0, 0) rotate(8deg); }

.forge-stage.animate .forge-burn { animation: forge-merge 1s cubic-bezier(.5, 0, .7, .4) .25s forwards; }
.forge-stage.static .forge-burns,
.forge-stage.static .forge-core { display: none; }

@keyframes forge-merge {
  to { transform: translate3d(0, 120px, 0) scale(.2) rotate(0deg); opacity: 0; }
}

.forge-core {
  position: absolute;
  top: 120px;
  left: 50%;
  width: 260px;
  height: 260px;
  margin-left: -130px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0%, #ffe6ff 18%, #b18cffaa 40%, transparent 70%);
  opacity: 0;
  transform: scale(.2);
  pointer-events: none;
}

.forge-stage.animate .forge-core { animation: forge-core 1s ease-out 1.05s forwards; }

@keyframes forge-core {
  0% { opacity: 0; transform: scale(.2); }
  25% { opacity: 1; transform: scale(1.1); }
  100% { opacity: 0; transform: scale(2.2); }
}

.forge-result { width: 260px; }
.forge-stage.animate .forge-result { opacity: 0; transform: scale(.6); animation: forge-result .7s cubic-bezier(.2, 1.4, .4, 1) 1.25s forwards; }
.forge-stage.animate .forge-title,
.forge-stage.animate .forge-actions { opacity: 0; animation: forge-fade .4s ease-out 1.8s forwards; }

@keyframes forge-result { to { opacity: 1; transform: none; } }
@keyframes forge-fade { to { opacity: 1; } }

.forge-title { font-size: 18px; text-align: center; }
.forge-actions { justify-content: center; }
.forge-actions .button { min-height: 44px; }

/* Téléphone : étapes empilées, grilles de 3 colonnes, barre de forge fixée au-dessus de la navigation. */
@media (max-width: 760px) {
  .forge-rarities { gap: 6px; }
  .forge-rarity { grid-template-columns: 1fr; padding: 8px; min-height: 64px; text-align: center; justify-items: center; }
  .forge-rarity .rarity { grid-row: auto; }
  .forge-rarity b { font-size: 13px; }
  .forge-rarity small { font-size: 11px; }
  .forge-layout { grid-template-columns: 1fr; gap: 22px; }
  .forge-grid { --forge-w: 100px; max-height: none; min-height: 0; overflow: visible; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 8px; }
  .forge-bar {
    position: sticky;
    bottom: calc(var(--mobile-nav-h, 64px) + 10px + env(safe-area-inset-bottom, 0px));
    flex-wrap: wrap;
    gap: 10px;
    padding: 10px;
  }
  .forge-slots { flex-basis: 100%; gap: 5px; }
  .forge-slot { font-size: 11px; padding: 0 4px; }
  .forge-slot-btn { padding: 0 6px; }
  .forge-arrow { font-size: 16px; }
  .forge-go { flex: 1; justify-content: center; }
  .forge-burn { width: 96px; margin-left: -48px; }
  .forge-burn.b0 { transform: translate3d(-110px, 0, 0) rotate(-8deg); }
  .forge-burn.b2 { transform: translate3d(110px, 0, 0) rotate(8deg); }
  .forge-result { width: 220px; }
}

/* Bandeau « ALPHA » en diagonale dans le coin supérieur droit (décoratif, ne bloque aucun clic). */
body::after {
  content: 'ALPHA';
  position: fixed;
  top: 24px;
  right: -40px;
  z-index: 10000;
  width: 160px;
  padding: 5px 0;
  transform: rotate(45deg);
  background: linear-gradient(90deg, #ff5ea8, #ffb84d);
  color: #1a1020;
  font: 900 12px/1 Outfit, system-ui, sans-serif;
  letter-spacing: .28em;
  text-align: center;
  box-shadow: 0 3px 10px #0007;
  pointer-events: none;
}
@media (max-width: 760px) {
  body::after { top: 14px; right: -38px; width: 120px; padding: 3px 0; font-size: 9px; letter-spacing: .2em; }
}

/* ═════════════ Holo bien distinct des cartes normales (2026-11-10) ═════════════
   1. Paillettes réservées aux holo : les UR / L normales gardent leur reflet doré mais sans étincelles.
   2. Corps de carte holo irisé (argent nacré) au lieu de la couleur de rareté, + arc-en-ciel et étincelles nettes.
   3. Cadre arc-en-ciel qui tourne lentement autour de la carte (lisible même en petite vignette).
   4. Balayage lumineux régulier sur l'illustration, même sans souris. */
@property --holo-angle { syntax: '<angle>'; inherits: false; initial-value: 0deg; }

.game-card:not(.holo)[data-r="UR"] .info::before {
  background: repeating-linear-gradient(120deg,
    #ff7a7a 0%, #ffcf6b 6%, #a8ff78 12%, #6be4ff 18%, #a78bff 24%, #ff7ad9 30%, #ff7a7a 36%);
  background-size: 240% 240%;
  background-position: var(--mx) var(--my);
  animation: none;
  opacity: .35;
}
.game-card:not(.holo)[data-r="L"] .info::before {
  background: linear-gradient(125deg, #fff3b0 0%, #e8b93c 22%, #fff8d6 38%, #c8901e 55%, #ffe680 72%, #b5841f 100%);
  background-size: 260% 260%;
  background-position: var(--mx) var(--my);
  animation: none;
}

.game-card.holo { --rb: #efeaff; }
.game-card.holo .info,
.cards.dense .game-card.holo .info,
.market-card .game-card.holo .info {
  background: linear-gradient(160deg, #f4f1ff 0%, #dfe9ff 28%, #fbe3f6 55%, #e3fff3 80%, #f6f0ff 100%);
}
.game-card.holo .info::before {
  opacity: .55;
  mix-blend-mode: multiply;
  background:
    radial-gradient(circle at 18% 30%, #fff 0 1.3px, transparent 2.4px),
    radial-gradient(circle at 72% 22%, #fff 0 1.5px, transparent 2.6px),
    radial-gradient(circle at 46% 64%, #fff 0 1.2px, transparent 2.2px),
    radial-gradient(circle at 84% 72%, #fff 0 1.6px, transparent 2.8px),
    repeating-linear-gradient(115deg, #ffb3c7 0%, #ffe9a8 7%, #c2ffc9 14%, #b3ecff 21%, #d6c2ff 28%, #ffb3c7 35%);
  background-size: 52px 52px, 66px 66px, 46px 46px, 74px 74px, 260% 260%;
  background-position: 0 0, 0 0, 0 0, 0 0, var(--mx) var(--my);
  animation: card-sparkle 2.2s ease-in-out infinite;
}

.game-card.holo::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
  border-radius: inherit;
  padding: 4px;
  background: conic-gradient(from var(--holo-angle), #ff5e8a, #ffd25e, #7dff8a, #5ee0ff, #9b7dff, #ff5ed8, #ff5e8a);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation: holo-border-spin 4s linear infinite;
}
.game-card.holo { box-shadow: 0 0 18px -2px #b98cffcc, 0 0 30px -8px #5ee0ff99; }

.game-card.holo .card-art::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 38%, #ffffff8c 47%, #ffe8ff66 50%, transparent 60%);
  background-size: 280% 100%;
  mix-blend-mode: overlay;
  animation: card-sheen 3.6s ease-in-out infinite;
}
.game-card.holo .card-art { position: relative; }

@keyframes holo-border-spin { to { --holo-angle: 360deg; } }

/* Hors écran ou animations réduites : rien ne tourne (le cadre reste visible, figé). */
.game-card.holo:not(.holo-live)::after,
.game-card.holo:not(.holo-live) .card-art::before,
.game-card.holo:not(.holo-live) .info::before { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .game-card.holo::after, .game-card.holo .card-art::before, .game-card.holo .info::before { animation: none; }
}
body.no-anim .game-card.holo::after { animation: none; }

/* Le reflet périodique (balayage lumineux) est réservé aux cartes holo : les cartes normales restent calmes. */
.game-card:not(.holo) .info::after,
.game-card:not(.holo) .card-art::after {
  animation: none;
  opacity: 0;
}

/* Récapitulatif d'un paquet sur téléphone : 3 cartes par ligne, sans description, grille qui défile si besoin,
   et boutons toujours visibles en bas de l'écran. */
@media (max-width: 640px) {
  .reveal-stage.wide { display: flex; flex-direction: column; max-height: calc(100dvh - 24px); }
  .reveal-stage.wide .cards.dense.reveal {
    gap: 8px;
    max-height: calc(100dvh - 190px - env(safe-area-inset-bottom, 0px));
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-bottom: 4px;
  }
  .reveal-stage.wide .cards.dense.reveal .game-card {
    flex-basis: calc(33.333% - 6px);
    width: calc(33.333% - 6px);
    min-height: 0;
  }
  .reveal-stage.wide .cards.dense.reveal .game-card .info p { display: none; }
  .reveal-stage.wide .cards.dense.reveal .game-card .info { padding: 6px 7px 7px; }
  .reveal-stage.wide .cards.dense.reveal .game-card .info b { font-size: 11.5px; line-height: 1.2; }
  .reveal-stage.wide .cards.dense.reveal .game-card .info small { font-size: 10px; }
  .reveal-stage.wide > .row {
    margin-top: 12px !important;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    flex-wrap: nowrap;
    gap: 8px;
  }
  .reveal-stage.wide > .row .button { flex: 1 1 0; min-height: 44px; padding-inline: 10px; }
}
@media (max-width: 640px) {
  .reveal-stage.wide .cards.dense.reveal .report-art { display: none; }
  .reveal-stage.wide .cards.dense.reveal .new-tag {
    top: 6px; bottom: auto; right: 6px; left: auto; z-index: 5;
    padding: 1px 4px !important; font-size: 8px !important; letter-spacing: .02em !important; line-height: 1.4 !important;
  }
  .reveal-stage.wide .cards.dense.reveal .game-card .info b {
    overflow-wrap: normal; word-break: normal; hyphens: auto;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
}