/* Hanabi — feu d'artifice de nuit. Thème sombre assumé. */
:root {
  color-scheme: dark;
  --night: #110E22;
  --night-2: #1A1634;
  --night-3: #241F45;
  --night-4: #2E2858;
  --line: #342D5E;
  --line-soft: rgba(52, 45, 94, .55);
  --paper: #F4EFE4;
  --muted: #A39CC4;
  --dim: #6E6892;
  --accent: #FF5A3C;
  --accent-2: #FF8A4C;
  --accent-ink: #1B0A06;
  --ok: #57D6A0;
  --warn: #FFC247;
  --bad: #FF5A6E;
  --r-c: #9A96B4;
  --r-r: #4FB6E8;
  --r-e: #B27CFF;
  --r-m: #FF5FA2;
  --r-l: #FFC247;
  --display: "Dela Gothic One", "Zen Kaku Gothic New", system-ui, sans-serif;
  --body: "Zen Kaku Gothic New", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "DM Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --radius: 14px;
  --hdr-h: 64px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html, body { margin: 0; background: var(--night); color: var(--paper); }
body {
  font-family: var(--body);
  font-size: 15px;
  line-height: 1.5;
  min-height: 100vh;
  background:
    radial-gradient(1200px 520px at 85% -10%, rgba(255, 90, 60, .10), transparent 60%),
    radial-gradient(900px 520px at -10% 5%, rgba(178, 124, 255, .10), transparent 60%),
    var(--night);
  background-attachment: fixed;
}
img { max-width: 100%; }
[hidden] { display: none !important; }
a { color: var(--accent-2); }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; }
.num { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); }
.dim { color: var(--dim); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

#fx { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 80; }

.wrap { max-width: 1200px; margin: 0 auto; padding-inline: 16px; }
main.wrap { padding-block: 24px 96px; }

h1, h2 { font-family: var(--display); font-weight: 400; letter-spacing: .01em; text-wrap: balance; margin: 0; }
h1 { font-size: clamp(30px, 5vw, 52px); line-height: 1.08; }
h2 { font-size: 24px; line-height: 1.2; }
h3 { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin: 0 0 12px; font-weight: 700; }
.page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; margin-bottom: 20px; }
.page-head p { margin: 6px 0 0; color: var(--muted); max-width: 60ch; }

/* ---------- boot ---------- */
.boot { min-height: 100vh; display: grid; place-items: center; }
.boot .kanji { font-family: var(--display); font-size: 64px; color: var(--accent); animation: pulse 1.4s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .35; transform: scale(.96); } }

/* ---------- boutons & champs ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border-radius: 10px; padding: 10px 16px; font-weight: 700; font-size: 14px; line-height: 1.2;
  background: var(--night-3); border: 1px solid var(--line); color: var(--paper); text-decoration: none; white-space: nowrap;
  transition: border-color .15s, background .15s, transform .1s, filter .15s;
}
.btn:hover { border-color: var(--muted); }
.btn:active { transform: translateY(1px); }
.btn.primary { background: linear-gradient(180deg, var(--accent-2), var(--accent)); border-color: transparent; color: var(--accent-ink); box-shadow: 0 6px 22px rgba(255, 90, 60, .32); }
.btn.primary:hover { filter: brightness(1.07); }
.btn.ghost { background: transparent; }
.btn.block { width: 100%; }
.btn.lg { padding: 14px 22px; font-size: 16px; border-radius: 12px; }
.btn.sm { padding: 6px 10px; font-size: 13px; border-radius: 8px; }
.btn.danger { color: var(--bad); }
.btn.danger.armed { background: var(--bad); color: #22040A; border-color: transparent; }
.btn:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; filter: none; transform: none; }
.btn .spin { width: 14px; height: 14px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.field {
  background: var(--night-2); border: 1px solid var(--line); border-radius: 10px; padding: 9px 12px; min-width: 0;
  transition: border-color .15s;
}
.field:hover { border-color: var(--dim); }
.field:focus { border-color: var(--accent-2); outline: none; }
textarea.field { resize: vertical; min-height: 120px; font-family: var(--mono); font-size: 13px; }
label.lbl { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--muted); font-weight: 500; }
label.lbl .field { color: var(--paper); }
.hint { font-size: 12px; color: var(--dim); }
.check { display: flex; align-items: center; gap: 10px; font-size: 14px; cursor: pointer; }
.check input { width: 18px; height: 18px; accent-color: var(--accent); }

.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip { white-space: nowrap; border: 1px solid var(--line); background: var(--night-2); border-radius: 999px; padding: 6px 12px; font-size: 12px; font-weight: 700; color: var(--muted); display: inline-flex; gap: 6px; align-items: center; }
.chip:hover { color: var(--paper); }
.chip[aria-pressed="true"] { color: var(--night); background: var(--paper); border-color: var(--paper); }
.dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex: none; }

.panel { background: var(--night-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; }
.panel + .panel { margin-top: 16px; }

.tag { font-size: 11px; font-family: var(--mono); padding: 2px 8px; border-radius: 6px; background: var(--night-3); color: var(--muted); white-space: nowrap; }
.tag.ok { color: var(--ok); background: rgba(87, 214, 160, .1); }
.tag.bad { color: var(--bad); background: rgba(255, 90, 110, .1); }
.tag.admin { color: var(--accent-2); background: rgba(255, 138, 76, .12); }

/* ---------- en-tête ---------- */
.hdr {
  position: sticky; top: 0; z-index: 30;
  padding-top: env(safe-area-inset-top, 0px);
  background: rgb(17, 14, 34); /* opaque : un flou d'arrière-plan coûte cher au défilement */
  border-bottom: 1px solid var(--line);
}
.hdr-in { max-width: 1320px; margin: 0 auto; padding: 0 16px; height: var(--hdr-h); display: flex; align-items: center; gap: 20px; }
.brand { display: flex; align-items: baseline; gap: 10px; text-decoration: none; color: var(--paper); flex: none; }
.brand .kanji { font-family: var(--display); font-size: 26px; color: var(--accent); line-height: 1; }
.brand-name { font-family: var(--display); font-size: 17px; letter-spacing: .08em; text-transform: uppercase; }
.mainnav { display: flex; gap: 2px; }
.mainnav a { padding: 8px 12px; border-radius: 9px; text-decoration: none; color: var(--muted); font-weight: 700; font-size: 14px; }
.mainnav a:hover { color: var(--paper); }
.mainnav a[aria-current="page"] { color: var(--paper); background: var(--night-3); }
.mainnav a.admin-link { color: var(--accent-2); }
.hdr-right { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.pill { display: flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; background: var(--night-2); border: 1px solid var(--line); font-size: 13px; white-space: nowrap; }
.pill b { font-family: var(--mono); font-weight: 500; font-size: 14px; }
.pill .sub { color: var(--muted); font-family: var(--mono); font-size: 12px; }
.gem { color: var(--r-e); }
.pill-daily { border-color: rgba(255, 194, 71, .5); color: #FFE3A6; background: rgba(255, 194, 71, .1); font-weight: 700; }
.pill-daily::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--warn); box-shadow: 0 0 8px var(--warn); animation: pulse 1.6s infinite; }
.avatar { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-family: var(--display); font-size: 15px; color: #fff; flex: none; }
.avatar.lg { width: 72px; height: 72px; font-size: 30px; }
.avatar-btn { border: 0; padding: 0; background: none; border-radius: 50%; }
.menu-wrap { position: relative; }
.menu { position: absolute; right: 0; top: calc(100% + 8px); min-width: 220px; background: var(--night-2); border: 1px solid var(--line); border-radius: 12px; padding: 6px; box-shadow: 0 16px 40px rgba(0, 0, 0, .5); z-index: 40; }
.menu .who { padding: 8px 10px 10px; border-bottom: 1px solid var(--line); margin-bottom: 6px; }
.menu .who b { display: block; }
.menu button, .menu a { display: block; width: 100%; text-align: left; background: none; border: 0; padding: 9px 10px; border-radius: 8px; color: var(--paper); text-decoration: none; font-size: 14px; }
.menu button:hover, .menu a:hover { background: var(--night-3); }

.bottomnav { display: none; }
@media (max-width: 1080px) {
  .mainnav { display: none; }
  .pill .sub, .pill .lbl-full { display: none; }
  .hdr-in { gap: 10px; }
  .brand-name { display: none; }
  .bottomnav {
    display: grid; grid-template-columns: repeat(var(--n, 4), 1fr);
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
    padding: 6px 8px calc(6px + env(safe-area-inset-bottom, 0px));
    background: rgb(17, 14, 34); border-top: 1px solid var(--line);
  }
  .bottomnav a { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 2px; border-radius: 10px; text-decoration: none; color: var(--muted); font-size: 11px; font-weight: 700; }
  .bottomnav a svg { width: 22px; height: 22px; }
  .bottomnav a[aria-current="page"] { color: var(--paper); background: var(--night-3); }
}
@media (max-width: 420px) { .pill { padding: 5px 9px; } }

.banners { max-width: 1200px; margin: 0 auto; padding: 16px 16px 0; display: grid; gap: 8px; }
.banners:empty { display: none; }
.banner { padding: 10px 14px; border-radius: 10px; border: 1px solid rgba(255, 194, 71, .35); background: rgba(255, 194, 71, .08); color: #FFE3A6; font-size: 14px; }
.banner.feat { border-color: rgba(255, 95, 162, .35); background: rgba(255, 95, 162, .08); color: #FFC4DD; }
.banner-btn { width: 100%; text-align: left; font: inherit; cursor: pointer; }
.banner.bad { border-color: rgba(255, 90, 110, .4); background: rgba(255, 90, 110, .08); color: #FFC0C8; }

/* ---------- cartes ---------- */
.card {
  --rc: var(--r-c);
  position: relative; width: 100%; aspect-ratio: 5 / 7; border-radius: 12px; overflow: hidden; background: #0C0A18;
  border: 2px solid var(--rc); box-shadow: 0 4px 12px rgba(0, 0, 0, .4);
  display: flex; flex-direction: column; text-align: left; container-type: inline-size; isolation: isolate;
}
.card.r-r { --rc: var(--r-r); } .card.r-e { --rc: var(--r-e); } .card.r-m { --rc: var(--r-m); } .card.r-l { --rc: var(--r-l); }
.card .art { position: relative; flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; background-color: #221C44; overflow: hidden; }
.card .art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.card .ini { font-family: var(--display); font-size: 30cqw; color: rgba(255, 255, 255, .55); letter-spacing: .02em; text-shadow: 0 3px 0 rgba(0, 0, 0, .25); line-height: 1; }
.card .stars { position: absolute; top: 6px; left: 8px; font-size: max(9px, 7cqw); color: var(--rc); letter-spacing: 1px; text-shadow: 0 1px 2px rgba(0, 0, 0, .8); z-index: 2; }
.card .tier { position: absolute; top: 6px; right: 6px; font-family: var(--mono); font-size: max(8px, 6cqw); letter-spacing: .1em; text-transform: uppercase; padding: 2px 6px; border-radius: 4px; background: rgba(12, 10, 24, .78); color: var(--rc); z-index: 2; }
.card .meta { padding: 6% 7% 7%; background: linear-gradient(180deg, #17132E, #0E0B1D); border-top: 1px solid color-mix(in srgb, var(--rc) 40%, transparent); display: flex; flex-direction: column; gap: 1px; }
.card .nm { font-weight: 700; font-size: max(11px, 9.5cqw); line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card .sr { font-size: max(10px, 7.8cqw); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card .val { font-family: var(--mono); font-size: max(10px, 7.8cqw); color: var(--rc); }
.card .qty { position: absolute; right: 6px; bottom: calc(100% - 100% + 34%); z-index: 2; font-family: var(--mono); font-size: 11px; background: rgba(12, 10, 24, .85); padding: 1px 7px; border-radius: 5px; }
.card .wish { position: absolute; left: 6px; bottom: 34%; z-index: 2; color: #FF7FB0; font-size: 14px; text-shadow: 0 1px 3px rgba(0, 0, 0, .8); }
/* petites cartes (téléphone, vignettes) : on garde les étoiles, l'étiquette de rareté ferait doublon */
@container (max-width: 135px) { .card .tier { display: none; } }
.card.holo::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -100%; width: 300%; pointer-events: none; z-index: 1; mix-blend-mode: color-dodge; opacity: .42;
  background: linear-gradient(115deg, transparent 38%, rgba(255, 120, 200, .55) 45%, rgba(120, 220, 255, .55) 50%, rgba(255, 240, 140, .55) 55%, transparent 62%);
  animation: holo 4.5s linear infinite; will-change: transform;
}
@keyframes holo { from { transform: translateX(-34%); } to { transform: translateX(34%); } }
.card.missing { border-color: var(--line); }
.card.missing .art { filter: grayscale(1) brightness(.3); }
.card.missing .meta, .card.missing .stars, .card.missing .tier { opacity: .5; }
.card.missing .ini { opacity: .35; }
.card.inactive::before { content: "Retiré"; position: absolute; left: 50%; top: 40%; transform: translate(-50%, -50%) rotate(-12deg); z-index: 3; font-family: var(--mono); font-size: 11px; letter-spacing: .15em; text-transform: uppercase; border: 1px solid var(--muted); color: var(--muted); padding: 2px 8px; border-radius: 4px; background: rgba(12, 10, 24, .7); }

.cardback {
  width: 100%; height: 100%; border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 4px;
  background: repeating-conic-gradient(from 0deg at 50% 50%, rgba(255, 255, 255, .06) 0 8deg, transparent 8deg 16deg), linear-gradient(160deg, #2A2356, #171233);
  border: 2px solid #4A4180; color: var(--accent-2);
}
.cardback .k { font-family: var(--display); font-size: 34px; }
.cardback .t { font-family: var(--mono); font-size: 10px; color: var(--muted); letter-spacing: .2em; }

.grid-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(142px, 1fr)); gap: 16px; }
.grid-cards .card { cursor: pointer; transition: transform .15s, box-shadow .15s; }
@media (hover: hover) { .grid-cards .card:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(0, 0, 0, .55); } }
@media (max-width: 520px) { .grid-cards { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 10px; } }

/* ---------- écran de connexion ---------- */
.auth { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); }
.auth-hero { position: relative; padding: 48px clamp(20px, 5vw, 72px); display: flex; flex-direction: column; justify-content: center; gap: 22px; overflow: hidden; }
.auth-hero .brand .kanji { font-size: 40px; }
.auth-hero .brand-name { font-size: 22px; display: inline; }
.auth-hero .lead { font-size: 17px; color: var(--muted); max-width: 46ch; margin: 0; }
.auth-facts { display: flex; gap: 28px; flex-wrap: wrap; list-style: none; padding: 0; margin: 0; }
.auth-facts li { display: flex; flex-direction: column; font-size: 13px; color: var(--muted); }
.auth-facts b { font-family: var(--mono); font-weight: 500; font-size: 26px; color: var(--paper); }
.fan { position: relative; height: 250px; margin-top: 8px; }
.fan .card { position: absolute; width: 150px; left: 0; top: 10px; transition: transform .4s cubic-bezier(.2, .8, .2, 1); }
.fan .card:nth-child(1) { transform: rotate(-10deg) translateX(0); }
.fan .card:nth-child(2) { transform: rotate(0deg) translateX(110px) translateY(-14px); z-index: 2; }
.fan .card:nth-child(3) { transform: rotate(10deg) translateX(220px); }
.fan:hover .card:nth-child(1) { transform: rotate(-14deg) translateX(-12px); }
.fan:hover .card:nth-child(3) { transform: rotate(14deg) translateX(236px); }
.auth-panel { display: flex; align-items: center; justify-content: center; padding: 32px 16px; background: linear-gradient(180deg, rgba(26, 22, 52, .6), rgba(17, 14, 34, .9)); border-left: 1px solid var(--line); }
.auth-card { width: 100%; max-width: 380px; display: flex; flex-direction: column; gap: 18px; }
.seg { display: grid; grid-template-columns: 1fr 1fr; background: var(--night-2); border: 1px solid var(--line); border-radius: 12px; padding: 4px; }
.seg button { border: 0; background: none; padding: 9px; border-radius: 9px; font-weight: 700; color: var(--muted); }
.seg button[aria-selected="true"] { background: var(--night-4); color: var(--paper); }
.auth-card form { display: flex; flex-direction: column; gap: 14px; }
.form-error { margin: 0; padding: 10px 12px; border-radius: 10px; background: rgba(255, 90, 110, .1); border: 1px solid rgba(255, 90, 110, .35); color: #FFC0C8; font-size: 14px; }
.fineprint { font-size: 12px; color: var(--dim); margin: 0; }
@media (max-width: 860px) {
  .auth { grid-template-columns: 1fr; }
  .auth-hero { padding-top: 40px; padding-bottom: 8px; }
  .fan { display: none; }
  .auth-panel { border-left: 0; background: none; align-items: flex-start; padding-top: 8px; }
}

/* ---------- tirages ---------- */
.pulls { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 20px; align-items: start; }
@media (max-width: 960px) { .pulls { grid-template-columns: 1fr; } }
.stage {
  position: relative; border-radius: 20px; border: 1px solid var(--line); padding: 24px 16px 28px; min-height: 520px; overflow: hidden;
  background: radial-gradient(700px 320px at 50% 105%, rgba(255, 90, 60, .18), transparent 70%), linear-gradient(180deg, #15112B, #0D0A1C);
}
.stage::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image: radial-gradient(1px 1px at 12% 18%, #fff8, transparent), radial-gradient(1px 1px at 72% 12%, #fff6, transparent), radial-gradient(1.5px 1.5px at 42% 30%, #fff5, transparent), radial-gradient(1px 1px at 88% 40%, #fff7, transparent), radial-gradient(1px 1px at 25% 55%, #fff4, transparent), radial-gradient(1px 1px at 60% 62%, #fff5, transparent); }
.stage-head { position: relative; display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; justify-content: space-between; margin-bottom: 8px; padding-inline: 8px; }
.stage-head p { margin: 4px 0 0; color: var(--muted); max-width: 52ch; }
.packzone { position: relative; display: flex; flex-direction: column; align-items: center; gap: 20px; padding-block: 18px 8px; }
.pack-stack { position: relative; width: 200px; aspect-ratio: 5 / 7; }
.pack-stack .ghost { position: absolute; inset: 0; border-radius: 14px; background: linear-gradient(160deg, #C9432F, #6E1626); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .1); }
.pack-stack .ghost:nth-child(1) { transform: rotate(-7deg) translate(-10px, 6px); opacity: .55; }
.pack-stack .ghost:nth-child(2) { transform: rotate(5deg) translate(10px, 4px); opacity: .7; }
.pack {
  position: absolute; inset: 0; border-radius: 14px; cursor: pointer; border: 0; padding: 0; color: #FFF3E6;
  background:
    repeating-radial-gradient(circle at 50% 36%, rgba(255, 255, 255, .10) 0 2px, transparent 2px 16px),
    linear-gradient(160deg, #FF7A45, #E23B2E 55%, #8E1C2E);
  box-shadow: 0 22px 60px rgba(226, 59, 46, .38), inset 0 0 0 2px rgba(255, 255, 255, .2);
  transition: transform .25s ease, filter .2s;
}
@media (hover: hover) { .pack:hover:not(:disabled) { transform: translateY(-8px) rotate(-1.5deg); } }
.pack:disabled { cursor: not-allowed; filter: grayscale(.75) brightness(.55); }
.pack .pk { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; }
.pack .k { font-family: var(--display); font-size: 58px; line-height: 1; text-shadow: 0 4px 0 rgba(0, 0, 0, .2); }
.pack .t { font-family: var(--display); font-size: 13px; letter-spacing: .32em; }
.pack .c { font-family: var(--mono); font-size: 12px; opacity: .85; }
.pack .tear { position: absolute; left: 0; right: 0; top: 16px; border-top: 2px dashed rgba(255, 255, 255, .35); }
.pack .count { position: absolute; top: -10px; right: -10px; min-width: 32px; height: 32px; border-radius: 16px; background: var(--paper); color: var(--night); display: grid; place-items: center; font-family: var(--mono); font-weight: 500; font-size: 15px; padding: 0 8px; box-shadow: 0 4px 12px rgba(0, 0, 0, .4); }
.pack.shake { animation: shake .3s ease; }
@keyframes shake { 0%, 100% { transform: none; } 20% { transform: rotate(-4deg); } 40% { transform: rotate(4deg); } 60% { transform: rotate(-3deg) scale(1.04); } 80% { transform: rotate(2deg) scale(1.07); } }
.pack-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.pack-timer { font-size: 13px; margin: 0; }
.pack-note { text-align: center; max-width: 42ch; margin: 0; }

.reveal { position: relative; display: flex; flex-wrap: wrap; justify-content: center; gap: 16px 14px; padding-block: 16px 4px; }
.slot { width: clamp(118px, calc((100% - 56px) / 5), 160px); perspective: 1000px; position: relative; animation: deal .5s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--i) * 90ms); }
@keyframes deal { from { opacity: 0; transform: translateY(60px) scale(.85) rotate(-4deg); } }
.flip { position: relative; width: 100%; aspect-ratio: 5 / 7; transform-style: preserve-3d; transition: transform .65s cubic-bezier(.3, 1.35, .5, 1); cursor: pointer; }
@media (hover: hover) { .flip:hover:not(.open) { transform: translateY(-6px); } }
.flip.open { transform: rotateY(180deg); cursor: pointer; }
.flip > .face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.pcard { position: relative; cursor: pointer; border-radius: 12px; transition: transform .15s; }
@media (hover: hover) { .pcard:hover { transform: translateY(-6px); } }
.slot.r-l .pcard .card { box-shadow: 0 0 26px rgba(255, 194, 71, .55); }
.slot.r-m .pcard .card { box-shadow: 0 0 20px rgba(255, 95, 162, .45); }
.slot.r-e .pcard .card { box-shadow: 0 0 14px rgba(178, 124, 255, .35); }
.reveal-sum { font-variant-numeric: tabular-nums; }
.flip > .front { transform: rotateY(180deg); }
.slot.hint-l .cardback { box-shadow: 0 0 30px rgba(255, 194, 71, .6); border-color: var(--r-l); animation: glow 1.2s ease-in-out infinite alternate; }
.slot.hint-m .cardback { box-shadow: 0 0 22px rgba(255, 95, 162, .5); border-color: var(--r-m); }
@keyframes glow { to { box-shadow: 0 0 44px rgba(255, 194, 71, .85); } }
.slot .gain { text-align: center; font-size: 12px; font-family: var(--mono); color: var(--muted); margin-top: 8px; min-height: 18px; }
.slot .gain.new { color: var(--ok); }
.slot .gain.wish { color: #FF9CC4; }
.burst { position: absolute; left: 50%; top: 45%; width: 0; height: 0; pointer-events: none; z-index: 5; }
.burst i { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: var(--c); box-shadow: 0 0 10px var(--c); animation: spark .9s ease-out forwards; transform: rotate(var(--a)) translateY(0); }
@keyframes spark { to { transform: rotate(var(--a)) translateY(-130px); opacity: 0; } }
.revealbar { position: relative; display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.summary { position: relative; text-align: center; margin: 12px 0 0; color: var(--muted); font-size: 14px; }
@media (max-width: 560px) { .slot { width: calc(50% - 8px); } .slot:last-child:nth-child(odd) { width: calc(50% - 8px); } }

aside.side { display: flex; flex-direction: column; gap: 16px; }
.rates { display: grid; grid-template-columns: auto 1fr auto; gap: 8px 10px; align-items: center; font-size: 13px; }
.bar { height: 6px; border-radius: 3px; background: var(--night-3); overflow: hidden; }
.bar > i { display: block; height: 100%; border-radius: 3px; }
.meter { display: flex; flex-direction: column; gap: 6px; margin-top: 14px; font-size: 13px; }
.meter .bar { height: 8px; }
.meter .bar > i { background: linear-gradient(90deg, var(--r-m), var(--r-l)); }
.daily { display: flex; flex-direction: column; gap: 10px; }
.daily .streak { display: flex; gap: 5px; }
.daily .streak i { flex: 1; height: 6px; border-radius: 3px; background: var(--night-3); }
.daily .streak i.on { background: var(--warn); box-shadow: 0 0 8px rgba(255, 194, 71, .5); }
.feed { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; max-height: 420px; overflow: auto; }
.feed li { display: flex; gap: 10px; align-items: center; font-size: 13px; }
.feed .sw { width: 30px; height: 42px; border-radius: 5px; flex: none; border: 1.5px solid var(--rc, var(--r-c)); overflow: hidden; background-size: cover; background-position: center; }
.feed .who a { color: var(--muted); text-decoration: none; font-size: 12px; }
.feed .who a:hover { color: var(--paper); }
.feed .t { margin-left: auto; color: var(--dim); font-family: var(--mono); font-size: 11px; white-space: nowrap; }

/* ---------- collection ---------- */
.toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 18px; }
.toolbar .field { height: 38px; padding-block: 0; }
.toolbar input.field { width: 240px; max-width: 100%; }
.progress-row { display: flex; flex-wrap: wrap; gap: 14px 22px; align-items: center; margin-bottom: 18px; }
.pbar { flex: 1; min-width: 180px; height: 10px; border-radius: 5px; background: var(--night-3); overflow: hidden; }
.pbar > i { display: block; height: 100%; border-radius: 5px; background: linear-gradient(90deg, var(--accent), var(--r-l)); }
.more-row { display: flex; gap: 14px; align-items: center; justify-content: center; margin: 22px 0 8px; min-height: 1px; }
.empty { padding: 48px 16px; text-align: center; color: var(--muted); }
.empty b { display: block; color: var(--paper); font-size: 17px; margin-bottom: 4px; }

.albums { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.album { background: var(--night-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; display: flex; flex-direction: column; gap: 10px; cursor: pointer; text-align: left; transition: border-color .15s, transform .15s; }
@media (hover: hover) { .album:hover { border-color: var(--muted); transform: translateY(-2px); } }
.album.done { border-color: rgba(255, 194, 71, .55); background: linear-gradient(160deg, rgba(255, 194, 71, .08), var(--night-2) 60%); }
.album .top { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.album .name { font-weight: 700; font-size: 15px; }
.pips { display: flex; flex-wrap: wrap; gap: 4px; }
.pips i { width: 12px; height: 16px; border-radius: 3px; border: 1.5px solid var(--c); }
.pips i.on { background: var(--c); }

/* ---------- upgrader ---------- */
.upg { display: grid; grid-template-columns: minmax(0, 1fr) 280px minmax(0, 1fr); gap: 16px; margin-bottom: 20px; }
.upg-mid { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; }
.upg-side { display: flex; flex-direction: column; min-height: 300px; }
.upg-box { flex: 1; display: flex; flex-direction: column; }
.upg-empty { flex: 1; display: grid; place-items: center; text-align: center; color: var(--dim); font-size: 13px; border: 2px dashed var(--line); border-radius: 12px; padding: 16px; }
.upg-mini { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 8px; }
.upg-mini .card { cursor: pointer; }
.upg-target { width: 100%; max-width: 160px; margin: 0 auto; }
.upg-warn { font-size: 12px; color: var(--warn); margin: 10px 0 0; }
.upg-note { text-align: center; max-width: 30ch; margin: 0; min-height: 36px; }
.dial { position: relative; width: 240px; aspect-ratio: 1; }
.dial svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.dial .track { fill: none; stroke: var(--night-3); stroke-width: 14; }
.dial .win { fill: none; stroke: var(--ok); stroke-width: 14; transition: stroke-dasharray .35s ease; filter: drop-shadow(0 0 6px rgba(87, 214, 160, .45)); }
.dial .needle { position: absolute; left: calc(50% - 2px); top: 2%; width: 4px; height: 48%; border-radius: 2px; background: var(--paper); transform-origin: 50% 100%; box-shadow: 0 0 10px rgba(244, 239, 228, .6); }
.dial-c { position: absolute; inset: 21%; border-radius: 50%; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; background: radial-gradient(circle, var(--night-2), var(--night)); border: 1px solid var(--line); transition: border-color .3s, box-shadow .3s; }
.dial-c b { font-size: 28px; line-height: 1.1; }
.dial-c span { font-size: 12px; color: var(--muted); }
.dial.won .dial-c { border-color: var(--ok); box-shadow: 0 0 34px rgba(87, 214, 160, .35); }
.dial.won .dial-c b { color: var(--ok); }
.dial.lost .dial-c { border-color: var(--bad); box-shadow: 0 0 34px rgba(255, 90, 110, .3); }
.dial.lost .dial-c b { color: var(--bad); }
.upg-tabs { max-width: 360px; margin-bottom: 14px; }
.upg-grid { padding-top: 10px; }
.upg-pick { position: relative; }
.upg-pick.used .card { filter: grayscale(.8) brightness(.5); cursor: not-allowed; }
.upg-pick.sel .card { outline: 3px solid var(--ok); outline-offset: 3px; }
.upg-badge { position: absolute; left: 50%; top: -9px; transform: translateX(-50%); z-index: 4; font-family: var(--mono); font-size: 11px; padding: 2px 8px; border-radius: 999px; background: var(--paper); color: var(--night); white-space: nowrap; box-shadow: 0 4px 10px rgba(0, 0, 0, .4); pointer-events: none; }
.upg-badge.ch { background: var(--night-3); color: var(--ok); border: 1px solid var(--line); }
.upg-badge.over { background: var(--night-3); color: var(--bad); border: 1px solid rgba(255, 90, 110, .4); }
.upg-fill { width: 100%; max-width: 280px; display: flex; flex-direction: column; gap: 6px; align-items: center; text-align: center; }
.upg-fill .bar { width: 100%; height: 8px; }
.upg-fill .bar > i { background: linear-gradient(90deg, var(--ok), var(--r-l)); transition: width .25s ease; }
.upg-sort { display: flex; gap: 6px; align-items: center; }
.upg-sort .field { height: 38px; padding-block: 0; }
.upg-sort .btn { height: 38px; width: 42px; padding: 0; font-size: 18px; }
.upg-stake-tools { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.upg-stake-tools:empty { display: none; }
@media (max-width: 860px) {
  .upg { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .upg-mid { grid-column: 1 / -1; order: -1; }
  .upg-side { min-height: 220px; }
}
@media (max-width: 420px) { .dial { width: 200px; } }

/* ---------- classement ---------- */
.podium { display: grid; grid-template-columns: 1fr 1.15fr 1fr; gap: 14px; align-items: end; margin-bottom: 20px; }
.podium .spot { background: var(--night-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 14px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 8px; text-decoration: none; color: var(--paper); }
.podium .spot.p1 { padding-block: 28px; border-color: rgba(255, 194, 71, .55); background: linear-gradient(180deg, rgba(255, 194, 71, .12), var(--night-2)); }
.podium .spot.p2 { border-color: rgba(217, 214, 234, .35); }
.podium .spot.p3 { border-color: rgba(224, 149, 91, .4); }
.podium .place { font-family: var(--display); font-size: 30px; line-height: 1; }
.podium .p1 .place { color: var(--r-l); } .podium .p2 .place { color: #D9D6EA; } .podium .p3 .place { color: #E0955B; }
.podium .mini { width: 70px; }
@media (max-width: 640px) {
  .podium { gap: 8px; }
  .podium .spot { padding: 12px 6px; gap: 6px; min-width: 0; }
  .podium .spot.p1 { padding-block: 18px; }
  .podium .place { font-size: 24px; }
  .podium .spot b { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
}
.table-wrap { overflow-x: auto; }
table.tbl { width: 100%; border-collapse: collapse; font-size: 14px; }
.tbl th { text-align: left; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 700; padding: 10px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.tbl td { padding: 10px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
.tbl tr.me td { background: rgba(255, 90, 60, .07); }
.tbl tr:hover td { background: rgba(255, 255, 255, .02); }
.tbl .pos { font-family: var(--display); font-size: 17px; width: 44px; }
.tbl.compact td { padding: 6px 8px; }
.tbl.compact .field { padding: 5px 8px; width: 100%; border-radius: 8px; }
.person { display: flex; gap: 10px; align-items: center; text-decoration: none; color: var(--paper); }
.person .avatar { width: 30px; height: 30px; font-size: 13px; }
a.person:hover b { text-decoration: underline; }

/* ---------- profil ---------- */
.profile-head { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; margin-bottom: 20px; }
.profile-head .meta { display: flex; flex-direction: column; gap: 4px; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 20px; }
.stat { background: var(--night-2); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; }
.stat .v { font-family: var(--mono); font-size: 26px; line-height: 1.2; }
.stat .l { font-size: 12px; color: var(--muted); }
.stat .d { font-size: 12px; color: var(--dim); }
.two-col { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 16px; align-items: start; }
@media (max-width: 860px) { .two-col { grid-template-columns: 1fr; } }
.showcase { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; max-width: 520px; }
.showcase .slot-empty { aspect-ratio: 5 / 7; border: 2px dashed var(--line); border-radius: 12px; display: grid; place-items: center; color: var(--dim); font-size: 12px; text-align: center; padding: 8px; }
.rar-rows { display: flex; flex-direction: column; gap: 10px; }
.rar-row { display: grid; grid-template-columns: 110px 1fr 70px; gap: 10px; align-items: center; font-size: 13px; }
.rar-row .bar { height: 8px; }

/* ---------- admin ---------- */
.subnav { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 20px; }
.ani-panel { border-color: rgba(255, 138, 76, .35); background: linear-gradient(135deg, rgba(255, 106, 61, .07), transparent 55%), var(--night-2, transparent); }
.ani-msg { margin: 0; font-size: 14px; padding: 10px 14px; border-radius: 10px; }
.ani-msg.ok { color: var(--ok); background: rgba(87, 214, 160, .08); }
.ani-msg.bad { color: var(--bad); background: rgba(255, 90, 110, .08); }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px 18px; }
.form-grid .full { grid-column: 1 / -1; }
.section-title { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 14px; }
.section-title h3 { margin: 0; }
.rate-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 700px) { .rate-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.rate-grid .pct { font-family: var(--mono); font-size: 12px; color: var(--dim); }
.savebar { position: sticky; bottom: 16px; z-index: 5; display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; padding: 12px 16px; border-radius: 12px; background: rgba(36, 31, 69, .95); border: 1px solid var(--line); box-shadow: 0 12px 30px rgba(0, 0, 0, .45); margin-top: 16px; }
@media (max-width: 1080px) { .savebar { bottom: calc(76px + env(safe-area-inset-bottom, 0px)); } }
.chart svg { width: 100%; height: auto; display: block; }
.chart text { fill: var(--muted); font-family: var(--mono); font-size: 10px; }
.thumb { width: 36px; height: 50px; border-radius: 6px; overflow: hidden; border: 1.5px solid var(--rc, var(--r-c)); background-size: cover; background-position: center; flex: none; }
.row-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.log-list { list-style: none; margin: 0; padding: 0; }
.log-list li { display: grid; grid-template-columns: 140px 120px 1fr; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line-soft); font-size: 13px; }
@media (max-width: 640px) { .log-list li { grid-template-columns: 1fr; gap: 2px; } }
.kpi-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-bottom: 16px; }
.obs { display: grid; grid-template-columns: auto 1fr 60px 60px; gap: 8px 12px; align-items: center; font-size: 13px; }
.obs .h { font-size: 11px; color: var(--dim); text-transform: uppercase; letter-spacing: .08em; }
.copybox { display: flex; gap: 8px; align-items: center; background: var(--night); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; font-family: var(--mono); font-size: 16px; user-select: all; }

/* ---------- modales & toasts ---------- */
.modal-bg { position: fixed; inset: 0; z-index: 60; background: rgba(6, 5, 14, .86); display: flex; align-items: center; justify-content: center; padding: 16px; animation: fade .15s ease; }
@keyframes fade { from { opacity: 0; } }
.modal { background: var(--night-2); border: 1px solid var(--line); border-radius: 18px; padding: 22px; width: 100%; max-width: 560px; max-height: calc(100vh - 32px); overflow: auto; box-shadow: 0 30px 80px rgba(0, 0, 0, .6); animation: pop .2s cubic-bezier(.2, .9, .3, 1.2); position: relative; }
.modal.wide { max-width: 720px; }
@keyframes pop { from { transform: scale(.95); opacity: 0; } }
.modal .x { position: absolute; top: 12px; right: 12px; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line); background: var(--night-3); display: grid; place-items: center; font-size: 18px; line-height: 1; }
.modal h2 { margin-bottom: 4px; padding-right: 40px; }
.card-detail { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 22px; }
@media (max-width: 560px) { .card-detail { grid-template-columns: 1fr; } .card-detail > :first-child { max-width: 220px; margin: 0 auto; width: 100%; } }
dl.facts { display: grid; grid-template-columns: auto 1fr; gap: 7px 16px; margin: 14px 0 18px; font-size: 14px; }
dl.facts dt { color: var(--muted); }
dl.facts dd { margin: 0; }
.modal-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.help h4 { margin: 18px 0 6px; font-size: 15px; }
.help p, .help li { color: var(--muted); font-size: 14px; }
.help ul { padding-left: 18px; margin: 0; }

.toasts { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 90; display: flex; flex-direction: column; gap: 8px; align-items: center; width: max-content; max-width: calc(100vw - 32px); pointer-events: none; }
@media (max-width: 1080px) { .toasts { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); } }
.toast { background: var(--paper); color: var(--night); padding: 11px 16px; border-radius: 11px; font-weight: 700; font-size: 14px; box-shadow: 0 12px 30px rgba(0, 0, 0, .45); animation: toastIn .25s cubic-bezier(.2, .9, .3, 1.2); pointer-events: auto; }
.toast.err { background: var(--bad); color: #fff; }
.toast.gold { background: var(--r-l); color: #2A1A00; }
@keyframes toastIn { from { transform: translateY(12px); opacity: 0; } }

.skeleton { background: linear-gradient(90deg, var(--night-2), var(--night-3), var(--night-2)); background-size: 200% 100%; animation: shimmer 1.2s linear infinite; border-radius: 12px; }
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

/* boutons-vignettes */
button.sw, button.thumb { padding: 0; cursor: pointer; background-color: var(--night-3); }
button.thumb:hover { outline: 2px solid var(--accent-2); outline-offset: 1px; }
details summary { list-style-position: outside; }
code { font-family: var(--mono); font-size: 12px; background: var(--night-3); padding: 1px 5px; border-radius: 4px; color: var(--paper); }

/* =====================================================================
   Téléphones et tablettes
   ===================================================================== */
html { -webkit-tap-highlight-color: transparent; }
button, a, .flip, .card[role="button"], .chip, summary { touch-action: manipulation; }
html.modal-open, html.modal-open body { overflow: hidden; }
.ftoggle { display: none; }
.fcount { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--accent); color: var(--accent-ink); font-family: var(--mono); font-size: 12px; display: inline-grid; place-items: center; }
.xfilters { display: contents; }

/* Écrans tactiles : cibles d'au moins 40 px, pas de zoom automatique sur les champs (iOS zoome sous 16 px) */
@media (pointer: coarse) {
  .field, select.field, textarea.field { font-size: 16px; }
  .chip { min-height: 38px; padding-inline: 14px; }
  .btn { min-height: 44px; }
  .btn.sm { min-height: 36px; }
  .menu button, .menu a { padding: 12px 12px; font-size: 15px; }
  .check input { width: 22px; height: 22px; }
}

/* Barre de navigation du bas : téléphones et tablettes (l'en-tête n'a plus la place pour 8 onglets) */
@media (max-width: 1080px) {
  main.wrap { padding-block: 16px calc(92px + env(safe-area-inset-bottom, 0px)); }
  .bottomnav { padding: 4px 4px calc(4px + env(safe-area-inset-bottom, 0px)); box-shadow: 0 -10px 30px rgba(0, 0, 0, .35); }
  .bottomnav a { position: relative; min-height: 52px; justify-content: center; font-size: 10.5px; letter-spacing: -.01em; gap: 3px; white-space: nowrap; }
  .bottomnav a[aria-current="page"] { background: none; color: var(--accent-2); }
  .bottomnav a[aria-current="page"]::before { content: ""; position: absolute; top: 0; left: 30%; right: 30%; height: 3px; border-radius: 0 0 3px 3px; background: var(--accent); box-shadow: 0 0 10px rgba(255, 90, 60, .6); }
  .bottomnav a:active { background: var(--night-3); }
}
@media (max-width: 820px) {
  :root { --hdr-h: 56px; }
  .hdr-in { padding-inline: max(12px, env(safe-area-inset-left, 0px)); }
  .hdr-right { gap: 6px; }
  .pill { padding: 6px 10px; min-height: 34px; }
  .page-head { margin-bottom: 14px; }
  .page-head p { font-size: 14px; }
  .banners { padding: 10px 12px 0; }
  .banner { font-size: 13px; padding: 8px 12px; }

  /* barre de navigation du bas : plus haute, icône active mise en valeur */
  .bottomnav { padding: 4px 4px calc(4px + env(safe-area-inset-bottom, 0px)); box-shadow: 0 -10px 30px rgba(0, 0, 0, .35); }
  .bottomnav a { position: relative; min-height: 52px; justify-content: center; font-size: 10.5px; letter-spacing: -.01em; gap: 3px; white-space: nowrap; }
  .bottomnav a[aria-current="page"] { background: none; color: var(--accent-2); }
  .bottomnav a[aria-current="page"]::before { content: ""; position: absolute; top: 0; left: 30%; right: 30%; height: 3px; border-radius: 0 0 3px 3px; background: var(--accent); box-shadow: 0 0 10px rgba(255, 90, 60, .6); }
  .bottomnav a:active { background: var(--night-3); }

  /* menu du compte : panneau large ancré en haut à droite */
  .menu { position: fixed; top: calc(var(--hdr-h) + env(safe-area-inset-top, 0px) + 6px); right: 8px; left: auto; min-width: 240px; }

  /* collection : recherche + bouton Filtres, le reste se déplie */
  .toolbar { gap: 8px; margin-bottom: 14px; }
  .toolbar input.field { flex: 1 1 100%; width: 100%; }
  .toolbar .field { height: 44px; }
  .toolbar > .chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; max-width: 100%; }
  .toolbar > .chips::-webkit-scrollbar { display: none; }
  .toolbar > .chips > * { flex: none; }
  .toolbar.coll { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
  .ftoggle { display: inline-flex; height: 44px; }
  .xfilters { display: none; grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
  .xfilters.open { display: grid; animation: fade .15s ease; }
  .xfilters .chips { grid-column: 1 / -1; }
  .progress-row { gap: 8px 12px; margin-bottom: 12px; }
  .progress-row .pbar { min-width: 120px; }
  .rar-progress { order: 5; width: 100%; }

  /* rangées de puces qui défilent à l'horizontale au lieu de s'empiler */
  .hscroll { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: -16px; padding-inline: 16px; scroll-padding-inline: 16px; }
  .hscroll::-webkit-scrollbar { display: none; }
  .hscroll > * { flex: none; }
  .page-head .chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; max-width: 100%; }
  .page-head .chips::-webkit-scrollbar { display: none; }
  .subnav { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: -16px; padding-inline: 16px; }
  .subnav::-webkit-scrollbar { display: none; }
  .subnav > * { flex: none; }

  /* tirages */
  .stage { min-height: 0; padding: 18px 10px 20px; border-radius: 18px; }
  .stage-head { padding-inline: 6px; }
  .stage-head h2 { font-size: 21px; }
  .stage-head p { font-size: 13px; }
  .packzone { gap: 16px; padding-block: 14px 4px; }
  .pack-stack { width: min(190px, 52vw); }
  .pack-actions { width: 100%; max-width: 360px; display: grid; grid-template-columns: 1fr; }
  .pack-actions .btn { width: 100%; }
  .feed { max-height: none; }

  /* savebar admin au-dessus de la barre du bas */
  .savebar { padding: 10px 12px; }
}

/* Petits écrans (téléphones) */
@media (max-width: 560px) {
  body { font-size: 14.5px; }
  h2 { font-size: 22px; }
  .panel { padding: 14px; }
  .wrap { padding-inline: 12px; }
  .hscroll, .subnav { margin-inline: -12px; padding-inline: 12px; }
  .grid-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .card { border-radius: 10px; }

  /* révélation : tout le paquet tient dans l'écran (3 colonnes jusqu'à 6 cartes, 4 colonnes jusqu'à 10) */
  .stage-head h2 { font-size: 19px; }
  .reveal { --cols: 3; --gap: 8px; gap: 14px var(--gap); padding-block: 14px 0; }
  .reveal[data-n="7"], .reveal[data-n="8"], .reveal[data-n="9"], .reveal[data-n="10"] { --cols: 4; --gap: 6px; gap: 12px var(--gap); }
  .reveal[data-n="1"] { --cols: 2; } .reveal[data-n="2"] { --cols: 2; }
  .slot, .slot:last-child:nth-child(odd) { width: calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols)); }
  /* le gain passe en pastille sur la carte : une ligne de moins par rangée */
  .slot .gain { position: absolute; left: 50%; top: -9px; transform: translateX(-50%); z-index: 4; margin: 0; min-height: 0; max-width: 104%;
    font-size: 9.5px; line-height: 1.2; padding: 2px 6px; border-radius: 999px; background: var(--night-3); border: 1px solid var(--line);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; }
  .slot .gain:empty { display: none; }
  .slot .gain .gl { display: none; }
  .slot .gain.new { background: #10261F; border-color: rgba(87, 214, 160, .45); }
  .slot .gain.wish { background: #2A1422; border-color: rgba(255, 127, 176, .45); }
  .cardback .k { font-size: 26px; }
  .cardback .t { font-size: 8px; letter-spacing: .14em; }
  .revealbar { display: grid; grid-template-columns: 2fr 1fr; gap: 8px; margin-top: 16px; }
  .revealbar .btn { width: 100%; padding-inline: 10px; font-size: 15px; }
  .revealbar #flipAll { grid-column: 1 / -1; }

  /* fiches & modales : panneau qui monte du bas */
  .modal-bg { align-items: flex-end; padding: 0; }
  .modal {
    max-width: none; border-radius: 22px 22px 0 0; border-bottom: 0; padding: 26px 16px calc(18px + env(safe-area-inset-bottom, 0px));
    max-height: 92vh; max-height: 92dvh; animation: sheet .28s cubic-bezier(.2, .9, .3, 1);
  }
  .modal::before { content: ""; position: absolute; top: 8px; left: 50%; width: 40px; height: 4px; margin-left: -20px; border-radius: 2px; background: var(--line); }
  .modal .x { width: 40px; height: 40px; top: 12px; right: 12px; }
  .card-detail { grid-template-columns: 118px minmax(0, 1fr); gap: 14px; align-items: start; }
  .card-detail > :first-child { max-width: none; margin: 0; }
  .card-detail h2 { font-size: 20px; padding-right: 44px; }
  dl.facts { gap: 5px 10px; margin: 10px 0 14px; font-size: 13.5px; }
  .card-detail > :last-child { min-width: 0; }
  .card-detail .modal-actions { grid-column: 1 / -1; }
  .card-detail .modal-actions .btn { flex: 1 1 100%; white-space: normal; }

  /* profil */
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .stat { padding: 12px; }
  .stat .v { font-size: 22px; }
  .showcase { gap: 8px; }
  .rar-row { grid-template-columns: 90px 1fr 64px; }

  /* classement : on garde l'essentiel */
  .tbl .opt { display: none; }
  .tbl td, .tbl th { padding: 9px 6px; }
  .tbl td.num { white-space: nowrap; }
  .tbl .tag { display: none; }

  /* upgrader */
  .upg { gap: 10px; }
  .upg-side { min-height: 180px; }
  .dial { width: 190px; }
  .upg-mini { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .upg-sort { width: 100%; }
  .upg-sort select { flex: 1 1 0; min-width: 0; }
  .upg-sort .field, .upg-sort .btn { height: 44px; }
  .upg-stake-tools { width: 100%; }
  .upg-stake-tools .btn { flex: 1 1 auto; }

  /* albums */
  .albums { grid-template-columns: 1fr; gap: 10px; }
  .album { padding: 14px; }

  .auth-hero { padding-inline: 20px; gap: 16px; }
  .auth-facts { gap: 20px; }
  .auth-facts b { font-size: 22px; }
}
@keyframes sheet { from { transform: translateY(40px); opacity: 0; } }

/* Très petits téléphones (iPhone SE, 360 px) */
@media (max-width: 380px) {
  .pill .gem + b { max-width: 5ch; overflow: hidden; text-overflow: ellipsis; }
  .pill-daily { padding-inline: 8px; }
  .bottomnav a { font-size: 9.5px; }
  .grid-cards { gap: 6px; }
}

/* Mode paysage sur téléphone : la scène garde les cartes sur une ligne */
@media (max-height: 500px) and (orientation: landscape) {
  .slot, .slot:last-child:nth-child(odd) { width: calc((100% - 32px) / 5); }
}

/* =====================================================================
   Marché, arène, sélecteur de cartes
   ===================================================================== */
.nbadge { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; margin-left: 6px; border-radius: 9px; background: var(--accent); color: var(--accent-ink); font-family: var(--mono); font-size: 11px; font-weight: 500; line-height: 1; vertical-align: 1px; }
.nbadge[hidden] { display: none; }
.mainnav a { position: relative; }
/* 8 onglets : on resserre l'en-tête avant de passer à la barre du bas */
@media (max-width: 1600px) and (min-width: 1081px) {
  .pill .sub, .pill .lbl-full { display: none; }
  .mainnav a { padding: 8px 9px; }
  .hdr-in { gap: 14px; }
}
@media (max-width: 1160px) and (min-width: 1081px) {
  .mainnav a { padding: 8px 7px; font-size: 13px; }
  .brand-name { display: none; }
  .hdr-in { gap: 10px; }
}
.card .lock { position: absolute; left: 6px; top: 26px; z-index: 2; font-size: 11px; padding: 1px 5px; border-radius: 5px; background: rgba(12, 10, 24, .85); color: var(--warn); font-family: var(--mono); }

/* statistiques de combat */
.bstats { display: inline-flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; font-size: 12px; color: var(--muted); }
.bstats b { color: var(--paper); font-weight: 500; }
.bstats .team { color: var(--ok); font-family: var(--mono); }

/* sélecteur de cartes */
.modal.picker { max-width: 860px; display: flex; flex-direction: column; }
.pk-tray { min-height: 44px; padding: 10px; border: 1px dashed var(--line); border-radius: 12px; margin-bottom: 12px; max-height: 190px; overflow: auto; }
.pk-mini { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 8px; }
.pk-sel { border: 0; padding: 0; background: none; border-radius: 10px; cursor: pointer; }
.pk-shards { margin-bottom: 12px; max-width: 260px; }
.pk-tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 12px; }
.pk-tools input.field { flex: 1 1 200px; }
.pk-tools .chips { flex: 1 1 100%; }
.pk-grid { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 10px; padding-top: 10px; }
.pk-grid .bstats { font-size: 10.5px; margin-top: 4px; gap: 2px 6px; }
.pk-foot { position: sticky; bottom: -22px; display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin: 14px -22px -22px; padding: 12px 22px; background: var(--night-2); border-top: 1px solid var(--line); }
.pk-btns { display: flex; gap: 8px; }

/* marché */
.mk-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.mk-tabs, .ar-tabs { max-width: 520px; grid-template-columns: repeat(3, 1fr); margin-bottom: 16px; }
.mk-toolbar input.field { width: 220px; }
.mk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.mk-auction { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 12px; align-items: center; text-align: left; padding: 10px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--night-2); color: var(--paper); cursor: pointer; transition: border-color .15s; }
@media (hover: hover) { .mk-auction:hover { border-color: var(--muted); } }
.mk-auction.leading { border-color: rgba(87, 214, 160, .55); }
.mk-info { display: flex; flex-direction: column; gap: 4px; min-width: 0; align-items: flex-start; }
.mk-price b { font-size: 17px; }
.mk-time { font-family: var(--mono); font-size: 13px; color: var(--warn); }
.mk-items { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.mk-mini { width: 54px; padding: 0; border: 0; background: none; cursor: pointer; border-radius: 8px; }
.mk-mini .card { border-radius: 8px; border-width: 1.5px; }
.mk-shards { padding: 4px 10px; border-radius: 999px; background: rgba(178, 124, 255, .12); color: var(--r-e); font-size: 13px; }
.mk-hist { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.mk-hist li { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.mk-hist .t, .mk-trade .t, .mk-notifs .t, .ar-hist .t { margin-left: auto; color: var(--dim); font-family: var(--mono); font-size: 11px; white-space: nowrap; }
.mk-trades { display: grid; gap: 12px; }
.mk-trade header { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.mk-trade header .avatar { width: 30px; height: 30px; font-size: 13px; }
.mk-sides { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 12px; align-items: start; }
.mk-sides h3 { margin-bottom: 8px; }
.mk-sides.compose > div:not(.mk-arrow) { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; padding: 12px; border: 1px solid var(--line); border-radius: 12px; min-height: 120px; }
.mk-arrow { align-self: center; font-size: 22px; color: var(--muted); }
.mk-note { margin: 10px 0 0; color: var(--muted); font-style: italic; }
.mk-trade .modal-actions { margin-top: 12px; align-items: center; }
.mk-notifs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.mk-notifs li { display: flex; gap: 10px; align-items: baseline; padding: 11px 4px; border-bottom: 1px solid var(--line-soft); font-size: 14px; }
.mk-notifs li.unread { background: rgba(255, 90, 60, .06); }
.mk-notifs a { color: var(--paper); text-decoration: none; }
.mk-notifs a:hover { text-decoration: underline; }
.mk-ic { width: 22px; text-align: center; flex: none; }

/* arène */
.ar-me .stat { min-width: 150px; text-align: right; }
.ar-deck { margin-bottom: 16px; }
.ar-slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 12px; }
.ar-slot { display: flex; flex-direction: column; gap: 6px; }
.ar-slot.empty { aspect-ratio: 5 / 7; border: 2px dashed var(--line); border-radius: 12px; background: none; color: var(--dim); font-size: 28px; display: flex; align-items: center; justify-content: center; gap: 4px; cursor: pointer; }
.ar-slot.empty span { font-size: 12px; }
.ar-slot.notready .ar-card { filter: grayscale(.8) brightness(.6); }
.ar-card { cursor: pointer; }
.ar-opps { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.ar-opp header { display: flex; gap: 10px; align-items: center; margin-bottom: 10px; }
.ar-opp header > div { display: flex; flex-direction: column; min-width: 0; }
.ar-opp header a { color: var(--paper); text-decoration: none; }
.ar-pow { margin-left: auto; color: var(--warn); font-size: 13px; }
.ar-mini { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; margin-bottom: 12px; }
.ar-mini .mk-mini { width: auto; }
.ar-hist { list-style: none; padding: 0; margin: 0; }
.ar-hist li { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 10px 0; border-bottom: 1px solid var(--line-soft); font-size: 14px; }
.ar-hist .t { margin-left: auto; }
.up { color: var(--ok); } .down { color: var(--bad); }

/* combat */
.bt-modal { max-width: 900px; }
.bt-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; padding-right: 40px; }
.bt-head h2 { margin: 0; }
.bt-arena { display: flex; flex-direction: column; gap: 10px; }
.bt-vs { text-align: center; font-family: var(--display); color: var(--accent); font-size: 20px; }
.bt-name { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
.bt-name .avatar { width: 26px; height: 26px; font-size: 12px; }
.bt-row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.bt-unit { position: relative; transition: transform .17s ease, filter .3s, opacity .3s; }
.bt-unit.atk { transform: translateY(-10px) scale(1.04); z-index: 2; }
.bt-side.foe .bt-unit.atk { transform: translateY(10px) scale(1.04); }
.bt-unit.hit .bt-card { animation: hitshake .3s ease; }
.bt-unit.ko { filter: grayscale(1) brightness(.35); opacity: .7; }
@keyframes hitshake { 25% { transform: translateX(-4px); } 50% { transform: translateX(4px); } 75% { transform: translateX(-2px); } }
.bt-hp { height: 6px; border-radius: 3px; background: var(--night-3); overflow: hidden; margin-top: 5px; }
.bt-hp i { display: block; height: 100%; background: linear-gradient(90deg, var(--ok), #9BE37A); transition: width .25s ease; }
.bt-side.foe .bt-hp i { background: linear-gradient(90deg, var(--bad), var(--accent-2)); }
.bt-num { display: block; text-align: center; font-size: 11px; color: var(--muted); }
.bt-fx { position: absolute; left: 50%; top: 30%; transform: translate(-50%, 0); font-family: var(--display); font-size: 20px; color: #fff; text-shadow: 0 2px 6px #000; opacity: 0; pointer-events: none; white-space: nowrap; z-index: 3; }
.bt-fx.show { animation: dmg .5s ease-out forwards; }
.bt-fx.crit { color: var(--r-l); font-size: 24px; }
.bt-fx.dodge { color: var(--r-r); font-size: 14px; font-family: var(--body); font-weight: 700; }
@keyframes dmg { from { opacity: 1; transform: translate(-50%, 0) scale(1.2); } to { opacity: 0; transform: translate(-50%, -30px) scale(1); } }
.bt-result { margin-top: 16px; padding: 16px; border-radius: 14px; display: flex; gap: 14px; align-items: center; justify-content: center; flex-wrap: wrap; text-align: center; animation: pop .3s ease; }
.bt-result b { font-family: var(--display); font-size: 26px; font-weight: 400; }
.bt-result.win { background: rgba(87, 214, 160, .1); border: 1px solid rgba(87, 214, 160, .4); color: var(--ok); }
.bt-result.lose { background: rgba(255, 90, 110, .08); border: 1px solid rgba(255, 90, 110, .35); color: var(--bad); }

/* barre du bas : bouton « Plus » et son menu */
.more-btn { display: none; }
.more-sheet { display: none; }
@media (max-width: 1080px) {
  .bottomnav a, .bottomnav .more-btn { position: relative; }
  .bottomnav .nbadge { position: absolute; top: 2px; left: 55%; margin: 0; min-width: 16px; height: 16px; font-size: 10px; }
  .more-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 52px; border: 0; background: none; color: var(--muted); font-size: 10.5px; font-weight: 700; border-radius: 10px; }
  .more-btn svg { width: 22px; height: 22px; }
  .more-btn.current, .more-btn[aria-expanded="true"] { color: var(--accent-2); }
  .more-sheet { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; position: fixed; right: 8px; left: 8px; bottom: calc(68px + env(safe-area-inset-bottom, 0px)); z-index: 45; padding: 8px; background: var(--night-2); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 -10px 40px rgba(0, 0, 0, .55); animation: sheet .2s ease; }
  .more-sheet a { display: flex; gap: 10px; align-items: center; padding: 14px 12px; border-radius: 12px; color: var(--paper); text-decoration: none; font-weight: 700; font-size: 15px; background: var(--night-3); }
  .more-sheet a svg { width: 22px; height: 22px; color: var(--muted); }
  .more-sheet a[aria-current="page"] { color: var(--accent-2); }

  .mk-actions { width: 100%; display: grid; grid-template-columns: 1fr 1fr; }
  .mk-actions .btn { white-space: normal; text-align: center; padding-inline: 10px; }
  .mk-toolbar input.field { width: 100%; }
  .mk-grid { grid-template-columns: 1fr; gap: 8px; }
  .mk-auction { grid-template-columns: 78px minmax(0, 1fr); }
  .mk-sides { grid-template-columns: 1fr; }
  .mk-arrow { transform: rotate(90deg); justify-self: center; }
  .ar-me { width: 100%; }
  .ar-me .stat { text-align: left; }
  .ar-slots { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
  .ar-slot .bstats { font-size: 10.5px; gap: 2px 6px; }
  .ar-opps { grid-template-columns: 1fr; }
  .bt-row { gap: 5px; }
  .bt-fx { font-size: 16px; }
  .bt-fx.crit { font-size: 19px; }
}
@media (max-width: 560px) {
  .pk-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .pk-mini { grid-template-columns: repeat(auto-fill, minmax(54px, 1fr)); }
  .pk-foot { margin: 14px -16px calc(-18px - env(safe-area-inset-bottom, 0px)); padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px)); bottom: calc(-18px - env(safe-area-inset-bottom, 0px)); }
  .pk-btns { width: 100%; } .pk-btns .btn { flex: 1; }
  .mk-mini { width: 48px; }
  .bt-modal .bt-head { padding-right: 44px; }
  .bt-card .card .meta { display: none; }
  .bt-card .card { aspect-ratio: 5 / 6; }
}