/* AnimeCal — direction « encre & papier » : fond encre chaude, texte papier, un seul accent vermillon (sceau hanko). */
:root {
  --bg: #0e0d0b;
  --bg-2: #141310;
  --surface: #161512;
  --surface-2: #1d1c18;
  --surface-3: #282620;
  --line: #2a2823;
  --line-2: #3b3830;
  --text: #eeeae1;
  --muted: #9b968a;
  --faint: #67635a;
  --accent: #ff5a36;
  --accent-ink: #140a06;
  --green: #93c98a;
  --blue: #8fb3e3;
  --amber: #e2b95e;
  --red: #ec6f5d;
  --gray: #a39e93;
  --violet: #c2b2e0;
  --star: #e2b95e;
  --radius: 10px;
  --radius-sm: 6px;
  /* thème de police par défaut : « Grotesk » (modifiable dans Réglages) */
  --font: 'Onest', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --display: 'Bricolage Grotesque', 'Onest', system-ui, sans-serif;
  --display-w: 700;
  --display-ls: -0.035em;
  --display-scale: 1;
  --mono: var(--font);
  --jp: 'Hiragino Sans', 'Yu Gothic UI', 'Yu Gothic', 'Meiryo', 'Noto Sans JP', sans-serif;
  --top-h: 64px;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 15px/1.55 var(--font);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  overflow-x: hidden;
}
/* grain papier */
body::before {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: .07; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* Ambiances de fond par page : un ou deux halos très estompés, sans motif, mouvement lent. */
body::after {
  content: "";
  position: fixed;
  inset: -12vh -10vw;
  z-index: 0;
  pointer-events: none;
  opacity: .55;
  transform: translate3d(0, 0, 0) scale(1.02);
  will-change: transform;
  transition: opacity .8s ease;
  animation: pageAtmosphere 60s ease-in-out infinite alternate;
}
body[data-page="liste"]::after { background-image: radial-gradient(ellipse at 12% 16%, rgba(255, 90, 54, .09), transparent 40%), radial-gradient(ellipse at 88% 76%, rgba(226, 185, 94, .06), transparent 38%); }
body[data-page="catalogue"]::after { background-image: radial-gradient(ellipse at 84% 8%, rgba(143, 179, 227, .06), transparent 38%); }
body[data-page="sorties"]::after { background-image: radial-gradient(ellipse at 50% 105%, rgba(143, 179, 227, .08), transparent 44%); }
body[data-page="jeu"]::after { background-image: radial-gradient(circle at 20% 24%, rgba(255, 90, 54, .09), transparent 32%), radial-gradient(circle at 82% 72%, rgba(226, 185, 94, .06), transparent 33%); }
body[data-page="profil"]::after { background-image: radial-gradient(ellipse at 18% 20%, rgba(194, 178, 224, .08), transparent 36%); }
body[data-page="amis"]::after { background-image: radial-gradient(ellipse at 18% 30%, rgba(255, 90, 54, .06), transparent 32%), radial-gradient(ellipse at 82% 66%, rgba(143, 179, 227, .06), transparent 32%); }
body[data-page="reglages"]::after { background-image: radial-gradient(ellipse at 90% 8%, rgba(147, 201, 138, .05), transparent 34%); }
body[data-page="anime"]::after { background-image: radial-gradient(ellipse at 50% 4%, rgba(255, 90, 54, .08), transparent 42%); }
body[data-page="login"]::after { opacity: 0; animation: none; }
@keyframes pageAtmosphere {
  0% { transform: translate3d(-1%, -.6%, 0) scale(1.02); }
  100% { transform: translate3d(1%, .4%, 0) scale(1.035); }
}
#app, #modal-root, #toasts { position: relative; z-index: 1; }
body.modal-open { overflow: hidden; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button { font: inherit; color: inherit; cursor: pointer; }
h1, h2, h3, h4 { margin: 0; line-height: 1.15; font-weight: 600; letter-spacing: -0.015em; }
sup { font: 500 12px var(--mono); color: var(--muted); margin-left: 6px; vertical-align: super; letter-spacing: 0; }
.jp { font-family: var(--jp); font-weight: 500; font-size: 12px; color: var(--faint); letter-spacing: .12em; margin-left: 12px; font-style: normal; }
.muted { color: var(--muted); }
.i { width: 18px; height: 18px; flex: none; }
.i.fill { fill: currentColor; stroke: none; }
::selection { background: var(--accent); color: var(--accent-ink); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--surface-3); border-radius: 10px; border: 2px solid var(--bg); }
::-webkit-scrollbar-track { background: transparent; }
:root[data-font="affiche"] { --display: 'Unbounded', 'Onest', sans-serif; --display-w: 600; --display-ls: -0.03em; --display-scale: .78; }
:root[data-font="japon"] { --font: 'Zen Kaku Gothic New', var(--jp), sans-serif; --display: 'Zen Kaku Gothic New', var(--jp), sans-serif; --display-w: 700; --display-ls: -0.02em; }
:root[data-font="neutre"] { --font: 'Manrope', system-ui, sans-serif; --display: 'Manrope', system-ui, sans-serif; --display-w: 800; --display-ls: -0.04em; }
:root[data-font="editorial"] { --font: 'Geist', system-ui, sans-serif; --display: 'Instrument Serif', serif; --display-w: 400; --display-ls: -0.02em; --display-scale: 1.15; --mono: 'Geist Mono', ui-monospace, monospace; }
body { font-variant-numeric: tabular-nums; }
@media (max-width: 700px) {
  body::after { inset: -8vh -18vw; opacity: .45; }
}
@media (prefers-reduced-motion: reduce) {
  body::after { animation: none; transform: none; }
}
.disp, .page-head h1, .logo-text, .empty-hero h3, .week-label b, .ag-head b, .day-tab span, .detail-title, .verdict-head b, .ed-title h3, .char-info h3, .login-card h1, .stat b {
  font-family: var(--display); font-weight: var(--display-w); letter-spacing: var(--display-ls);
}
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.container { width: 100%; margin: 0; padding: 0 clamp(16px, 3.2vw, 56px); }
.page { padding-top: calc(var(--top-h) + 40px); padding-bottom: 90px; }
.page.narrow { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); column-gap: 56px; align-content: start; }
.page.narrow > .page-head, .page.narrow > .credit { grid-column: 1 / -1; }
.page-head { margin-bottom: 28px; }
.page-head h1 { font-size: calc(clamp(36px, 5.2vw, 60px) * var(--display-scale)); line-height: 1; display: flex; align-items: baseline; flex-wrap: wrap; }
.page-head h1 .jp { font-size: 14px; margin-left: 16px; }
.page-head p { margin: 10px 0 0; }
.eyebrow { font: 500 12px var(--mono); text-transform: uppercase; letter-spacing: .14em; color: var(--muted); margin-bottom: 14px; }
.eyebrow::before { content: ""; display: inline-block; width: 8px; height: 8px; background: var(--accent); margin-right: 10px; vertical-align: 1px; }

/* ---------- Barre du haut ---------- */
.topbar {
  position: fixed; inset: 0 0 auto 0; z-index: 50; height: var(--top-h);
  display: flex; align-items: center; gap: 36px; padding: 0 clamp(16px, 3.2vw, 56px);
  background: rgba(14, 13, 11, 0.95); border-bottom: 1px solid var(--line);
}
.logo { display: flex; align-items: center; gap: 12px; }
.logo-text { font-size: calc(22px * var(--display-scale)); line-height: 1; }
.logo-text em { color: var(--accent); }
.seal {
  width: 30px; height: 30px; display: grid; place-items: center; border-radius: 6px; background: var(--accent); color: var(--accent-ink);
  font: 700 17px/1 var(--jp); transform: rotate(-4deg); flex: none;
}
.seal.big { width: 64px; height: 64px; font-size: 36px; border-radius: 12px; margin: 0 auto 18px; }
.nav { display: flex; gap: 2px; height: 100%; }
.nav a { position: relative; display: flex; align-items: center; gap: 8px; padding: 0 14px; color: var(--muted); font-weight: 500; font-size: 14px; transition: color .15s; }
.nav a .i { width: 16px; height: 16px; }
.nav a:hover, .nav a.on { color: var(--text); }
.nav a.on::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: -1px; height: 2px; background: var(--accent); }
.top-search { position: relative; margin-left: auto; width: min(360px, 30vw); display: flex; align-items: center; }
.top-search > .i { position: absolute; left: 12px; width: 16px; height: 16px; color: var(--faint); pointer-events: none; }
.top-search input {
  width: 100%; height: 38px; padding: 0 14px 0 36px; border-radius: 8px; border: 1px solid var(--line);
  background: var(--surface); color: var(--text); font: inherit; font-size: 14px; outline: none; transition: border-color .15s;
}
.top-search input::placeholder { color: var(--faint); }
.top-search input:focus { border-color: var(--line-2); background: var(--surface-2); }
.suggest {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; max-height: 70vh; overflow: auto;
  background: var(--bg-2); border: 1px solid var(--line-2); border-radius: var(--radius); padding: 6px; box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.8);
}
.sg { display: flex; align-items: center; gap: 12px; padding: 7px; border-radius: 8px; }
.sg:hover { background: var(--surface-2); }
.sg img { width: 36px; height: 52px; object-fit: cover; border-radius: 4px; }
.sg div { flex: 1; min-width: 0; }
.sg b { display: block; font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sg small { color: var(--muted); font-size: 12px; }
.sg-all { display: block; text-align: center; padding: 10px; color: var(--accent); font-size: 13px; font-weight: 600; border-top: 1px solid var(--line); margin-top: 4px; }
.sg-empty { padding: 16px; text-align: center; color: var(--muted); }
.sg-kind { padding: 9px 9px 4px; color: var(--faint); font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.sg-kind:not(:first-child) { margin-top: 4px; border-top: 1px solid var(--line); }
.sg-user-avatar { flex: none; width: 38px; height: 38px; display: grid; place-items: center; overflow: hidden; border: 1px solid var(--line-2); border-radius: 50%; color: var(--muted); background: var(--surface-2); }
.sg-user-avatar img { width: 100%; height: 100%; object-fit: contain; border-radius: inherit; opacity: 1; }
.sg-user-avatar .i { width: 18px; height: 18px; }
.bottom-nav { display: none; }

/* ---------- Boutons & champs ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 16px;
  border-radius: 8px; border: 1px solid var(--line-2); background: transparent; color: var(--text);
  font-weight: 500; font-size: 14px; white-space: nowrap; transition: background .15s, border-color .15s, transform .1s;
}
.btn .i { width: 16px; height: 16px; }
.btn:hover { background: var(--surface-2); border-color: var(--faint); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .5; pointer-events: none; }
.btn.sm { height: 32px; padding: 0 12px; font-size: 13px; }
.btn-primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 600; }
.btn-primary:hover { background: #ff6e4f; border-color: #ff6e4f; }
.btn-ghost { border-color: transparent; }
.btn-ghost:hover { border-color: var(--line-2); background: transparent; }
.btn.danger, .link.danger { color: var(--red); }
.btn-row { display: flex; flex-wrap: wrap; gap: 10px; }
.btn-col { display: grid; gap: 8px; margin-top: 14px; }
.icon-btn {
  display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 8px; border: 1px solid var(--line);
  background: transparent; color: var(--text); flex: none; transition: background .15s, border-color .15s;
}
.icon-btn .i { width: 16px; height: 16px; }
.icon-btn:hover { background: var(--surface-2); border-color: var(--line-2); }
.icon-btn.sm { width: 28px; height: 28px; border-radius: 6px; }
.icon-btn.sm .i { width: 14px; height: 14px; }
.link { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); font: 500 12px var(--mono); text-transform: uppercase; letter-spacing: .08em; background: none; border: 0; padding: 0; transition: color .15s; }
.link:hover { color: var(--accent); }
.link .i { width: 14px; height: 14px; }
.input {
  height: 40px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface);
  color: var(--text); font: inherit; font-size: 14px; outline: none; transition: border-color .15s; min-width: 0;
}
.input:focus { border-color: var(--faint); }
select.input { appearance: none; padding-right: 32px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239b968a' stroke-width='2.5'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 11px center; }
select.input option { background: var(--bg-2); }
textarea.input { height: auto; padding: 10px 12px; resize: vertical; width: 100%; line-height: 1.5; }
input[type="date"].input { width: 100%; color-scheme: dark; }
.input-icon { position: relative; display: flex; align-items: center; }
.input-icon .i { position: absolute; left: 12px; width: 16px; height: 16px; color: var(--faint); pointer-events: none; }
.input-icon .input { padding-left: 36px; width: 100%; }
.grow { flex: 1 1 260px; }

/* étiquettes de statut : texte mono + point */
.pill {
  display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px; border-radius: 4px;
  font: 500 11px var(--mono); text-transform: uppercase; letter-spacing: .05em; white-space: nowrap;
  background: rgba(14, 13, 11, 0.88); color: var(--text); border: 1px solid var(--line-2);
}
.pill.sm { height: 20px; padding: 0 6px; font-size: 10px; }
.pill .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pill .i { width: 11px; height: 11px; }
.pill.score { color: var(--star); }
.tone-green { color: var(--green); } .tone-blue { color: var(--blue); } .tone-amber { color: var(--amber); }
.tone-red { color: var(--red); } .tone-gray { color: var(--gray); } .tone-violet { color: var(--violet); }
.pill[class*="tone-"] { border-color: color-mix(in srgb, currentColor 30%, transparent); }

.st-WATCHING, .st-REWATCHING { --st: var(--green); } .st-PLANNING { --st: var(--blue); } .st-DISCOVER { --st: var(--violet); } .st-COMPLETED { --st: var(--text); }
.st-PAUSED { --st: var(--amber); } .st-DROPPED { --st: var(--red); }
.ltag { display: inline-flex; align-items: center; gap: 6px; font: 500 11px var(--mono); text-transform: uppercase; letter-spacing: .06em; white-space: nowrap; color: var(--st); }
.ltag::before { content: ""; width: 6px; height: 6px; background: var(--st); }
.badge-new { display: inline-flex; align-items: center; height: 18px; padding: 0 6px; border-radius: 3px; background: var(--accent); color: var(--accent-ink); font: 600 11px var(--mono); margin-left: 6px; }

/* ---------- Sections ---------- */
.section { margin-top: 56px; }
.section h3 { font-size: 18px; margin-bottom: 16px; display: flex; align-items: baseline; }
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 18px; padding-top: 14px; border-top: 1px solid var(--line); }
.section-head h2 { font-size: 22px; display: flex; align-items: baseline; flex-wrap: wrap; }
.section-tools { display: flex; align-items: center; gap: 6px; }
.section-desc { margin: -8px 0 18px; font-size: 14px; }
.h-sub { color: var(--muted); font-weight: 400; font-size: .7em; margin-left: 8px; }
.row-scroll {
  display: grid; grid-auto-flow: column; grid-auto-columns: 164px; gap: 20px; overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x proximity; padding: 2px 2px 12px; margin: 0 -2px; scrollbar-width: none;
}
.row-scroll::-webkit-scrollbar { display: none; }
.row-scroll > * { scroll-snap-align: start; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(164px, 1fr)); gap: 30px 20px; }
.empty-inline { color: var(--muted); padding: 22px; border: 1px dashed var(--line-2); border-radius: var(--radius); font-size: 14px; }
.more { display: flex; justify-content: center; margin-top: 34px; }
.result-count { margin: 0 0 16px; font: 500 12px var(--mono); text-transform: uppercase; letter-spacing: .08em; }

/* ---------- Carte anime ---------- */
.card { display: block; min-width: 0; position: relative; }
.card-cover { position: relative; aspect-ratio: 2 / 3; border-radius: var(--radius-sm); overflow: hidden; background: var(--surface-2); outline: 1px solid rgba(255, 255, 255, 0.06); outline-offset: -1px; }
.card-cover img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s cubic-bezier(.2, .8, .2, 1); }
.card-cover::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(10, 9, 7, 0.85) 0%, transparent 34%); pointer-events: none; }
.card:hover .card-cover img { transform: scale(1.04); }
.card:hover .card-title { color: var(--accent); }
.card-top { position: absolute; top: 6px; left: 6px; right: 6px; display: flex; justify-content: space-between; gap: 4px; z-index: 2; }
.card-air { position: absolute; left: 8px; right: 8px; bottom: 8px; z-index: 2; display: flex; align-items: center; gap: 5px; font: 500 11px var(--mono); color: var(--text); }
.card-air .i { width: 12px; height: 12px; color: var(--accent); }
.card-air span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card-mine { position: absolute; left: 0; bottom: 30px; z-index: 2; font: 600 10.5px var(--mono); text-transform: uppercase; letter-spacing: .04em; padding: 3px 7px 3px 8px; color: var(--accent-ink); background: var(--st); border-radius: 0 3px 3px 0; }
.card-cover:not(:has(.card-air)) .card-mine { bottom: 10px; }
.card-cover .pbar { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; height: 3px; border-radius: 0; background: rgba(0, 0, 0, 0.55); }
.card-btn {
  position: absolute; right: 6px; bottom: 6px; z-index: 4; width: 30px; height: 30px; border-radius: 6px; display: grid; place-items: center;
  border: 0; background: var(--text); color: var(--bg); opacity: 0; transform: translateY(4px); transition: opacity .15s, transform .15s, background .15s;
}
.card-btn .i { width: 15px; height: 15px; }
.card:hover .card-btn, .card-btn:root[data-font="japon"] { --font: 'Zen Kaku Gothic New', var(--jp), sans-serif; --display: 'Zen Kaku Gothic New', var(--jp), sans-serif; --display-w: 700; --display-ls: -0.02em; }
:root[data-font="neutre"] { --font: 'Manrope', system-ui, sans-serif; --display: 'Manrope', system-ui, sans-serif; --display-w: 800; --display-ls: -0.04em; }
:root[data-font="editorial"] { --font: 'Geist', system-ui, sans-serif; --display: 'Instrument Serif', serif; --display-w: 400; --display-ls: -0.02em; --display-scale: 1.15; --mono: 'Geist Mono', ui-monospace, monospace; }
body { font-variant-numeric: tabular-nums; }
.disp, .page-head h1, .logo-text, .empty-hero h3, .week-label b, .ag-head b, .day-tab span, .detail-title, .verdict-head b, .ed-title h3, .char-info h3, .login-card h1, .stat b {
  font-family: var(--display); font-weight: var(--display-w); letter-spacing: var(--display-ls);
}
:focus-visible { opacity: 1; transform: none; }
.card-btn:hover { background: var(--accent); color: var(--accent-ink); }
.card-cover:has(.card-btn) .card-air { right: 42px; }
.card-title { margin-top: 10px; font-weight: 500; font-size: 14px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; transition: color .15s; }
.card-meta { margin-top: 4px; font: 400 11.5px var(--mono); color: var(--muted); display: flex; flex-direction: column; gap: 1px; }
.seq-when { color: var(--text); }
.seq-from { color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rel-type { color: var(--accent); }
.card-meta:has(.rel-type) { display: block; }
.pbar { height: 3px; border-radius: 2px; background: var(--surface-3); overflow: hidden; }
.pbar i { display: block; height: 100%; background: var(--accent); transition: width .4s; }

/* squelettes & chargement */
.sk .card-cover, .detail-banner.sk, .sk-line { background: linear-gradient(100deg, var(--surface) 30%, var(--surface-2) 50%, var(--surface) 70%); background-size: 300% 100%; animation: shimmer 1.4s infinite linear; }
.sk .card-cover::after { display: none; }
.sk-line { height: 10px; border-radius: 3px; margin-top: 12px; }
.sk-line.short { width: 60%; margin-top: 8px; }
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }
.loader { display: flex; justify-content: center; gap: 6px; padding: 80px 0; }
.loader span { width: 8px; height: 8px; background: var(--accent); animation: blink 1s infinite ease-in-out; }
.loader span:nth-child(2) { animation-delay: .15s; } .loader span:nth-child(3) { animation-delay: .3s; }
@keyframes blink { 0%, 80%, 100% { opacity: .15; } 40% { opacity: 1; } }

/* ---------- Accueil ---------- */
.stats { display: grid; grid-template-columns: repeat(6, 1fr); margin-top: 30px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.stat { padding: 16px 18px 14px; border-left: 1px solid var(--line); transition: background .15s; }
.stat:first-child { border-left: 0; padding-left: 0; }
.stat:hover { background: var(--surface); }
.stat b { display: block; font-size: calc(28px * var(--display-scale)); line-height: 1.1; }
.stat span { font-size: 12px; color: var(--muted); }
.wgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.wcard { display: flex; gap: 14px; padding: 14px; position: relative; box-shadow: inset -1px -1px 0 var(--line); transition: background .15s; }
.wcard:hover { background: var(--surface); }
.wcard-cover img { width: 72px; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 4px; }
.wcard-body { position: relative; flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.wcard-title { font-weight: 600; font-size: 15px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.wcard-title:hover { color: var(--accent); }
.wcard-meta { font: 400 12px var(--mono); color: var(--muted); }
.wcard-meta b { color: var(--text); font-weight: 600; }
.wcard-next { display: flex; align-items: center; gap: 6px; font: 400 11.5px var(--mono); color: var(--muted); }
.wcard-next .i { width: 13px; height: 13px; }
.wcard-actions { display: flex; gap: 6px; margin-top: auto; padding-top: 4px; }
.wcard-actions .btn-primary { background: transparent; color: var(--text); border-color: var(--line-2); font-weight: 500; }
.wcard-actions .btn-primary:hover { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.empty-hero { text-align: center; margin-top: 30px; padding: 56px 24px; border: 1px dashed var(--line-2); border-radius: var(--radius); }
.empty-hero h3 { font-size: calc(28px * var(--display-scale)); margin: 4px 0 10px; }
.empty-hero p { color: var(--muted); max-width: 540px; margin: 0 auto 24px; }
.empty-hero .btn-row { justify-content: center; }
.genre-cloud { display: flex; flex-wrap: wrap; gap: 8px; }
.genre-cloud a { padding: 9px 16px; border-radius: 8px; border: 1px solid var(--line); font-weight: 500; font-size: 14px; transition: border-color .15s, color .15s; }
.genre-cloud a:hover { border-color: var(--accent); color: var(--accent); }

/* ---------- Onglets / barres d'outils ---------- */
.tabs { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; margin-bottom: 24px; border-bottom: 1px solid var(--line); }
.tab { display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; color: var(--muted); font-weight: 500; font-size: 14px; white-space: nowrap; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color .15s; }
.tab:hover { color: var(--text); }
.tab.on { color: var(--text); border-bottom-color: var(--accent); }
.tab span { font: 500 11px var(--mono); color: var(--faint); }
.tab .i { width: 15px; height: 15px; }
.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 24px; }
.toolbar .input-icon { flex: 1 1 240px; }
.seg { display: inline-flex; padding: 3px; gap: 2px; border-radius: 8px; border: 1px solid var(--line); flex-wrap: wrap; }
.seg button, .seg a { border: 0; background: none; height: 32px; padding: 0 12px; border-radius: 6px; color: var(--muted); font-weight: 500; font-size: 13px; display: inline-flex; align-items: center; gap: 6px; transition: color .15s, background .15s; }
.seg button:hover, .seg a:hover { color: var(--text); }
.seg button.on, .seg a.on { background: var(--surface-3); color: var(--text); }
.seg .i { width: 15px; height: 15px; }
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }

/* ---------- Liste en lignes ---------- */
.lrows { border-top: 1px solid var(--line); }
.lrow { display: grid; grid-template-columns: 46px 1fr auto 70px 110px 36px; align-items: center; gap: 18px; padding: 10px 6px; border-bottom: 1px solid var(--line); transition: background .15s; }
.lrow:hover { background: var(--surface); }
.lrow-cover img { width: 46px; height: 66px; object-fit: cover; border-radius: 4px; }
.lrow-main { min-width: 0; }
.lrow-title { font-weight: 600; display: flex; align-items: center; gap: 6px; }
.lrow-title:hover { color: var(--accent); }
.lrow-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-top: 4px; font: 400 12px var(--mono); color: var(--muted); }
.lrow-notes { margin-top: 4px; color: var(--faint); font-style: italic; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lrow-prog { display: flex; align-items: center; gap: 10px; font: 400 13px var(--mono); color: var(--muted); white-space: nowrap; }
.lrow-prog b { color: var(--text); font-weight: 600; }
.lrow-score { display: flex; align-items: center; gap: 5px; font: 600 14px var(--mono); color: var(--star); }
.lrow-score .i { width: 14px; height: 14px; }
.fav { color: var(--accent); display: inline-flex; }
.fav .i { width: 14px; height: 14px; }
.empty { text-align: center; padding: 64px 20px; color: var(--muted); }
.empty > .i { width: 32px; height: 32px; color: var(--faint); }
.empty p { margin: 12px 0 22px; }

/* ---------- Sorties ---------- */
.week-nav { display: flex; align-items: center; gap: 12px; margin-right: auto; }
.week-label { display: flex; flex-direction: column; align-items: center; min-width: 170px; line-height: 1.2; }
.week-label b { font-size: calc(20px * var(--display-scale)); }
.week-label small { color: var(--muted); font: 400 11.5px var(--mono); text-transform: uppercase; letter-spacing: .06em; margin-top: 2px; }
.catchup { margin-bottom: 36px; border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: var(--radius); padding: 16px 18px; }
.catchup h3 { display: flex; align-items: center; gap: 8px; font-size: 15px; margin-bottom: 12px; }
.catchup h3 .i { width: 12px; height: 12px; color: var(--accent); }
.catchup-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 6px 20px; }
.cu-item { display: flex; align-items: center; gap: 12px; padding: 6px 0; }
.cu-item img { width: 32px; height: 46px; object-fit: cover; border-radius: 3px; }
.cu-item > div { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cu-title { font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cu-title:hover { color: var(--accent); }
.cu-item small { color: var(--muted); font: 400 11.5px var(--mono); }
.agenda { display: grid; gap: 34px; }
.ag-head { display: flex; align-items: baseline; gap: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.ag-head b { font-size: calc(22px * var(--display-scale)); }
.ag-head span { color: var(--muted); font-size: 14px; }
.ag-head .ag-count { margin-left: auto; font: 400 11.5px var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--faint); }
.ag-day.today .ag-head b { color: var(--accent); }
.ag-item { display: grid; grid-template-columns: 64px 44px 1fr auto; align-items: center; gap: 16px; padding: 12px 4px; border-bottom: 1px solid var(--line); transition: background .15s; }
.ag-item:hover { background: var(--surface); }
.ag-time { font: 500 16px var(--mono); color: var(--text); }
.ag-cover img { width: 44px; height: 62px; object-fit: cover; border-radius: 4px; }
.ag-main { min-width: 0; }
.ag-title { font-weight: 600; font-size: 15px; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ag-title:hover { color: var(--accent); }
.ag-meta { color: var(--muted); font: 400 12px var(--mono); margin-top: 3px; }
.ag-final { display: inline-block; padding: 0 5px; border-radius: 3px; font: 600 10.5px var(--mono); text-transform: uppercase; color: var(--accent-ink); background: var(--amber); }
.ag-when { font: 500 12.5px var(--mono); color: var(--muted); white-space: nowrap; }
.ag-when.ok { color: var(--green); }
.ag-done { display: inline-flex; align-items: center; gap: 4px; font: 500 12.5px var(--mono); color: var(--faint); }
.ag-done .i { width: 14px; height: 14px; color: var(--green); }
.ag-item.seen { opacity: .5; }
.day-tabs { display: grid; grid-template-columns: repeat(7, 1fr); margin-bottom: 28px; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.day-tab { display: flex; flex-direction: column; align-items: center; padding: 10px 4px; color: var(--muted); border-left: 1px solid var(--line); transition: background .15s, color .15s; line-height: 1.2; }
.day-tab:first-child { border-left: 0; }
.day-tab:hover { background: var(--surface); color: var(--text); }
.day-tab b { font: 500 11px var(--mono); text-transform: uppercase; letter-spacing: .08em; }
.day-tab span { font-size: calc(24px * var(--display-scale)); color: var(--text); line-height: 1.1; }
.day-tab small { font: 400 11px var(--mono); }
.day-tab.today span { color: var(--accent); }
.day-tab.on { background: var(--text); color: var(--bg); }
.day-tab.on span { color: var(--bg); }

/* ---------- Fiche anime ---------- */
.detail-banner { position: relative; height: 360px; overflow: hidden; margin-top: var(--top-h); }
.detail-banner-img { position: absolute; inset: 0; background-size: cover; background-position: center 30%; filter: grayscale(.35) contrast(1.05); }
.detail-banner-img.glow { background: var(--bg-2); }
.detail-banner::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, var(--bg) 0%, rgba(14, 13, 11, 0.55) 55%, rgba(14, 13, 11, 0.25) 100%); }
.detail { position: relative; display: grid; grid-template-columns: 250px 1fr; gap: 48px; margin-top: -150px; padding-bottom: 90px; }
.detail-side { display: flex; flex-direction: column; gap: 16px; position: sticky; top: calc(var(--top-h) + 20px); align-self: start; max-height: calc(100vh - var(--top-h) - 40px); overflow-y: hidden; scrollbar-width: none; }
.detail-side.free { overflow-y: auto; }
/* plus haute que l'écran : la colonne défile à la molette, sans barre visible */
.detail-side::-webkit-scrollbar { display: none; }
.detail-side > * { flex-shrink: 0; }
.detail-cover-wrap { position: relative; }
.detail-cover { display: block; width: 100%; aspect-ratio: 2 / 3; object-fit: cover; border-radius: var(--radius-sm); box-shadow: 0 30px 60px -24px rgba(0, 0, 0, 0.95); outline: 1px solid rgba(255, 255, 255, 0.08); outline-offset: -1px; }
.my-box, .side-box { padding: 16px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--bg); }
.my-box > .muted { margin: 0; text-align: center; font-size: 14px; }
.my-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 10px; }
.my-edit { width: 28px; height: 28px; margin: -4px -6px -4px 0; border-color: transparent; color: var(--muted); }
.my-edit:hover { border-color: var(--line-2); color: var(--text); background: var(--surface-2); }
.my-edit .i { width: 14px; height: 14px; }
.my-line { display: flex; justify-content: space-between; align-items: center; font-size: 13px; color: var(--muted); margin: 8px 0; }
.my-line b { color: var(--text); display: inline-flex; align-items: center; gap: 4px; font: 600 13px var(--mono); }
.my-line .i { width: 14px; height: 14px; color: var(--star); }
.my-notes { font-style: italic; font-size: 14px; color: var(--muted); margin: 12px 0 0; padding-left: 12px; border-left: 2px solid var(--line-2); white-space: pre-wrap; }
.side-box h4 { font: 500 11px var(--mono); text-transform: uppercase; letter-spacing: .1em; color: var(--muted); margin-bottom: 12px; }
.stream { display: flex; align-items: center; gap: 10px; padding: 8px 0; font-weight: 500; font-size: 14px; border-top: 1px solid var(--line); transition: color .15s; }
.side-box h4 + .stream { border-top: 0; }
.stream:hover { color: var(--accent); }
.stream img { width: 22px; height: 22px; border-radius: 5px; padding: 3px; background: var(--sc); }
.stream span { flex: 1; }
.stream small { color: var(--muted); font: 400 11px var(--mono); }
.stream .i { width: 14px; height: 14px; color: var(--faint); }
.facts { margin: 0; display: grid; gap: 9px; }
.facts div { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; }
.facts dt { color: var(--muted); }
.facts dd { margin: 0; text-align: right; font-weight: 500; }
.studio-link { text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; transition: color .15s, text-decoration-color .15s; }
.studio-link:hover { color: var(--accent); text-decoration-color: currentColor; }
.studio-links { display: grid; justify-items: end; gap: 6px; }
.studio-links a { display: inline-flex; align-items: center; gap: 4px; min-height: 30px; padding: 4px 8px; margin: -4px -8px -4px 0; border: 1px solid color-mix(in srgb, var(--accent) 32%, transparent); border-radius: 7px; color: var(--accent); text-decoration: none; }
.studio-links a:hover { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); }
.studio-links svg { width: 13px; height: 13px; }
.studio-head { margin: 8px 0 28px; }
.studio-head .eyebrow { display: block; margin-bottom: 7px; color: var(--accent); font: 600 11px var(--mono); letter-spacing: .11em; text-transform: uppercase; }
.studio-head h2 { margin: 0 0 6px; font-size: clamp(28px, 4vw, 48px); }
.studio-head p { margin: 0; }
.detail-main { min-width: 0; padding-top: 70px; }
.detail-title { font-size: calc(clamp(34px, 4.6vw, 58px) * var(--display-scale)); line-height: 1.02; }
.detail-sub { color: var(--muted); margin: 10px 0 0; font-size: 14px; }
.hero-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 18px; color: var(--muted); font: 400 13px var(--mono); }
.score-big { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; color: var(--star); }
.score-big .i { width: 14px; height: 14px; }
.rank { font: 500 11px var(--mono); text-transform: uppercase; letter-spacing: .04em; color: var(--text); padding: 3px 7px; border: 1px solid var(--line-2); border-radius: 4px; }
.genres { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; }
.ost { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); }
.ost[hidden] { display: none; }
.ost-play { flex: none; width: 36px; height: 36px; display: grid; place-items: center; border: 0; border-radius: 50%; background: var(--text); color: var(--bg); cursor: pointer; transition: transform .15s; }
.ost-play:hover { transform: scale(1.06); }
.ost-play .i { width: 15px; height: 15px; }
.ost.on .ost-play { background: var(--accent); color: var(--accent-ink); }
.ost-txt { display: grid; min-width: 0; line-height: 1.25; }
.ost-txt small { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); font: 500 10.5px var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.ost-txt small .i { width: 11px; height: 11px; }
.ost-txt b, .ost-txt > span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ost-txt b { font-size: 14px; }
.ost-txt > span { color: var(--muted); font-size: 12.5px; }
.ost.on .ost-txt small { color: var(--accent); }
.ost-src { justify-self: start; display: inline-flex; align-items: center; gap: 4px; margin-top: 4px; color: var(--muted); font-size: 11.5px; text-decoration: none; }
.ost-src:hover { color: var(--text); }
.art-box[hidden] { display: none; }
.art-peek { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); color: var(--text); text-align: left; cursor: pointer; transition: border-color .15s; }
.art-peek:hover { border-color: var(--line-2); }
.art-peek > .i { flex: none; width: 15px; height: 15px; margin-left: auto; color: var(--faint); transition: transform .2s, color .15s; }
.art-peek:hover > .i { color: var(--text); transform: translateX(2px); }
.art-stack { position: relative; flex: none; width: 52px; height: 40px; }
.art-stack img { position: absolute; top: 0; left: 0; width: 40px; height: 40px; object-fit: cover; border-radius: 6px; background: #f3efe6; border: 2px solid var(--bg); box-shadow: 0 4px 10px -4px rgba(0, 0, 0, 0.7); transition: transform .25s cubic-bezier(.2, .8, .2, 1); }
.art-stack img:nth-child(1) { z-index: 3; }
.art-stack img:nth-child(2) { z-index: 2; transform: translateX(7px) rotate(6deg); }
.art-stack img:nth-child(3) { z-index: 1; transform: translateX(13px) rotate(12deg); }
.art-peek:hover .art-stack img:nth-child(2) { transform: translateX(9px) rotate(9deg); }
.art-peek:hover .art-stack img:nth-child(3) { transform: translateX(17px) rotate(17deg); }
.art-txt { display: grid; min-width: 0; line-height: 1.25; }
.art-txt small { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); font: 500 10.5px var(--mono); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.art-txt small .i { width: 11px; height: 11px; }
.art-txt b { font-size: 14px; }
.art-txt > span { color: var(--muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.modal.wide.art-modal { width: min(1100px, 100%); padding: 22px 22px 18px; }
.art-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 20px; margin: 0 44px 14px 0; }
.art-head small { display: block; color: var(--muted); font: 500 10.5px var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.art-head b { font-size: 18px; }
.art-filters { display: flex; flex-wrap: wrap; gap: 6px; }
.art-filters button { padding: 5px 10px; border: 1px solid var(--line-2); border-radius: 999px; background: none; color: var(--muted); font: 500 12px var(--font); cursor: pointer; }
.art-filters button i { font: 400 11px var(--mono); font-style: normal; opacity: .7; }
.art-filters button.on { background: var(--text); border-color: var(--text); color: var(--bg); }
.art-stage { display: grid; grid-template-columns: 40px 1fr 40px; align-items: center; gap: 8px; }
.art-view { display: flex; align-items: center; justify-content: center; height: min(64vh, 620px); border-radius: 10px; background: #f3efe6; overflow: hidden; cursor: zoom-in; position: relative; user-select: none; }
.art-view.zoomed { cursor: zoom-out; touch-action: none; }
.art-view img { max-width: 100%; max-height: 100%; object-fit: contain; transition: opacity .2s, transform .25s cubic-bezier(.2, .8, .2, 1); }
.art-view img.loading { opacity: .35; }
.art-nav { width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid var(--line-2); border-radius: 50%; background: var(--bg); color: var(--text); cursor: pointer; }
.art-nav:hover { border-color: var(--accent); color: var(--accent); }
.art-nav .i { width: 18px; height: 18px; }
.art-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: 10px 2px; color: var(--muted); font: 400 12px var(--mono); }
.art-kind { color: var(--text); }
.art-links { display: flex; gap: 12px; margin-left: auto; }
.art-links a { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); }
.art-links a:hover { color: var(--text); }
.art-links .i { width: 12px; height: 12px; }
.art-strip { display: flex; gap: 6px; overflow-x: auto; padding: 4px 2px 8px; scroll-snap-type: x proximity; scrollbar-width: thin; }
.art-strip button { flex: none; width: 84px; height: 60px; padding: 0; border: 2px solid transparent; border-radius: 6px; background: #f3efe6; overflow: hidden; cursor: pointer; opacity: .55; transition: opacity .15s, border-color .15s; scroll-snap-align: center; }
.art-strip button:hover { opacity: .9; }
.art-strip button.on { opacity: 1; border-color: var(--accent); }
.art-strip img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 900px) {
  .modal.wide.art-modal { padding: 16px 12px 12px; }
  .art-stage { grid-template-columns: 1fr; }
  .art-nav { display: none; }
  .art-view { height: min(58vh, 460px); }
  .art-strip button { width: 68px; height: 50px; }
}
.ost-src .i { width: 12px; height: 12px; }
.genres > * { padding: 4px 10px; border-radius: 4px; font-size: 13px; border: 1px solid var(--line-2); color: var(--text); transition: border-color .15s, color .15s; }
.genres a:hover { border-color: var(--accent); color: var(--accent); }
.anime-viewers { display: flex; align-items: center; min-height: 34px; gap: 10px; margin-top: 12px; }
.anime-viewers-label { color: var(--muted); font: 500 10px var(--mono); text-transform: uppercase; letter-spacing: .08em; }
.anime-viewer-list { display: flex; align-items: center; padding-left: 6px; }
.anime-viewer { position: relative; width: 30px; height: 30px; margin-left: -6px; display: grid; place-items: center; border: 2px solid var(--bg); border-radius: 50%; color: var(--muted); background: var(--surface-2); transition: transform .15s, border-color .15s; }
.anime-viewer:first-child { margin-left: 0; }
.anime-viewer:hover, .anime-viewer:focus-visible { z-index: 2; transform: translateY(-3px); border-color: var(--accent); outline: none; }
.anime-viewer::after { content: attr(data-name); position: absolute; left: 50%; bottom: calc(100% + 7px); z-index: 3; padding: 4px 7px; border: 1px solid var(--line-2); border-radius: 4px; color: var(--text); background: var(--surface-3); box-shadow: 0 8px 20px rgba(0, 0, 0, .35); font: 500 10px var(--mono); white-space: nowrap; pointer-events: none; opacity: 0; transform: translate(-50%, 3px); transition: opacity .12s, transform .12s; }
.anime-viewer:hover::after, .anime-viewer:focus-visible::after { opacity: 1; transform: translate(-50%, 0); }
.anime-viewer-clip { position: absolute; inset: 0; display: grid; place-items: center; overflow: hidden; border-radius: inherit; }
.anime-viewer img { width: 100%; height: 100%; object-fit: cover; }
.anime-viewer img.av-chibi { object-position: 50% 10%; }
.anime-viewer .i { width: 14px; height: 14px; }
.anime-viewers-more { color: var(--muted); font: 500 11px var(--mono); }
.continuation-card { --tone: var(--muted); position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; min-height: 68px; margin-top: 18px; padding: 10px 12px; overflow: hidden; border: 1px solid color-mix(in srgb, var(--tone) 32%, var(--line)); border-left: 2px solid var(--tone); border-radius: 8px; background: color-mix(in srgb, var(--tone) 4%, var(--surface)); }
.continuation-card.tone-announced { --tone: var(--accent); }
.continuation-card.tone-available { --tone: var(--green); }
.continuation-card.tone-finished { --tone: var(--blue); }
.continuation-card.tone-airing { --tone: var(--green); }
.continuation-card.tone-covered { --tone: var(--green); }
.continuation-card.tone-manga-airing { --tone: var(--blue); }
.continuation-card.tone-incomplete { --tone: var(--accent); }
.continuation-card.tone-difference { --tone: var(--red); }
.continuation-card.tone-unknown { --tone: var(--muted); }
.continuation-icon { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: color-mix(in srgb, var(--tone) 12%, transparent); color: var(--tone); }
.continuation-icon .i { width: 17px; height: 17px; }
.continuation-copy { min-width: 0; }
.continuation-copy .qz-kicker { color: var(--tone); font-size: 9px; }
.continuation-copy h3 { margin-top: 1px; font-size: 16px; }
.continuation-copy p { margin: 2px 0 0; color: var(--muted); font-size: 11.5px; }
.continuation-copy p a { color: var(--text); font-weight: 600; }
.continuation-copy p a:hover { color: var(--tone); }
.continuation-copy p strong { color: var(--text); font-weight: 500; }
.continuation-cover { width: 36px; height: 50px; border-radius: 4px; overflow: hidden; }
.continuation-cover img { width: 100%; height: 100%; object-fit: cover; }
.continuation-source { position: absolute; right: 6px; bottom: 2px; color: var(--faint); font-size: 8px; }
.continuation-source a { color: inherit; }
.verdict { margin-top: 30px; padding: 20px 22px; border: 1px solid var(--line); border-left: 3px solid currentColor; border-radius: var(--radius); background: var(--bg); }
.verdict-head { display: flex; align-items: center; gap: 12px; }
.verdict-dot { width: 10px; height: 10px; background: currentColor; flex: none; }
.verdict-head small { display: block; font: 500 11px var(--mono); text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }
.verdict-head b { font-size: calc(24px * var(--display-scale)); line-height: 1.1; }
.verdict p { color: var(--text); margin: 10px 0 16px; }
.verdict-rows { margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); color: var(--text); border-top: 1px solid var(--line); }
.verdict-rows div { padding: 12px 14px 2px 0; }
.verdict-rows div + div { padding-left: 14px; border-left: 1px solid var(--line); }
.verdict-rows dt { font: 500 10.5px var(--mono); text-transform: uppercase; letter-spacing: .1em; color: var(--muted); margin-bottom: 6px; }
.verdict-rows dd { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 14px; font-weight: 500; }
.verdict-rows a:hover { color: var(--accent); }
.next-eps { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 0 24px; border-top: 1px solid var(--line); }
.next-ep { padding: 12px 0; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; }
.next-ep b { font: 600 13px var(--mono); }
.next-ep span { font-size: 13px; }
.next-ep small { color: var(--muted); font: 400 11.5px var(--mono); }
.desc { color: #d8d3c8; line-height: 1.75; font-size: 15.5px; max-width: 980px; }
.desc.clamp { display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }
.desc-tools, .translation-tools { display: flex; align-items: center; gap: 14px; margin-top: 12px; }
.translated-label { padding: 3px 7px; border-radius: 999px; background: color-mix(in srgb, var(--green) 14%, transparent); color: var(--green); font: 600 10px var(--mono); text-transform: uppercase; letter-spacing: .05em; }
.spoiler { background: var(--surface-3); color: transparent; border-radius: 3px; cursor: pointer; transition: color .2s; }
.spoiler.shown { color: inherit; background: transparent; }
.tags { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 18px; }
.tags span { font: 400 12px var(--mono); color: var(--muted); }
.tags span::before { content: "#"; color: var(--faint); }
.trailer { display: grid; place-items: center; width: 100%; max-width: 640px; aspect-ratio: 16 / 9; border-radius: var(--radius); border: 1px solid var(--line); background-size: cover; background-position: center; position: relative; overflow: hidden; }
.trailer::before { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.35); transition: background .15s; }
.trailer:hover::before { background: rgba(0, 0, 0, 0.15); }
.trailer span { position: relative; width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); transition: transform .15s; }
.trailer:hover span { transform: scale(1.06); }
.trailer .i { width: 24px; height: 24px; color: var(--accent-ink); margin-left: 4px; }
.chars { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 0 24px; border-top: 1px solid var(--line); }
.char-card { display: flex; align-items: center; gap: 12px; padding: 8px 0; border: 0; border-bottom: 1px solid var(--line); background: none; text-align: left; }
.char-card:hover .char-txt b { color: var(--accent); }
.char-card > img:first-child { width: 44px; height: 60px; object-fit: cover; border-radius: 4px; }
.char-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.char-txt b { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color .15s; }
.char-txt small { font: 400 11.5px var(--mono); color: var(--muted); }
.char-txt .va { color: var(--faint); font-family: var(--font); font-size: 12px; }
.va-img { width: 36px; height: 36px; object-fit: cover; border-radius: 50%; opacity: .8; filter: grayscale(.5); }
.src-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 0 24px; border-top: 1px solid var(--line); }
.src { display: flex; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.src img { width: 44px; height: 62px; object-fit: cover; border-radius: 4px; }
.src div { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; }
.src b { font-size: 14px; font-weight: 600; }
.src small { color: var(--muted); font: 400 11.5px var(--mono); }
.staff { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px 24px; }
.staff-item { display: flex; align-items: center; gap: 10px; }
.staff-item img { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; filter: grayscale(.4); }
.staff-item b { display: block; font-size: 14px; font-weight: 600; }
.staff-item small { color: var(--muted); font-size: 12px; }
.credit { margin-top: 56px; color: var(--faint); font: 400 11.5px var(--mono); text-transform: uppercase; letter-spacing: .06em; }
.credit a { color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Modales ---------- */
.modal-wrap { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 20px; background: rgba(8, 7, 6, 0.78); opacity: 0; transition: opacity .15s; overflow-y: auto; }
.modal-wrap.in { opacity: 1; }
.modal { position: relative; width: min(560px, 100%); background: var(--bg-2); border: 1px solid var(--line-2); border-radius: 14px; box-shadow: 0 40px 100px -20px rgba(0, 0, 0, 0.9); overflow: hidden; transform: translateY(10px); transition: transform .2s cubic-bezier(.2, .8, .2, 1); margin: auto; }
.modal.wide { width: min(900px, 100%); padding: 26px; }
.modal-wrap.in .modal { transform: none; }
.modal-close { position: absolute; top: 12px; right: 12px; z-index: 5; background: rgba(14, 13, 11, 0.8); }
.ed-head { position: relative; display: flex; align-items: flex-end; gap: 16px; padding: 64px 22px 16px; }
.ed-banner { position: absolute; inset: 0; background-size: cover; background-position: center; background-color: var(--surface-2); filter: grayscale(.4); }
.ed-banner::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, var(--bg-2) 8%, rgba(20, 19, 16, 0.5)); }
.ed-cover { position: relative; width: 76px; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 4px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6); }
.ed-title { position: relative; min-width: 0; }
.ed-title h3 { font-size: calc(22px * var(--display-scale)); line-height: 1.05; }
.ed-title p { margin: 8px 0 0; color: var(--muted); font: 400 12px var(--mono); display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ed-body { padding: 4px 22px 4px; }
.field-label { display: flex; justify-content: space-between; font: 500 11px var(--mono); text-transform: uppercase; letter-spacing: .1em; color: var(--muted); margin: 18px 0 8px; }
.field-label .muted { text-transform: none; letter-spacing: 0; color: var(--star); font-size: 12px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { height: 32px; padding: 0 12px; border-radius: 6px; border: 1px solid var(--line-2); background: transparent; color: var(--muted); font-weight: 500; font-size: 13px; transition: all .12s; }
.chip:hover { color: var(--text); border-color: var(--st); }
.chip.on { color: var(--accent-ink); background: var(--st); border-color: var(--st); }
.ed-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; }
.stepper { display: flex; align-items: center; gap: 8px; }
.stepper input { width: 64px; height: 36px; text-align: center; border-radius: 6px; border: 1px solid var(--line); background: var(--surface); color: var(--text); font: 600 16px var(--mono); outline: none; -moz-appearance: textfield; }
.stepper input::-webkit-inner-spin-button { -webkit-appearance: none; }
.stepper .muted { font-family: var(--mono); font-size: 13px; }
.stars { display: flex; gap: 1px; }
.stars button { padding: 0; border: 0; background: none; color: var(--surface-3); width: 22px; height: 22px; position: relative; }
.stars .i { width: 22px; height: 22px; fill: currentColor; stroke: none; }
.stars button.on { color: var(--star); }
.stars button.half::after { content: ""; position: absolute; inset: 0; background: var(--star); clip-path: polygon(0 0, 50% 0, 50% 100%, 0 100%); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m12 3 2.8 5.7 6.2.9-4.5 4.4 1 6.2L12 17.3 6.5 20.2l1-6.2L3 9.6l6.2-.9z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m12 3 2.8 5.7 6.2.9-4.5 4.4 1 6.2L12 17.3 6.5 20.2l1-6.2L3 9.6l6.2-.9z'/%3E%3C/svg%3E") center / contain no-repeat; }
.score-row { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
input[type="range"] { flex: 1; accent-color: var(--accent); }
.toggle { display: inline-flex; align-items: center; gap: 10px; margin-top: 18px; font-weight: 500; font-size: 14px; cursor: pointer; user-select: none; }
.toggle input { display: none; }
.toggle-ui { width: 36px; height: 20px; border-radius: 99px; background: var(--surface-3); position: relative; transition: background .15s; }
.toggle-ui::after { content: ""; position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 50%; background: var(--text); transition: transform .15s; }
.toggle input:checked + .toggle-ui { background: var(--accent); }
.toggle input:checked + .toggle-ui::after { transform: translateX(16px); background: var(--accent-ink); }
.toggle .i { width: 16px; height: 16px; color: var(--accent); }
.ed-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 16px 22px 20px; margin-top: 12px; border-top: 1px solid var(--line); }
.ed-foot-r { display: flex; gap: 8px; }
.char { display: grid; grid-template-columns: 200px 1fr; gap: 26px; }
.char-img { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; border-radius: var(--radius-sm); }
.char-info h3 { font-size: calc(32px * var(--display-scale)); line-height: 1; padding-right: 40px; }
.char-info > .muted { margin: 6px 0 16px; font-size: 14px; }
.char-info .facts { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 0 16px; margin-bottom: 16px; border-top: 1px solid var(--line); }
.char-info .facts div { flex-direction: column; gap: 0; padding: 8px 0; border-bottom: 1px solid var(--line); }
.char-info .facts dt { font: 500 10.5px var(--mono); text-transform: uppercase; letter-spacing: .08em; }
.char-info .facts dd { text-align: left; }
.char-info .desc { font-size: 14.5px; margin-bottom: 10px; }
.char-info .desc-facts { margin-bottom: 14px; line-height: 1.45; }
.va-line { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.va-line img { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; }
.va-line small { display: block; font: 400 10.5px var(--mono); text-transform: uppercase; letter-spacing: .08em; }
.sub-h { margin: 26px 0 12px; font-size: 15px; }
.mini-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(108px, 1fr)); gap: 16px; }
.mini img { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 4px; }
.mini:hover span { color: var(--accent); }
.mini span { font-size: 13px; font-weight: 500; margin-top: 6px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mini small { color: var(--muted); font: 400 11px var(--mono); }
/* fiche personnage : tient dans l'écran, seule la description défile (sans barre visible) */
@media (min-width: 901px) {
  .modal.char-modal { display: flex; flex-direction: column; max-height: calc(100vh - 40px); }
  .char-modal .char { flex: 1 1 auto; min-height: 0; grid-template-rows: minmax(0, 1fr); }
  .char-modal .char-info { display: flex; flex-direction: column; min-height: 0; }
  .char-modal .char-desc { flex: 1 1 auto; min-height: 90px; overflow-y: auto; scrollbar-width: none; }
  .char-modal .char-desc::-webkit-scrollbar { display: none; }
  .char-modal .char-desc.fade-more { -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 36px), transparent); }
  .char-modal .translation-tools { flex: none; }
  .char-modal .sub-h { flex: none; margin: 18px 0 10px; }
  .char-modal .mini-grid { flex: none; display: flex; gap: 14px; overflow-x: auto; scrollbar-width: none; }
  .char-modal .mini-grid::-webkit-scrollbar { display: none; }
  .char-modal .mini { flex: 0 0 100px; }
}
.video { aspect-ratio: 16 / 9; border-radius: 8px; overflow: hidden; background: #000; }
.video iframe { width: 100%; height: 100%; border: 0; }

/* ---------- Toasts / erreurs ---------- */
#toasts { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); z-index: 200; display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; }
.toast { display: flex; align-items: center; gap: 10px; padding: 11px 16px; border-radius: 8px; background: var(--text); color: var(--bg); box-shadow: 0 20px 50px -20px rgba(0, 0, 0, 0.9); font-weight: 500; font-size: 14px; animation: toastIn .25s cubic-bezier(.2, .8, .2, 1); transition: opacity .3s, transform .3s; }
.toast .i { width: 16px; height: 16px; color: #2f7a3a; }
.toast.err { background: var(--red); color: var(--accent-ink); }
.toast.err .i { color: var(--accent-ink); }
.toast.out { opacity: 0; transform: translateY(8px); }
@keyframes toastIn { from { opacity: 0; transform: translateY(12px); } }
.error-box { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: var(--radius); border: 1px solid var(--line); border-left: 3px solid var(--red); margin: 30px 0; }
.error-box > .i { color: var(--red); width: 22px; height: 22px; }
.error-box div { flex: 1; }
.error-box p { margin: 2px 0 0; color: var(--muted); font-size: 14px; }

/* ---------- Réglages ---------- */
.panel { padding: 22px 0; border-top: 1px solid var(--line); }
.panel h3 { font-size: 17px; }
.panel > p { margin: 6px 0 16px; font-size: 14px; }
.inline-form { display: flex; gap: 10px; flex-wrap: wrap; }
.inline-form .input { flex: 1 1 200px; }
label.btn { cursor: pointer; }

/* ---------- Connexion ---------- */
.login { min-height: 100vh; display: grid; place-items: center; padding: 20px; }
.login-bg { display: none; }
.login-card { width: min(420px, 100%); text-align: center; display: grid; gap: 12px; padding: 28px; border: 1px solid var(--line); border-radius: 24px; background: color-mix(in srgb, var(--surface) 94%, transparent); box-shadow: 0 24px 80px #0006; }
.login-card h1 { font-size: calc(52px * var(--display-scale)); line-height: 1; }
.login-card h1 em { color: var(--accent); }
.login-card p.muted { margin: 0; }
.login-intro { margin-bottom: 8px !important; }
.auth-tabs { display: grid; grid-template-columns: 1fr 1fr; padding: 4px; margin: 8px 0; border-radius: 12px; background: var(--surface-2); }
.auth-tabs[hidden] { display: none; }
.auth-tabs button { min-height: 38px; border: 0; border-radius: 9px; background: transparent; color: var(--muted); font: 600 13px var(--font); cursor: pointer; }
.auth-tabs button.on { background: var(--surface-3); color: var(--text); box-shadow: 0 2px 10px #0003; }
.auth-form { display: grid; gap: 12px; text-align: left; }
.auth-form[hidden] { display: none; }
.auth-form label { display: grid; gap: 6px; color: var(--muted); font-size: 12px; font-weight: 600; }
.login-card .input { height: 46px; font-size: 15px; }
.pw-field { position: relative; display: grid; }
.pw-field .input { padding-right: 46px; }
.pw-eye { position: absolute; top: 50%; right: 6px; transform: translateY(-50%); width: 36px; height: 36px; display: grid; place-items: center; border: 0; border-radius: 6px; background: none; color: var(--faint); cursor: pointer; transition: color .15s; }
.pw-eye:hover, .pw-eye[aria-pressed="true"] { color: var(--text); }
.pw-eye:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.pw-eye .i { width: 18px; height: 18px; }
.pw-field input::-ms-reveal { display: none; }
.login-card .verify-code { text-align: center; font: 700 24px var(--mono); letter-spacing: .28em; }
.login-card .btn { height: 46px; }
.auth-form > .btn { margin-top: 3px; }
.auth-form .link { justify-self: center; }
.auth-form small { line-height: 1.45; text-align: center; }
.verify-mark { width: 48px; height: 48px; display: grid; place-items: center; justify-self: center; border-radius: 50%; background: color-mix(in srgb, var(--accent) 15%, transparent); color: var(--accent); font-size: 22px; }
.auth-form > b, .auth-form > p { text-align: center; }
.login-err { color: var(--red); min-height: 1.2em; margin: 0; font-size: 14px; }

/* ---------- Responsive ---------- */
@media (max-width: 1200px) {
  .stats { grid-template-columns: repeat(3, 1fr); }
  .stat:nth-child(4) { border-left: 0; padding-left: 0; }
  .stat:nth-child(n + 4) { border-top: 1px solid var(--line); }
  .nav a span { display: none; }
  .nav a { padding: 0 12px; }
  .nav a.on::after { left: 8px; right: 8px; }
}
@media (max-width: 900px) {
  :root { --top-h: 56px; }
  .container { padding: 0 16px; }
  .page { padding-top: calc(var(--top-h) + 26px); }
  .topbar { padding: 0 16px; gap: 12px; }
  .nav { display: none; }
  .logo-text { display: none; }
  .top-search { width: auto; flex: 1; }
  .bottom-nav {
    display: flex; position: fixed; z-index: 60; left: 0; right: 0; bottom: 0; justify-content: space-around;
    padding: 4px 4px calc(4px + env(safe-area-inset-bottom)); background: rgba(14, 13, 11, 0.97); border-top: 1px solid var(--line);
  }
  .bottom-nav a { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 7px 4px; font-size: 10.5px; color: var(--muted); flex: 1; position: relative; }
  .bottom-nav a.on { color: var(--text); }
  .bottom-nav a.on::before { content: ""; position: absolute; top: -4px; left: 30%; right: 30%; height: 2px; background: var(--accent); }
  .bottom-nav .i { width: 20px; height: 20px; }
  body { padding-bottom: 66px; }
  #toasts { bottom: 82px; }
  .page-head h1 .jp { display: none; }
  .stat { padding: 12px 10px; }
  .stat b { font-size: 21px; }
  .row-scroll { grid-auto-columns: 128px; gap: 12px; }
  .grid { grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); gap: 22px 12px; }
  .card-btn { opacity: 1; transform: none; width: 28px; height: 28px; }
  .wgrid { grid-template-columns: 1fr; }
  .detail-banner { height: 220px; }
  .detail { grid-template-columns: 1fr; margin-top: -120px; gap: 20px; }
  .detail-side { display: grid; grid-template-columns: 120px 1fr; align-items: start; gap: 14px; position: static; max-height: none; overflow: visible; }
  .detail-side .side-box, .detail-side .ost, .detail-side .art-box { grid-column: 1 / -1; }
  .sim-link { bottom: 6px; padding: 6px; }
  .sim-link span { display: none; }
  .detail-main { padding-top: 0; }
  .continuation-card { grid-template-columns: auto minmax(0, 1fr); padding: 10px; }
  .continuation-cover { display: none; }
  .verdict-rows { grid-template-columns: 1fr; }
  .verdict-rows div + div { padding-left: 0; border-left: 0; border-top: 1px solid var(--line); }
  .lrow { grid-template-columns: 40px 1fr auto; gap: 12px; }
  .lrow-cover img { width: 40px; height: 58px; }
  .lrow-score, .lrow .ltag, .lrow > .icon-btn { display: none; }
  .week-nav { width: 100%; justify-content: space-between; margin-right: 0; }
  .ag-item { grid-template-columns: 50px 38px 1fr; gap: 10px; }
  .ag-cover img { width: 38px; height: 54px; }
  .ag-time { font-size: 14px; }
  .ag-side { grid-column: 3; }
  .day-tab { padding: 8px 2px; }
  .day-tab span { font-size: 22px; }
  .char { grid-template-columns: 1fr; }
  .char-img { width: 140px; }
  .ed-grid { grid-template-columns: 1fr; }
  .modal-wrap { padding: 0; align-items: end; }
  .modal { border-radius: 14px 14px 0 0; max-height: 92vh; overflow-y: auto; }
  .modal.wide { padding: 18px; }
  .filters select { flex: 1 1 140px; }
  .section { margin-top: 42px; }
}
@media (max-width: 480px) {
  .stats { grid-template-columns: repeat(2, 1fr); }
  .stat:nth-child(n) { border-left: 1px solid var(--line); padding-left: 10px; border-top: 0; }
  .stat:nth-child(odd) { border-left: 0; padding-left: 0; }
  .stat:nth-child(n + 3) { border-top: 1px solid var(--line); }
  .ed-foot { flex-direction: column-reverse; align-items: stretch; }
  .ed-foot-r { justify-content: flex-end; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* sélecteur de police (Réglages) */
.font-picks { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.font-pick { text-align: left; padding: 14px 16px; border-radius: var(--radius); border: 1px solid var(--line); background: transparent; transition: border-color .15s, background .15s; }
.font-pick:hover { border-color: var(--line-2); background: var(--surface); }
.font-pick.on { border-color: var(--accent); background: var(--surface); }
.font-pick b { display: block; font-size: 26px; line-height: 1.1; letter-spacing: -0.02em; }
.font-pick span { display: block; margin-top: 6px; font-size: 13px; color: var(--muted); }
.font-pick small { display: block; font-size: 11px; color: var(--faint); margin-top: 2px; }

/* ---------- Mon planning (pleine largeur, 2 colonnes) ---------- */
.plan { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 440px); gap: 56px; align-items: start; }
.plan-main { display: grid; gap: 30px; min-width: 0; }
.plan-side { position: sticky; top: calc(var(--top-h) + 20px); display: grid; gap: 18px; max-height: calc(100vh - var(--top-h) - 40px); overflow-y: auto; padding-right: 4px; }
.ag-week { font: 600 11px var(--mono); text-transform: uppercase; letter-spacing: .14em; color: var(--accent); margin-bottom: -14px; }
.ag-week::before { content: ''; display: inline-block; width: 8px; height: 8px; background: var(--accent); margin-right: 10px; vertical-align: 1px; }
.ag-tag { display: inline-block; padding: 0 6px; border-radius: 3px; font: 600 10.5px var(--mono); text-transform: uppercase; letter-spacing: .03em; color: var(--accent-ink); background: var(--amber); vertical-align: 1px; }
.ag-tag.new { background: var(--accent); }
.ag-side { display: flex; align-items: center; gap: 10px; justify-content: flex-end; }
.side-block { border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; }
.side-block.accent { border-left: 3px solid var(--accent); }
.side-block h3 { display: flex; align-items: center; gap: 8px; font-size: 15px; margin-bottom: 8px; }
.side-block h3 .i { width: 14px; height: 14px; color: var(--accent); }
.side-block summary { list-style: none; cursor: pointer; }
.side-block summary::-webkit-details-marker { display: none; }
.side-block summary h3 { margin-bottom: 0; }
.side-block summary h3::after { content: '+'; margin-left: auto; color: var(--muted); font-weight: 400; }
.side-block[open] summary h3 { margin-bottom: 8px; }
.side-block[open] summary h3::after { content: '−'; }
.small { font-size: 13px; margin: 4px 0 8px; }
@media (max-width: 1100px) {
  .plan { grid-template-columns: 1fr; gap: 32px; }
  .plan-side { position: static; max-height: none; }
}

/* ---------- Jaquettes v3 : couverture d'abord, une seule ligne d'info ---------- */
.card-cover::after { background: linear-gradient(to top, rgba(10, 9, 7, 0.55) 0%, transparent 22%); }
.card-tag { position: absolute; top: 6px; left: 6px; z-index: 2; font: 600 10px var(--mono); text-transform: uppercase; letter-spacing: .04em; padding: 3px 6px; border-radius: 3px; color: var(--accent-ink); background: var(--st); }
.st-COMPLETED.card-tag { background: rgba(238, 234, 225, 0.92); }
.card-new { position: absolute; top: 6px; right: 6px; z-index: 2; min-width: 26px; height: 22px; padding: 0 6px; display: grid; place-items: center; border-radius: 4px; background: var(--accent); color: var(--accent-ink); font: 700 12px var(--mono); }
.card-btn.inc { opacity: 1; transform: none; background: var(--accent); color: var(--accent-ink); }
.card-btn.inc:hover { background: #ff6e4f; }
.card-meta { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card-title { -webkit-line-clamp: 2; }
.card.ghost .card-cover img { filter: grayscale(1) brightness(.4); opacity: .8; }
.card.ghost .card-title, .card.ghost .card-meta { opacity: .55; }
.card.ghost:hover .card-cover img { filter: grayscale(.4) brightness(.8); }
.card-ghost { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); z-index: 2; text-align: center; font: 600 12px var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--text); padding: 6px 4px; background: rgba(14, 13, 11, 0.7); }
.ed-hint { margin: 8px 0 0; font: 400 12px var(--mono); color: var(--muted); }

/* ---------- Bibliothèque : séries regroupées ---------- */
.fgroups { display: flex; flex-wrap: wrap; gap: 40px 48px; align-items: flex-start; }
.fg { min-width: 0; max-width: 100%; }
.fg-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; padding-bottom: 10px; margin-bottom: 14px; border-bottom: 1px solid var(--line); }
.fg-head h3 { font-family: var(--display); font-weight: var(--display-w); letter-spacing: var(--display-ls); font-size: 20px; }
.fg-head span { font: 400 12px var(--mono); color: var(--muted); }
.fg-row { display: flex; flex-wrap: wrap; gap: 18px 14px; }
.fg-row .card { width: 128px; }
.fg-row .card-title { font-size: 13px; }
@media (max-width: 900px) {
  .fgroups { gap: 32px; }
  .fg-row .card { width: calc((100vw - 32px - 28px) / 3); }
}

/* ---------- Étiquette qui dépasse du haut de la jaquette + jaquettes terminées estompées ---------- */
.card { margin-top: 10px; }
.card-ribbon {
  position: absolute; z-index: 5; top: -10px; left: 8px; height: 20px; padding: 0 8px 0 7px;
  display: inline-flex; align-items: center; gap: 5px; border-radius: 4px 4px 4px 0;
  font: 700 10.5px var(--mono); text-transform: uppercase; letter-spacing: .05em;
  color: var(--accent-ink); background: var(--st); box-shadow: 0 4px 10px -4px rgba(0, 0, 0, 0.8);
}
.card-ribbon::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; opacity: .7; }
.card-ribbon.st-WATCHING { --st: var(--green); }
.card-ribbon.st-COMPLETED { --st: #cfc9bd; }
.card-ribbon.st-PLANNING { --st: var(--blue); }
.card-ribbon.st-DISCOVER { --st: var(--violet); }
.card.done .card-cover { opacity: .5; transition: opacity .2s; }
.card.done .card-title, .card.done .card-meta { opacity: .55; }
.card.done:hover .card-cover, .card.done:hover .card-title, .card.done:hover .card-meta { opacity: 1; }
.card.done .card-ribbon { opacity: .85; }
.row-scroll { padding-top: 4px; }

/* étiquettes : plus sur l'image, sans point, plus discrètes ; Terminé en vert, En cours en vermillon */
.card { margin-top: 4px; }
.card-ribbon { top: -4px; left: 6px; height: 17px; padding: 0 6px; gap: 0; border-radius: 3px; font-size: 9.5px; letter-spacing: .06em; opacity: .82; box-shadow: 0 2px 6px -2px rgba(0, 0, 0, 0.7); }
.card-ribbon::before { display: none; }
.card-ribbon.st-WATCHING { --st: var(--accent); }
.card-ribbon.st-COMPLETED { --st: var(--green); }
.card.done .card-ribbon { opacity: .75; }

/* étiquette : pastille posée sur l'image (haut gauche) */
.card { margin-top: 0; }
.card-ribbon {
  top: 7px; left: 7px; height: 20px; padding: 0 9px 0 8px; gap: 5px; border-radius: 999px;
  font: 600 11px var(--font); text-transform: none; letter-spacing: 0; opacity: .92;
  box-shadow: 0 2px 8px -2px rgba(0, 0, 0, 0.6);
}
.card-ribbon.st-WATCHING { --st: var(--green); }
.card-ribbon.st-WATCHING::before { display: block; width: 6px; height: 6px; background: #1d3b1a; opacity: .8; }
.card-ribbon.st-COMPLETED { --st: var(--green); opacity: .8; }
.card-ribbon.st-COMPLETED::before { display: none; }
.card.done .card-cover { opacity: .72; }
.card.done .card-title, .card.done .card-meta { opacity: .75; }
.card.done .card-ribbon { opacity: .8; }
.card-cover .pbar { height: 4px; background: rgba(0, 0, 0, 0.6); }
.ed-total { width: 120px; }

/* double-clic = terminé : pas de sélection de texte, pas de zoom au double-tap */
.card { user-select: none; -webkit-user-select: none; touch-action: manipulation; }
#toasts .toast { pointer-events: auto; }
.toast-btn { margin-left: 6px; border: 0; background: none; color: var(--accent); font: 700 13px var(--font); text-transform: uppercase; letter-spacing: .04em; cursor: pointer; padding: 2px 4px; }
.toast-btn:hover { text-decoration: underline; }

/* En cours, à jour : grisé + bandeau du prochain épisode */
.card.ghost.waiting .card-cover img { filter: grayscale(.85) brightness(.55); opacity: 1; }
.card.ghost.waiting .card-title, .card.ghost.waiting .card-meta { opacity: .8; }
.card.ghost.waiting .card-ghost { background: rgba(14, 13, 11, 0.78); color: var(--text); }
.card.ghost.waiting:hover .card-cover img { filter: grayscale(.2) brightness(.85); }

/* lien « Retour » en haut de la fiche */
.back-wrap { position: absolute; left: 0; right: 0; top: 18px; z-index: 3; }
.back-link { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px 0 8px; border-radius: 8px; background: rgba(14, 13, 11, 0.72); border: 1px solid var(--line-2); color: var(--text); font-size: 13px; font-weight: 500; transition: background .15s, border-color .15s; }
.back-link .i { width: 16px; height: 16px; }
.back-link:hover { background: rgba(14, 13, 11, 0.92); border-color: var(--faint); }

/* nouveaux épisodes : simple point orange en haut à droite */
.card-new { top: 8px; right: 8px; min-width: 0; width: 10px; height: 10px; padding: 0; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 2px rgba(14, 13, 11, 0.75); font-size: 0; }

/* terminé : grisé (noir et blanc) et un peu transparent ; la saison en cours ressort en couleur */
.card.done .card-cover { opacity: .62; }
.card.done .card-cover img { filter: grayscale(1) brightness(.85); }
.card.done .card-title, .card.done .card-meta { opacity: .6; }
.card.done:hover .card-cover { opacity: 1; }
.card.done:hover .card-cover img { filter: none; }

/* terminé : beaucoup moins grisé */
.card.done .card-cover { opacity: .85; }
.card.done .card-cover img { filter: grayscale(.45) brightness(.92); }
.card.done .card-title, .card.done .card-meta { opacity: .8; }

.card-ghost { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* terminé : noir et blanc assombri (comme l'attente du prochain épisode), sans bandeau */
.card.done .card-cover { opacity: 1; }
.card.done .card-cover img { filter: grayscale(.85) brightness(.6); }
.card.done .card-title, .card.done .card-meta { opacity: .75; }

/* bandeau de la Bibliothèque = onglets */
.stats.strip { margin: 0 0 28px; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.stats.strip .stat { position: relative; }
.stats.strip a.stat:hover { background: var(--surface); }
.stats.strip .stat.on { background: var(--surface); }
.stats.strip .stat.on::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 2px; background: var(--accent); }
.stats.strip .stat.on b { color: var(--accent); }
.stats.strip .stat.on span { color: var(--text); }
.stats.strip .stat.info { cursor: default; }
.stats.strip .stat.info b { color: var(--muted); }
.stats.strip .stat:first-child { padding-left: 18px; }
@media (max-width: 900px) {
  .stats.strip { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .stats.strip .stat.info { display: none; }
  .stats.strip .stat { padding: 12px 10px; }
  .stats.strip .stat:first-child { padding-left: 10px; }
}
@media (max-width: 1200px) {
  .stats.strip .stat { border-top: 0; border-left: 1px solid var(--line); padding-left: 18px; }
  .stats.strip .stat:first-child { border-left: 0; }
}

/* fiche : toutes les saisons de la série, la saison ouverte encadrée */
.detail-series { margin-top: 30px; }
.detail-series .fg-head h3 { font-size: 17px; }
.detail-series .card.current .card-cover { outline: 2px solid var(--accent); outline-offset: 2px; }
.detail-series .card.current .card-title { color: var(--accent); }
.episode-feedback-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; margin-bottom: 16px; }
.episode-feedback-head h3 { margin: 0 0 4px; }
.episode-feedback-head span, .episode-feedback-wait { color: var(--muted); font-size: 13px; }
.episode-feedback-tools { display: flex; align-items: center; justify-content: flex-end; gap: 9px; flex-wrap: wrap; }
.episode-feedback-tools .input { width: auto; min-width: 154px; padding: 7px 30px 7px 10px; }
.episode-feedback-tools .icon-btn { width: 32px; height: 32px; }
.episode-feedback-tools .i { width: 15px; height: 15px; }
.episode-comment-counter { min-width: 38px; text-align: center; font: 500 11px var(--mono); color: var(--faint) !important; }
.episode-comments { display: block; }
.episode-comment { position: relative; min-width: 0; min-height: 150px; padding: 15px 16px 13px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); animation: fadeUp .22s ease both; }
.episode-comment header { display: flex; align-items: center; gap: 9px; padding-right: min(42%, 330px); }
.episode-comment header img, .episode-comment-avatar { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; background: var(--surface-3); display: grid; place-items: center; color: var(--accent); font-weight: 700; }
.episode-comment header div { display: grid; gap: 1px; }
.episode-comment header b { font-size: 13px; }
.episode-comment header small { color: var(--faint); font-size: 11px; }
.episode-comment p { margin: 12px 0 0; color: #d5d0c6; font-size: 13.5px; line-height: 1.55; white-space: pre-line; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.episode-comment-actions { position: absolute; top: 15px; right: 16px; display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
.episode-comment-actions .link { display: inline-flex; align-items: center; gap: 5px; padding: 0; border: 0; background: none; font-size: 12px; white-space: nowrap; }
.episode-comment-actions .i { width: 13px; height: 13px; }
.episode-comment-translated { padding: 3px 7px; border-radius: 999px; background: color-mix(in srgb, var(--green) 14%, transparent); color: var(--green) !important; font: 600 10px var(--mono); text-transform: uppercase; letter-spacing: .05em; }
@media (max-width: 760px) { .episode-feedback-head { align-items: flex-start; flex-direction: column; } .episode-feedback-tools { justify-content: flex-start; } .episode-comment { padding-top: 52px; } .episode-comment header { padding-right: 0; } .episode-comment-actions { left: 16px; right: 16px; top: 13px; justify-content: flex-start; } }

/* bandeau : un onglet par état de la bibliothèque */
.stats.strip { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 480px) { .stats.strip .stat span { font-size: 10.5px; } }

/* ================= Mouvement ================= */
/* transitions de page : la barre du haut et le bandeau restent, le contenu glisse */
.topbar { view-transition-name: topbar; }
.stats.strip { view-transition-name: strip; }
.strip-ind { position: absolute; left: 0; right: 0; top: -1px; height: 2px; background: var(--accent); view-transition-name: strip-ind; }
.stats.strip .stat.on::before { display: none; }
::view-transition-old(root) { animation: vt-out .16s ease-in both; }
::view-transition-new(root) { animation: vt-in .34s cubic-bezier(.2, .8, .2, 1) both; }
::view-transition-group(strip-ind) { animation-duration: .38s; animation-timing-function: cubic-bezier(.3, 1.2, .4, 1); }
@keyframes vt-out { to { opacity: 0; transform: translateY(-4px); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(10px); } }

/* entrée en cascade des jaquettes et des séries */
@keyframes cardIn { from { opacity: 0; transform: translateY(16px) scale(.97); } }
@keyframes blockIn { from { opacity: 0; transform: translateY(12px); } }
:is(.grid, .fg-row, .row-scroll) > .card { animation: cardIn .55s cubic-bezier(.2, .8, .2, 1) both; animation-delay: 650ms; }
:is(.grid, .fg-row, .row-scroll) > .card:nth-child(1) { animation-delay: 0ms; }
:is(.grid, .fg-row, .row-scroll) > .card:nth-child(2) { animation-delay: 28ms; }
:is(.grid, .fg-row, .row-scroll) > .card:nth-child(3) { animation-delay: 56ms; }
:is(.grid, .fg-row, .row-scroll) > .card:nth-child(4) { animation-delay: 84ms; }
:is(.grid, .fg-row, .row-scroll) > .card:nth-child(5) { animation-delay: 112ms; }
:is(.grid, .fg-row, .row-scroll) > .card:nth-child(6) { animation-delay: 140ms; }
:is(.grid, .fg-row, .row-scroll) > .card:nth-child(7) { animation-delay: 168ms; }
:is(.grid, .fg-row, .row-scroll) > .card:nth-child(8) { animation-delay: 196ms; }
:is(.grid, .fg-row, .row-scroll) > .card:nth-child(9) { animation-delay: 224ms; }
:is(.grid, .fg-row, .row-scroll) > .card:nth-child(10) { animation-delay: 252ms; }
:is(.grid, .fg-row, .row-scroll) > .card:nth-child(11) { animation-delay: 280ms; }
:is(.grid, .fg-row, .row-scroll) > .card:nth-child(12) { animation-delay: 308ms; }
:is(.grid, .fg-row, .row-scroll) > .card:nth-child(13) { animation-delay: 336ms; }
:is(.grid, .fg-row, .row-scroll) > .card:nth-child(14) { animation-delay: 364ms; }
:is(.grid, .fg-row, .row-scroll) > .card:nth-child(15) { animation-delay: 392ms; }
:is(.grid, .fg-row, .row-scroll) > .card:nth-child(16) { animation-delay: 420ms; }
:is(.grid, .fg-row, .row-scroll) > .card:nth-child(17) { animation-delay: 448ms; }
:is(.grid, .fg-row, .row-scroll) > .card:nth-child(18) { animation-delay: 476ms; }
:is(.grid, .fg-row, .row-scroll) > .card:nth-child(19) { animation-delay: 504ms; }
:is(.grid, .fg-row, .row-scroll) > .card:nth-child(20) { animation-delay: 532ms; }
:is(.grid, .fg-row, .row-scroll) > .card:nth-child(21) { animation-delay: 560ms; }
:is(.grid, .fg-row, .row-scroll) > .card:nth-child(22) { animation-delay: 588ms; }
:is(.grid, .fg-row, .row-scroll) > .card:nth-child(23) { animation-delay: 616ms; }
:is(.grid, .fg-row, .row-scroll) > .card:nth-child(24) { animation-delay: 644ms; }
.fgroups > .fg { animation: blockIn .5s cubic-bezier(.2, .8, .2, 1) both; animation-delay: 540ms; }
.fgroups > .fg:nth-child(1) { animation-delay: 0ms; }
.fgroups > .fg:nth-child(2) { animation-delay: 45ms; }
.fgroups > .fg:nth-child(3) { animation-delay: 90ms; }
.fgroups > .fg:nth-child(4) { animation-delay: 135ms; }
.fgroups > .fg:nth-child(5) { animation-delay: 180ms; }
.fgroups > .fg:nth-child(6) { animation-delay: 225ms; }
.fgroups > .fg:nth-child(7) { animation-delay: 270ms; }
.fgroups > .fg:nth-child(8) { animation-delay: 315ms; }
.fgroups > .fg:nth-child(9) { animation-delay: 360ms; }
.fgroups > .fg:nth-child(10) { animation-delay: 405ms; }
.fgroups > .fg:nth-child(11) { animation-delay: 450ms; }
.fgroups > .fg:nth-child(12) { animation-delay: 495ms; }
.calm .card, .calm .fg { animation: none !important; }

/* images : fondu à l'arrivée */
.card-cover img, .detail-cover, .ag-cover img, .cu-item img, .sg img { opacity: 0; transition: opacity .45s ease, transform .4s cubic-bezier(.2, .8, .2, 1), filter .3s; }
.card-cover img.ok, .detail-cover.ok, .ag-cover img.ok, .cu-item img.ok, .sg img.ok { opacity: 1; }

/* inclinaison 3D + reflet qui suit la souris */
.card-cover { transform: perspective(800px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(var(--ty, 0)); transition: transform .45s cubic-bezier(.2, .8, .2, 1), box-shadow .35s; will-change: transform; }
.card-cover.tilt { --ty: -5px; transition: transform .1s linear, box-shadow .35s; box-shadow: 0 22px 40px -18px rgba(0, 0, 0, 0.95); }
.card-cover::before { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: 0; transition: opacity .35s;
  background: radial-gradient(circle at var(--gx, 50%) var(--gy, 0%), rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.04) 35%, transparent 60%); }
.card-cover.tilt::before { opacity: 1; }
.card:hover .card-cover img { transform: scale(1.06); }
.card:active .card-cover { transform: perspective(800px) scale(.97); transition-duration: .1s; }

/* tampon « 済 » quand on marque terminé */
.stamp {
  position: absolute; z-index: 6; left: 50%; top: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px;
  display: grid; place-items: center; border: 3px solid var(--accent); border-radius: 10px; color: var(--accent);
  font: 800 34px/1 var(--jp); background: rgba(14, 13, 11, 0.55); box-shadow: 0 0 0 4px rgba(255, 90, 54, 0.15);
  animation: stampIn .55s cubic-bezier(.2, 1.4, .4, 1) both;
}
@keyframes stampIn {
  0% { opacity: 0; transform: scale(2.4) rotate(-28deg); }
  55% { opacity: 1; transform: scale(.9) rotate(-10deg); }
  100% { opacity: 1; transform: scale(1) rotate(-12deg); }
}
.card-cover:has(.stamp) { animation: thud .35s .28s ease-out; }
@keyframes thud { 40% { transform: perspective(800px) scale(.95); } }

/* point orange : pulsation douce */
.card-new { animation: pulse 2.4s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { box-shadow: 0 0 0 2px rgba(14, 13, 11, 0.75), 0 0 0 0 rgba(255, 90, 54, 0.6); } 50% { box-shadow: 0 0 0 2px rgba(14, 13, 11, 0.75), 0 0 0 6px rgba(255, 90, 54, 0); } }

/* barre de progression qui se remplit */
.pbar i { animation: fill .9s .3s cubic-bezier(.2, .8, .2, 1) both; transform-origin: left; }
@keyframes fill { from { transform: scaleX(0); } }
.calm .pbar i { animation: none; }

/* menu : soulignement qui se déploie */
.nav a::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: -1px; height: 2px; background: var(--accent); transform: scaleX(0); transition: transform .3s cubic-bezier(.2, .8, .2, 1); }
.nav a.on::after { transform: scaleX(1); }

/* fiche anime : entrée */
.detail-side { animation: blockIn .6s .05s cubic-bezier(.2, .8, .2, 1) both; }
.detail-main > * { animation: blockIn .55s cubic-bezier(.2, .8, .2, 1) both; }
.detail-main > *:nth-child(2) { animation-delay: .06s; } .detail-main > *:nth-child(3) { animation-delay: .12s; }
.detail-main > *:nth-child(4) { animation-delay: .18s; } .detail-main > *:nth-child(n + 5) { animation-delay: .24s; }
.detail-banner-img { animation: bannerIn 1.2s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes bannerIn { from { opacity: 0; transform: scale(1.06); } }

/* notification « série terminée » */
.toast.big { padding: 14px 20px; font-size: 15px; }
.toast-seal { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 6px; background: var(--accent); color: var(--accent-ink); font: 800 15px/1 var(--jp); transform: rotate(-8deg); }
.toast.big .i { display: none; }

/* badge « Récent » (À voir) */
.card-badge { position: absolute; z-index: 2; top: 7px; left: 7px; height: 19px; padding: 0 7px; display: inline-flex; align-items: center; border-radius: 4px; background: var(--accent); color: var(--accent-ink); font: 700 10.5px var(--font); letter-spacing: .02em; box-shadow: 0 2px 8px -2px rgba(0, 0, 0, 0.6); }
/* annulation du « Terminé » : la jaquette reprend vie */
.card-cover.unstamp { animation: unstamp .3s ease-out; }
@keyframes unstamp { 40% { transform: perspective(800px) scale(1.04); filter: brightness(1.25); } }

/* ---------- Chargement : bol de ramen ---------- */
.loader { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 70px 0; }
.loader span:not(.loader-txt) { display: none; }
.loader-txt { font: 500 12px var(--mono); color: var(--muted); letter-spacing: .08em; animation: txt 1.8s ease-in-out infinite; }
@keyframes txt { 50% { opacity: .45; } }
.ramen { width: 124px; height: 108px; overflow: visible; }
.ramen .steam path { stroke: var(--muted); opacity: 0; animation: steam 2.4s ease-in-out infinite; }
.ramen .steam .s2 { animation-delay: .8s; }
.ramen .steam .s3 { animation-delay: 1.6s; }
@keyframes steam { 0% { opacity: 0; transform: translateY(8px); } 35% { opacity: .55; } 100% { opacity: 0; transform: translateY(-12px); } }
.ramen .broth { fill: #c98a3c; }
.ramen .naruto circle { fill: #f4efe6; }
.ramen .naruto path { fill: none; stroke: #ec6f8e; stroke-width: 1.4; }
.ramen .noodles path { stroke: #f1d99a; }
.ramen .sticks path { stroke: #b07a4a; }
.ramen .lift { animation: lift 1.7s cubic-bezier(.45, 0, .55, 1) infinite; }
@keyframes lift { 0%, 100% { transform: translateY(9px); } 50% { transform: translateY(-7px); } }
.ramen .bowl { fill: var(--accent); }
.ramen .band { stroke: var(--accent-ink); stroke-width: 2.4; stroke-dasharray: 4 5; opacity: .55; }
.ramen .foot { fill: #c9452a; }
.loader span.loader-txt { width: auto; height: auto; background: none; border-radius: 0; animation: txt 1.8s ease-in-out infinite; }

/* tampon : vert quand on valide (済), rouge quand on dévalide (未) */
.stamp { border-color: var(--green); color: var(--green); box-shadow: 0 0 0 4px rgba(147, 201, 138, 0.18), 0 0 24px -4px rgba(147, 201, 138, 0.5); }
.stamp.undo { border-color: var(--red); color: var(--red); box-shadow: 0 0 0 4px rgba(236, 111, 93, 0.18), 0 0 24px -4px rgba(236, 111, 93, 0.5); }

/* notifications avec tampon */
.toast b { font-weight: 700; }
.toast-seal { display: grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 6px; font: 800 15px/1 var(--jp); transform: rotate(-8deg); animation: sealIn .45s cubic-bezier(.2, 1.4, .4, 1) both; }
.toast-seal.ok { background: #3f7a37; color: #f2f7ee; }
.toast-seal.undo { background: #c4473a; color: #fff3f0; }
@keyframes sealIn { 0% { opacity: 0; transform: scale(2) rotate(-30deg); } 100% { opacity: 1; transform: scale(1) rotate(-8deg); } }
.toast.sealed .i { display: none; }

/* ---------- Mouvement des jaquettes et des fiches ---------- */
/* dérive lente de l'image tant que la souris est dessus */
.card:hover .card-cover img.ok { animation: drift 7s ease-in-out infinite alternate; }
@keyframes drift { from { transform: scale(1.06) translate(0, 0); } to { transform: scale(1.14) translate(-3%, -2%); } }
/* aperçu vidéo dans la jaquette : la vidéo 16:9 est recadrée au centre */
.card-video { position: absolute; inset: 0; z-index: 2; overflow: hidden; opacity: 0; transition: opacity .6s ease; pointer-events: none; background: #000; }
.card-video.on { opacity: 1; }
.card-video iframe { position: absolute; top: 50%; left: 50%; height: 118%; aspect-ratio: 16 / 9; transform: translate(-50%, -50%); border: 0; pointer-events: none; }
/* fiche : bande-annonce en fond de bannière */
.banner-video { position: absolute; inset: 0; overflow: hidden; opacity: 0; transition: opacity 1.2s ease; pointer-events: none; }
.banner-video.on { opacity: 1; }
.banner-video iframe { position: absolute; top: 50%; left: 50%; width: max(100%, 177.78vh * .6); min-width: 100%; aspect-ratio: 16 / 9; transform: translate(-50%, -50%) scale(1.25); border: 0; filter: saturate(1.05) brightness(.8); }
.detail-banner::after { z-index: 1; }
.detail-banner .back-wrap { z-index: 3; }
.sound-btn { position: absolute; z-index: 3; right: clamp(16px, 3.2vw, 56px); bottom: 175px; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--line-2); background: rgba(14, 13, 11, 0.7); color: var(--text); transition: background .15s, color .15s; }
.sound-btn:hover { background: rgba(14, 13, 11, 0.9); }
.sound-btn.on { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
/* sans vidéo : la bannière glisse lentement */
.detail-banner-img { animation: bannerIn 1.2s cubic-bezier(.2, .8, .2, 1) both, pan 26s ease-in-out 1.2s infinite alternate; }
@keyframes pan { from { background-position: center 30%; transform: scale(1.04); } to { background-position: center 60%; transform: scale(1.1); } }
@media (max-width: 900px) { .sound-btn { bottom: 140px; } }
.banner-video iframe { width: max(100%, 640px); height: auto; min-width: 0; }
.detail-banner { isolation: isolate; }
.banner-video iframe { filter: saturate(1.05) brightness(.62); }

/* notification sur deux lignes */
.toast-body { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.toast-body b { font-size: 14px; max-width: 46ch; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.toast-body small { font-size: 13px; font-weight: 500; opacity: .75; }
.toast.sealed { padding: 11px 14px 11px 12px; gap: 12px; }
.toast-seal { width: 30px; height: 30px; font-size: 17px; }

/* fiche : bannière plus haute quand une bande-annonce joue, vidéo moins recadrée */
.detail-banner:has(.banner-video) { --bh: clamp(440px, 70vh, 760px); height: var(--bh); }
.banner-video iframe { width: max(100%, calc(var(--bh, 360px) * 16 / 9)); height: auto; transform: translate(-50%, -50%) scale(1.06); }
.detail-banner:has(.banner-video)::after { background: linear-gradient(to top, var(--bg) 0%, rgba(14, 13, 11, 0.45) 30%, rgba(14, 13, 11, 0.05) 60%, rgba(14, 13, 11, 0.2) 100%); }
.detail-banner:has(.banner-video) .sound-btn { bottom: 190px; }
@media (max-width: 900px) {
  .detail-banner:has(.banner-video) { --bh: 300px; }
  .detail-banner:has(.banner-video) .sound-btn { bottom: 150px; }
}

/* ---------- Sorties : en-tête compact ---------- */
.rel-head { display: flex; align-items: flex-end; gap: clamp(24px, 4vw, 56px); flex-wrap: wrap; margin-bottom: 26px; border-bottom: 1px solid var(--line); }
.rel-head h1 { font-size: calc(clamp(30px, 3.4vw, 40px) * var(--display-scale)); padding-bottom: 12px; }
.rel-head .tabs { margin-bottom: -1px; border-bottom: 0; }

/* ---------- Mon planning : grille semaine ---------- */
.plan { gap: 40px; }
.plan-main { gap: 26px; }
.wk-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 10px; }
.wk-head b { font: 700 calc(17px * var(--display-scale)) var(--display); }
.wk-head span { color: var(--muted); font-size: 13px; }
.wk-head small { margin-left: auto; font: 400 11px var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--faint); }
.wk.idle .wk-head { margin: 0; padding: 10px 0; border-top: 1px solid var(--line); }
.wk.idle .wk-head b { font-size: calc(14px * var(--display-scale)); color: var(--muted); }
.wk-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.wk-day { display: flex; flex-direction: column; gap: 4px; min-height: 92px; padding: 8px 6px; border-radius: 8px; background: var(--surface); min-width: 0; }
.wk-day.none { background: transparent; border: 1px dashed var(--line); }
.wk-day.past .wk-dh { opacity: .55; }
.wk-day.today { box-shadow: inset 0 0 0 1px var(--accent); }
.wk-dh { display: flex; align-items: baseline; gap: 6px; padding: 0 4px 4px; font-size: 12px; color: var(--muted); }
.wk-dh b { font-weight: 600; color: var(--text); }
.wk-dh span { font-family: var(--mono); }
.wk-day.today .wk-dh b, .wk-day.today .wk-dh span { color: var(--accent); }
.wk-ep { position: relative; display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 8px; align-items: center; padding: 4px; border-radius: 6px; transition: background .15s, opacity .2s; }
.wk-ep:hover { background: var(--line); }
.wk-ep.seen { opacity: .45; }
.wk-ep.seen:hover { opacity: .8; }
.wk-cover img { display: block; width: 34px; height: 48px; object-fit: cover; border-radius: 3px; }
.wk-txt { min-width: 0; }
.wk-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 12.5px; font-weight: 600; line-height: 1.25; }
.wk-title:hover { color: var(--accent); }
.wk-txt small { display: block; margin-top: 2px; font: 400 11px var(--mono); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wk-ep.new::after { content: ''; position: absolute; top: 5px; right: 5px; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.wk-mark { position: absolute; top: 50%; right: 4px; transform: translateY(-50%); width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; border: 0; background: var(--accent); color: var(--accent-ink); opacity: 0; transition: opacity .15s; cursor: pointer; }
.wk-mark .i { width: 14px; height: 14px; }
.wk-ep:hover .wk-mark { opacity: 1; }
.wk-ep.new:hover::after { display: none; }
@media (max-width: 1100px) {
  .wk-grid { grid-template-columns: 1fr; gap: 4px; }
  .wk-day { min-height: 0; flex-direction: row; flex-wrap: wrap; align-items: center; }
  .wk-day.none { display: none; }
  .wk-dh { width: 100%; }
  .wk-ep { flex: 1 1 260px; }
}

/* infobulles au survol, en haut à droite de la jaquette */
.card-tips { position: absolute; z-index: 4; top: 7px; right: 7px; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; pointer-events: none; }
.card-tips span { display: inline-flex; align-items: center; gap: 6px; height: 20px; padding: 0 8px; border-radius: 4px; background: rgba(14, 13, 11, 0.86); color: var(--text); font: 600 10.5px var(--font); white-space: nowrap; box-shadow: 0 2px 8px -2px rgba(0, 0, 0, 0.6); opacity: 0; transform: translateY(-3px); transition: opacity .18s ease, transform .18s ease; }
.card-tips span::before { content: ''; width: 6px; height: 6px; border-radius: 50%; flex: none; }
.card-tips .air::before { background: var(--green); }
.card-tips .watch::before { background: var(--accent); }
.card:hover .card-tips span { opacity: 1; transform: none; transition-delay: .12s; }
.card:hover .card-tips span + span { transition-delay: .18s; }
.card:hover .card-cover:has(.card-tips) .card-new { opacity: 0; }
@media (hover: none) { .card-tips { display: none; } }

/* ---------- Catalogue : carte d'identité au survol ---------- */
#idcard { position: fixed; z-index: 60; width: 270px; padding: 14px 16px 12px; border-radius: 10px; background: #1a1916; border: 1px solid var(--line-2, var(--line)); border-top: 3px solid var(--tone); box-shadow: 0 18px 40px -12px rgba(0, 0, 0, 0.75); pointer-events: none; opacity: 0; transform: translateX(-6px); transition: opacity .16s ease, transform .2s cubic-bezier(.2, .8, .2, 1); }
#idcard.left { transform: translateX(6px); }
#idcard.on { opacity: 1; transform: none; }
.idc-head { display: flex; flex-direction: column; gap: 2px; }
.idc-jp { font: 500 11px var(--jp); color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.idc-head b { font-size: 14.5px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.idc-head small { margin-top: 2px; font: 400 11.5px var(--mono); color: var(--muted); }
.idc-score { display: grid; grid-template-columns: auto auto 1fr; align-items: baseline; gap: 2px 4px; margin-top: 12px; }
.idc-score b { font: 700 24px/1 var(--display); letter-spacing: -0.02em; }
.idc-score span { font: 400 11px var(--mono); color: var(--faint); }
.idc-score i { align-self: center; margin-left: 10px; height: 4px; border-radius: 2px; background: linear-gradient(90deg, var(--accent) var(--v), var(--line) var(--v)); }
#idcard dl { margin: 12px 0 0; display: grid; gap: 5px; }
.idc-row { display: grid; grid-template-columns: 74px minmax(0, 1fr); gap: 8px; font-size: 12.5px; }
.idc-row dt { color: var(--faint); }
.idc-row dd { margin: 0; color: var(--text); min-width: 0; }
.idc-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; margin-right: 6px; vertical-align: 1px; background: var(--muted); }
.idc-dot.green { background: var(--green); }
.idc-dot.amber { background: var(--amber); }
.idc-dot.blue { background: #8fb3d9; }
@media (hover: none) { #idcard { display: none; } }
.idc-dot.red { background: #d9695a; }
.card-tips .miss::before { background: var(--amber); }
/* carte d'identité : bloc épisode */
.idc-ep { margin-top: 12px; padding: 10px 12px; border-radius: 8px; background: rgba(255, 255, 255, 0.04); display: grid; gap: 3px; }
.idc-ep > div { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.idc-ep b { font: 700 15px var(--display); }
.idc-ep b span { font: 400 12px var(--mono); color: var(--faint); }
.idc-ep em { font-style: normal; font-size: 11.5px; color: var(--muted); white-space: nowrap; }
.idc-ep small { font-size: 12px; color: var(--muted); }
.idc-when { font: 600 12px var(--font); color: var(--green); }
.idc-ep.soon .idc-when { color: var(--accent); }

/* Bientôt : studio sous la date */
.card-meta .seq-when, .card-meta .seq-from { display: block; overflow: hidden; text-overflow: ellipsis; }
/* titre de l'épisode dans la carte du calendrier */
.idc-eptitle { margin: 2px 0 1px; font-size: 12.5px; font-style: italic; line-height: 1.35; color: var(--text); animation: fadeUp .25s ease both; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }

/* ---------- Aperçu au survol : bande-annonce + résumé ---------- */
#peek { position: fixed; z-index: 60; width: 380px; border-radius: 12px; background: #1a1916; border: 1px solid var(--line-2); box-shadow: 0 24px 60px -16px rgba(0, 0, 0, 0.8); pointer-events: none;
  opacity: 0; transform: translateX(-10px) scale(.97); transform-origin: left center;
  transition: opacity .22s ease, transform .32s cubic-bezier(.2, .8, .2, 1), left .32s cubic-bezier(.2, .8, .2, 1), top .32s cubic-bezier(.2, .8, .2, 1); }
#peek.left { transform: translateX(10px) scale(.97); transform-origin: right center; }
#peek.on { opacity: 1; transform: none; pointer-events: auto; }
#peek.instant { transition: none; }
#peek.swap .peek-body, #peek.swap .peek-media { opacity: 0; }
#peek:empty { display: none; }
.peek-media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #0b0a09; transition: opacity .2s ease; }
.peek-img { position: absolute; inset: -4%; background: center / cover no-repeat; animation: peekPan 9s ease-in-out infinite alternate; }
@keyframes peekPan { from { transform: scale(1.02); } to { transform: scale(1.1) translate(-2%, -1%); } }
.peek-video { position: absolute; inset: 0; opacity: 0; transition: opacity .8s ease; }
.peek-video.on { opacity: 1; }
.peek-video iframe { position: absolute; top: 50%; left: 50%; width: 100%; aspect-ratio: 16 / 9; transform: translate(-50%, -50%) scale(1.22); border: 0; pointer-events: none; }
.peek-body { padding: 4px 18px 16px; display: grid; gap: 4px; transition: opacity .2s ease; border-top: 0; }
.peek-body b { font: var(--display-w) calc(17px * var(--display-scale)) / 1.25 var(--display); letter-spacing: var(--display-ls); }
.peek-body small { font: 400 11.5px var(--mono); color: var(--muted); }
.peek-title { width: fit-content; }
.peek-title:hover { color: var(--accent); }
.peek-studio { display: inline-flex; align-items: center; gap: 4px; width: fit-content; margin-top: 2px; padding: 3px 7px; border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); border-radius: 6px; color: var(--accent); font: 600 11px var(--mono); }
.peek-studio:hover { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); }
.peek-studio svg { width: 12px; height: 12px; }
.peek-body p { margin: 6px 0 0; font-size: 13px; line-height: 1.5; color: #cfcac0; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; min-height: 1.5em; }
.peek-body p.wait { background: linear-gradient(90deg, var(--line) 0 70%, transparent 70%) 0 4px / 100% 9px no-repeat, linear-gradient(90deg, var(--line) 0 90%, transparent 90%) 0 24px / 100% 9px no-repeat, linear-gradient(90deg, var(--line) 0 45%, transparent 45%) 0 44px / 100% 9px no-repeat; min-height: 56px; opacity: .6; }
.peek-media, .peek-body { border-left: 0; }
#peek::before { content: ''; position: absolute; z-index: 2; top: 0; left: 0; right: 0; height: 3px; background: var(--tone); }
@media (hover: none), (max-width: 760px) { #peek { display: none; } }

/* Planning : barre de choix, pas de titres de semaine */
.plan-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-bottom: 20px; }
.plan-bar .week-nav { margin: 0; }
.plan-bar .week-label small a { color: var(--accent); }
.plan.full { grid-template-columns: minmax(0, 1fr); }
.plan-main { gap: 14px; }
/* aperçu survolable : pont invisible entre la jaquette et l'aperçu, bouton son, lien vers la fiche */
#peek::after { content: ''; position: absolute; top: 0; bottom: 0; left: -18px; width: 18px; }
#peek.left::after { left: auto; right: -18px; }
#peek::before { border-radius: 12px 12px 0 0; }
.peek-media { border-radius: 11px 11px 0 0; }
.peek-snd { position: absolute; z-index: 3; right: 10px; bottom: 10px; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; border: 1px solid rgba(255, 255, 255, 0.18); background: rgba(14, 13, 11, 0.72); color: var(--text); cursor: pointer; transition: background .15s, color .15s, transform .15s; }
.peek-snd:hover { background: rgba(14, 13, 11, 0.92); transform: scale(1.06); }
.peek-snd.on { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.peek-snd .i { width: 16px; height: 16px; }
.peek-delay { position: absolute; z-index: 4; left: 12px; top: 12px; padding: 5px 9px; border: 1px solid rgba(255, 137, 113, 0.7); border-radius: 999px; background: rgba(91, 25, 18, 0.92); color: #ffd1c8; font: 700 11px var(--mono); letter-spacing: .04em; text-transform: uppercase; box-shadow: 0 5px 18px rgba(0, 0, 0, .35); }
a.peek-body { color: inherit; padding-top: 12px; }
a.peek-body:hover b { color: var(--accent); }
.peek-body b { transition: color .15s; }
.peek-auto-translated { width: fit-content; margin-top: 3px; padding: 2px 6px; border-radius: 999px; background: color-mix(in srgb, var(--green) 14%, transparent); color: var(--green) !important; font: 600 9px var(--mono) !important; text-transform: uppercase; letter-spacing: .05em; }

/* Sorties : choix dans l'en-tête, calendrier au mois */
.rel-head .plan-bar { margin: 0 0 12px; }
.wk-day.out { opacity: .45; }
.wk-grid.quiet .wk-day { min-height: 44px; }
.month-nav { position: fixed; z-index: 40; right: clamp(16px, 3vw, 40px); bottom: 22px; display: flex; align-items: center; gap: 6px; padding: 6px; border-radius: 999px; background: rgba(26, 25, 22, 0.94); border: 1px solid var(--line-2); box-shadow: 0 14px 34px -12px rgba(0, 0, 0, 0.8); }
.month-nav .icon-btn { border-radius: 50%; }
.month-label { display: flex; flex-direction: column; align-items: center; min-width: 128px; padding: 0 4px; line-height: 1.2; }
.month-label b { font: var(--display-w) calc(15px * var(--display-scale)) var(--display); letter-spacing: var(--display-ls); }
.month-label a { font-size: 11px; color: var(--accent); }
#rel:has(.month-nav) { padding-bottom: 70px; }
@media (max-width: 900px) { .month-nav { bottom: 80px; right: 12px; } .rel-head .plan-bar { margin-top: 6px; } }

/* aperçu agrandi après 5 s */
#peek { transition: opacity .22s ease, transform .32s cubic-bezier(.2, .8, .2, 1), left .45s cubic-bezier(.2, .8, .2, 1), top .45s cubic-bezier(.2, .8, .2, 1), width .45s cubic-bezier(.2, .8, .2, 1), box-shadow .45s ease; }
#peek.instant { transition: none; }
#peek.big { width: min(760px, calc(100vw - 24px)); box-shadow: 0 40px 100px -24px rgba(0, 0, 0, 0.9); }
.peek-body b, .peek-body p, .peek-body small { transition: font-size .45s cubic-bezier(.2, .8, .2, 1); }
#peek.big .peek-body { padding: 16px 24px 22px; }
#peek.big .peek-body b { font-size: calc(24px * var(--display-scale)); }
#peek.big .peek-body small { font-size: 12.5px; }
#peek.big .peek-body p { font-size: 14.5px; -webkit-line-clamp: 9; }
#peek.big .peek-snd { width: 40px; height: 40px; right: 14px; bottom: 14px; }

/* ---------- Sorties : tout sur un écran ---------- */
.page.fit { padding-top: calc(var(--top-h) + 22px); padding-bottom: 0; }
.page.fit .rel-head { margin-bottom: 12px; }
.page.fit .rel-head h1 { padding-bottom: 8px; }
.page.fit .rel-head .plan-bar { margin-bottom: 8px; }
.cal { display: flex; flex-direction: column; gap: 6px; }
.cal-foot { display: flex; justify-content: flex-end; margin-top: 8px; }
.month-nav { position: static; box-shadow: none; padding: 4px; }
#rel:has(.month-nav) { padding-bottom: 0; }
.wk-ep { grid-template-columns: 16px minmax(0, 1fr); gap: 6px; padding: 2px 4px; border-radius: 4px; }
.wk-cover img { width: 16px; height: 22px; border-radius: 2px; }
.wk-line { display: flex; align-items: baseline; gap: 6px; min-width: 0; font-size: 12px; line-height: 22px; }
.wk-t { flex: none; font: 400 10.5px var(--mono); color: var(--faint); }
.wk-n { flex: 1; min-width: 0; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wk-e { flex: none; font: 400 10px var(--mono); color: var(--faint); }
.wk-line:hover .wk-n { color: var(--accent); }
.wk-ep.new::after { top: 50%; right: 3px; width: 6px; height: 6px; transform: translateY(-50%); }
.wk-ep.new .wk-e { margin-right: 9px; }
.wk-dh em { margin-left: auto; font: normal 500 10px var(--mono); color: var(--faint); }
.wk-list { display: flex; flex-direction: column; gap: 1px; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; }
/* Tous les animes : 5 épisodes visibles par case, le reste en défilant */
.cal.all .wk-list { max-height: calc(5 * 26px); }
@media (min-width: 1101px) {
  .cal { height: var(--cal-h, auto); }
  .cal .wk-grid { flex: 1 1 0; min-height: 0; }
  .cal .wk-grid.quiet { flex: .35 1 0; }
  .cal .wk-day { min-height: 0; overflow: hidden; padding: 6px 5px 4px; gap: 2px; }
  .cal .wk-dh { padding: 0 3px 2px; }
}
/* lignes plus serrées : ~5 épisodes par case sur un écran 1080p */
.wk-ep { padding: 1px 4px; }
.wk-cover img { width: 14px; height: 19px; }
.wk-ep { grid-template-columns: 14px minmax(0, 1fr); }
.wk-line { line-height: 19px; }
.wk-list { gap: 1px; }
.cal.all .wk-list { max-height: calc(5 * 22px); }
.page.fit .rel-head h1 { font-size: calc(clamp(26px, 2.6vw, 32px) * var(--display-scale)); }
@media (min-width: 1101px) { .cal .wk-day { padding: 4px 4px 3px; gap: 1px; } .cal .wk-dh { padding: 0 3px 1px; font-size: 11.5px; } }
/* aperçu agrandi : bien plus grand, centré, le reste de la page s'assombrit */
#peek.big { width: min(1180px, calc(100vw - 48px), calc((100vh - 230px) * 16 / 9)); box-shadow: 0 40px 120px -20px rgba(0, 0, 0, 0.95), 0 0 0 100vmax rgba(8, 7, 6, 0.6); }
#peek.big .peek-body { padding: 18px 28px 24px; }
#peek.big .peek-body b { font-size: calc(28px * var(--display-scale)); }
#peek.big .peek-body p { font-size: 15px; -webkit-line-clamp: 4; max-width: 90ch; }
#peek.big .peek-snd { width: 46px; height: 46px; right: 18px; bottom: 18px; }
#peek.big .peek-snd .i { width: 20px; height: 20px; }
#peek.big { width: min(1180px, calc(100vw - 48px), calc((100vh - 300px) * 16 / 9)); }
#peek.instant, #peek.instant * { transition: none !important; }

/* aperçu d'un épisode (Tous les animes) */
.peek-ep { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-top: 8px; padding: 8px 10px; border-radius: 7px; background: rgba(255, 255, 255, 0.04); font-size: 12.5px; color: var(--muted); }
.peek-epn { font-weight: 700; color: var(--text); }
.peek-when { margin-left: auto; font-weight: 600; color: var(--accent); }
.peek-when.ok { color: var(--green); }
.peek-eptitle { margin: 4px 0 0; font-size: 13px; font-style: italic; color: var(--text); animation: fadeUp .25s ease both; }
.peek-feedback { width: fit-content; margin-top: 5px; color: var(--accent); font-size: 12.5px; font-weight: 650; cursor: pointer; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px; animation: fadeUp .25s ease both; }
.peek-feedback:hover { text-decoration-color: currentColor; }
#peek.big .peek-ep { font-size: 14px; }
#peek.big .peek-eptitle { font-size: 15px; }
#peek.big .peek-feedback { font-size: 14px; }
.cal.all .wk-ep { cursor: pointer; }
.peek-from { flex-basis: 100%; font-size: 12px; color: var(--faint); }
.cal .wk-ep { cursor: pointer; }

/* Mes animes : calendrier + colonne « Bientôt de retour » */
.cal-wrap { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.cal-wrap.with-side { grid-template-columns: minmax(0, 1fr) minmax(250px, 300px); }
.soon { display: flex; flex-direction: column; min-height: 0; border: 1px solid var(--line); border-radius: 8px; padding: 12px 10px 8px 14px; }
.soon h3 { display: flex; align-items: center; gap: 8px; font-size: 14px; margin: 0 0 8px; }
.soon h3 .i { width: 14px; height: 14px; color: var(--accent); }
.soon h3 sup { font: 400 11px var(--mono); color: var(--faint); }
.soon-list { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; display: flex; flex-direction: column; gap: 2px; padding-right: 4px; }
.soon-item { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 10px; align-items: center; padding: 5px 6px; border-radius: 6px; transition: background .15s; }
.soon-item:hover { background: var(--surface); }
.soon-item img { width: 30px; height: 42px; object-fit: cover; border-radius: 3px; }
.soon-item b { display: block; font-size: 12.5px; font-weight: 600; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.soon-item small { display: block; font: 400 11px var(--mono); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.soon-item:hover b { color: var(--accent); }
@media (min-width: 1101px) {
  .cal-wrap { height: var(--cal-h, auto); }
  .cal { height: 100%; }
}
@media (max-width: 1100px) { .cal-wrap.with-side { grid-template-columns: minmax(0, 1fr); } .soon-list { max-height: 420px; } }
/* changement de mois centré sous le calendrier (la colonne de droite est exclue) */
.cal-foot { justify-content: center; }
.cal-foot.with-side { display: grid; grid-template-columns: minmax(0, 1fr) minmax(250px, 300px); gap: 16px; justify-items: center; }
@media (max-width: 1100px) { .cal-foot.with-side { grid-template-columns: minmax(0, 1fr); } }
/* passage Mes animes ↔ Tous les animes : glissement */
#rel.slide-l > *, #rel.slide-r > * { animation: relSlideL .5s cubic-bezier(.2, .8, .2, 1) both; }
#rel.slide-r > * { animation-name: relSlideR; }
#rel.slide-l > .cal-foot, #rel.slide-r > .cal-foot { animation-duration: .6s; }
@keyframes relSlideL { from { opacity: 0; transform: translateX(70px); } to { opacity: 1; transform: none; } }
@keyframes relSlideR { from { opacity: 0; transform: translateX(-70px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { #rel.slide-l > *, #rel.slide-r > * { animation: none; } }
.seg button { transition: background .25s ease, color .25s ease; }
#rel { overflow-x: clip; }
/* sélecteur de mois : à droite pour Tous les animes, centré sous le calendrier pour Mes animes */
.cal-foot { justify-content: flex-end; }
#rel.slide-l > .cal-foot, #rel.slide-r > .cal-foot { animation: none; }

/* ---------- Profil (en haut à droite) ---------- */
.profile { position: relative; flex: none; margin-left: -18px; }
.avatar { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--line-2); background: var(--surface); color: var(--muted); cursor: pointer; transition: color .15s, border-color .15s, background .15s; }
.avatar .i { width: 18px; height: 18px; }
button.avatar:hover, button.avatar[aria-expanded="true"] { color: var(--text); border-color: var(--muted); }
button.avatar.on { color: var(--accent); border-color: var(--accent); }
.profile-menu { position: absolute; right: 0; top: calc(100% + 10px); z-index: 70; width: 250px; padding: 6px; border-radius: 10px; background: #1a1916; border: 1px solid var(--line-2); box-shadow: 0 18px 40px -12px rgba(0, 0, 0, 0.8); animation: pmIn .18s cubic-bezier(.2, .8, .2, 1) both; transform-origin: top right; }
@keyframes pmIn { from { opacity: 0; transform: translateY(-4px) scale(.98); } to { opacity: 1; transform: none; } }
.pm-head { display: flex; align-items: center; gap: 10px; padding: 8px 8px 10px; margin-bottom: 4px; border-bottom: 1px solid var(--line); }
.pm-head .avatar { cursor: default; color: var(--accent); }
.pm-head b { display: block; font-size: 14px; }
.pm-head small { display: block; font-size: 12px; color: var(--muted); }
.pm-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border: 0; border-radius: 6px; background: none; color: var(--text); font: 500 13.5px var(--font); text-align: left; cursor: pointer; }
.pm-item .i { width: 16px; height: 16px; color: var(--muted); }
.pm-item:hover { background: var(--surface); }
.pm-item.danger:hover, .pm-item.danger:hover .i { color: #e9796b; }
@media (max-width: 900px) { .profile { margin-left: 0; } .avatar { width: 34px; height: 34px; } }

/* ---------- Catalogue : Similaires ---------- */
.sim-pick { display: grid; gap: 12px; margin-bottom: 22px; }
.sim-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.sim-chip { display: inline-flex; align-items: center; gap: 10px; height: 46px; padding: 4px 6px 4px 4px; border-radius: 8px; background: var(--surface); border: 1px solid var(--line-2); animation: fadeUp .25s ease both; }
.sim-chip img { width: 28px; height: 38px; object-fit: cover; border-radius: 4px; }
.sim-chip b { font-size: 13.5px; max-width: 26ch; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sim-chip button { width: 26px; height: 26px; border: 0; border-radius: 6px; display: grid; place-items: center; background: none; color: var(--muted); cursor: pointer; }
.sim-chip button:hover { background: var(--line); color: var(--text); }
.sim-chip button .i { width: 14px; height: 14px; }
.sim-add { position: relative; flex: 1 1 280px; max-width: 420px; }
.sim-add .input { width: 100%; height: 46px; }
.sim-add .suggest { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 30; }
.sim-quick { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.sim-quick span { font-size: 12px; color: var(--faint); margin-right: 4px; }
.sim-quick button { height: 28px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--line-2); background: none; color: var(--muted); font: 500 12px var(--font); cursor: pointer; transition: color .15s, border-color .15s; }
.sim-quick button:hover { color: var(--text); border-color: var(--muted); }
.sim-count { margin: 0; }
.sim-link { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border-radius: 999px; background: rgba(14, 13, 11, 0.55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); color: rgba(255, 255, 255, 0.72); font-size: 11.5px; font-weight: 500; white-space: nowrap; opacity: .8; transition: opacity .15s, color .15s, background .15s; }
.sim-link:hover { opacity: 1; color: #fff; background: rgba(14, 13, 11, 0.8); }
.sim-link .i { width: 12px; height: 12px; }

/* ---------- Profil ---------- */
a.pm-head { color: inherit; border-radius: 6px; }
a.pm-head:hover { background: var(--surface); }
a.pm-head:hover b { color: var(--accent); }
.pf-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; margin-bottom: 44px; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--line); }
.pf-stats > div { display: flex; flex-direction: column; gap: 4px; padding: 18px 22px; background: var(--bg); }
.pf-stats b { font: var(--display-w) calc(30px * var(--display-scale)) / 1 var(--display); letter-spacing: var(--display-ls); }
.pf-stats span { font-size: 13px; color: var(--muted); }
@media (max-width: 700px) { .pf-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Musée : salles par série, médaillons sur une étagère, plaques gravées */
.museum-head { display: flex; align-items: baseline; gap: 18px; flex-wrap: wrap; margin-bottom: 22px; }
.museum-head h2 { font: var(--display-w) calc(26px * var(--display-scale)) var(--display); letter-spacing: var(--display-ls); margin: 0; }
.museum-head h2 .jp { font-size: 13px; margin-left: 10px; }
.museum-head p { margin: 0; font-size: 13.5px; }
.hall { position: relative; padding: 18px 0 26px; border-top: 1px solid var(--line); }
.hall-plaque { display: inline-flex; align-items: baseline; gap: 10px; margin-bottom: 16px; padding: 5px 12px; border-radius: 4px; background: #1b1813; border: 1px solid #3a3226; }
.hall-plaque b { font: 600 13px var(--font); letter-spacing: .06em; text-transform: uppercase; color: #e6d3b0; }
.hall-plaque small { font: 400 11.5px var(--mono); color: #9c8a6c; }
.hall-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 22px 18px; }
.medal { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 0; border: 0; background: none; color: inherit; cursor: pointer; }
.medal-coin { position: relative; width: 100%; max-width: 128px; aspect-ratio: 1; border-radius: 50%; padding: 5px; background: #b9802a; box-shadow: inset 0 0 0 1px rgba(255, 220, 160, 0.35), 0 12px 22px -12px rgba(0, 0, 0, 0.9); transition: transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s; }
.medal-coin img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; transition: filter .35s; }
.medal-cap { font-size: 12.5px; font-weight: 600; text-align: center; line-height: 1.25; }
.medal:hover .medal-coin { transform: translateY(-5px) rotate(-4deg) scale(1.04); box-shadow: inset 0 0 0 1px rgba(255, 220, 160, 0.5), 0 22px 30px -14px rgba(0, 0, 0, 0.95); }
.medal.locked .medal-coin { background: #4a4540; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 12px 22px -12px rgba(0, 0, 0, 0.9); }
.medal.locked img { filter: grayscale(1) brightness(.42) contrast(1.1); }
.medal.locked:hover img { filter: grayscale(1) brightness(.65) contrast(1.1); }
.medal.locked .medal-cap { color: var(--faint); }
.hall-legend { display: flex; align-items: center; gap: 32px; padding: 10px 0 30px; border-top: 0; }
.medal.big .medal-coin { width: 190px; max-width: none; padding: 7px; }
.medal.big .medal-cap { display: none; }
.legend-plaque { display: grid; gap: 4px; }
.legend-plaque span { font: 600 11px var(--font); letter-spacing: .14em; text-transform: uppercase; color: #9c8a6c; }
.legend-plaque b { font: var(--display-w) calc(28px * var(--display-scale)) var(--display); letter-spacing: var(--display-ls); }
.legend-plaque p { margin: 0; font-size: 13.5px; }

/* vitrine 3D */
.modal.b3d-modal { width: min(980px, 100%); padding: 0; background: #0f0d0b; }
.b3d { display: grid; grid-template-columns: minmax(0, 1fr) 280px; min-height: min(620px, 80vh); }
.b3d-stage { position: relative; min-height: 420px; background: radial-gradient(60% 55% at 50% 42%, #2a241c 0%, #0f0d0b 70%); cursor: grab; touch-action: none; }
.b3d-stage.grab { cursor: grabbing; }
.b3d-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity .6s ease; }
.b3d-stage.ready canvas { opacity: 1; }
.b3d-wait { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; transition: opacity .3s; }
.b3d-stage.ready .b3d-wait { opacity: 0; }
.b3d-fallback { position: absolute; inset: 0; display: grid; place-items: center; align-content: center; gap: 12px; }
.b3d-fallback img { width: min(320px, 70%); border-radius: 50%; }
.b3d-plaque { display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; padding: 28px 26px; border-left: 1px solid var(--line); }
.b3d-plaque > span { font: 600 11px var(--font); letter-spacing: .14em; text-transform: uppercase; color: #9c8a6c; }
.b3d-plaque b { font: var(--display-w) calc(30px * var(--display-scale)) / 1.1 var(--display); letter-spacing: var(--display-ls); }
.b3d-plaque p { display: flex; align-items: center; gap: 8px; margin: 8px 0 0; font-size: 13px; }
.b3d-plaque p .i { width: 15px; height: 15px; }
.b3d-plaque p.locked { color: var(--muted); }
.b3d-plaque p.won { color: var(--green); }
.b3d-plaque small { margin-top: 10px; font-size: 12px; }
@media (max-width: 760px) { .b3d { grid-template-columns: 1fr; } .b3d-plaque { border-left: 0; border-top: 1px solid var(--line); } .b3d-stage { min-height: 340px; } }

/* ---------- Chibis ---------- */
.lib-head { position: relative; }
.chibi-perch { position: absolute; right: 8px; bottom: -29px; display: flex; align-items: flex-end; gap: 2px; z-index: 2; }
.chibi-perch img { height: 74px; width: auto; filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 0.55)); transform-origin: 50% 100%; animation: perchIn .6s cubic-bezier(.2, 1.4, .4, 1) both; animation-delay: calc(var(--i) * 70ms); transition: transform .25s cubic-bezier(.2, 1.4, .4, 1); }
.chibi-perch img:hover { transform: translateY(-8px) rotate(-4deg) scale(1.08); }
.chibi-perch img.shadow { filter: brightness(0) drop-shadow(0 6px 8px rgba(0, 0, 0, 0.55)); opacity: .55; }
@keyframes perchIn { from { opacity: 0; transform: translateY(18px) scale(.8); } to { opacity: 1; transform: none; } }
@media (max-width: 900px) { .chibi-perch img { height: 52px; } .chibi-perch { bottom: -20px; } .chibi-perch img:nth-child(n+5) { display: none; } }
@media (prefers-reduced-motion: reduce) { .chibi-perch img { animation: none; } }

/* Chibidex (façon Pokédex) */
.chibidex { margin-bottom: 48px; }
.dex-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 10px; }
.dex { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 26px 8px 12px; border-radius: 10px; background: var(--surface); border: 1px solid var(--line); transition: border-color .2s, transform .25s cubic-bezier(.2, .8, .2, 1); }
.dex:hover { border-color: var(--line-2); transform: translateY(-3px); }
.dex-no { position: absolute; top: 8px; left: 10px; font: 500 10.5px var(--mono); color: var(--faint); letter-spacing: .04em; }
.dex img { width: 92px; height: 92px; object-fit: contain; filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 0.45)); transition: transform .25s cubic-bezier(.2, 1.4, .4, 1); }
.dex:hover img { transform: scale(1.08) rotate(-3deg); }
.dex b { margin-top: 8px; font-size: 13px; text-align: center; line-height: 1.25; }
.dex small { font-size: 11px; color: var(--muted); text-align: center; }
.dex.locked img { filter: brightness(0); opacity: .8; }
.dex.locked b { color: var(--faint); letter-spacing: .2em; }
.dex.locked:hover img { transform: none; }
.chibi-perch img { height: 88px; }
.chibi-perch img.shadow { filter: brightness(0) drop-shadow(0 0 1px rgba(255, 255, 255, 0.45)) drop-shadow(0 0 1px rgba(255, 255, 255, 0.25)); opacity: .85; }

/* badges plus grands : musée et vitrine 3D */
.hall-row { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 28px 22px; }
.medal-coin { max-width: 176px; padding: 6px; }
.medal-cap { font-size: 13.5px; }
.medal.big .medal-coin { width: 250px; padding: 9px; }
.modal.b3d-modal { width: min(1280px, 96vw); }
.b3d { min-height: min(820px, 88vh); grid-template-columns: minmax(0, 1fr) 300px; }

/* perchoir : 5 emplacements visibles, les chibis posés sur la ligne des compteurs */
.chibi-perch { --slot: 118px; left: auto; right: 8px; bottom: -28px; width: calc(var(--slot) * 5); padding-top: 14px; overflow-x: clip; overflow-y: visible; }
.perch-track { display: flex; align-items: flex-end; width: max-content; will-change: transform; }
.perch-track img { animation: none; flex: none; width: var(--slot); height: 82px; padding: 0 16px; object-fit: contain; object-position: 50% 100%; }
@media (max-width: 900px) { .chibi-perch { --slot: 78px; bottom: -28px; width: calc(var(--slot) * 4); } .perch-track img { height: 54px; padding: 0 10px; } .chibi-perch img:nth-child(n+5) { display: block; } }
.perch-track img:not(.shadow) { filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.5)); }

/* raretés des badges : Bronze, Argent, Or, Légendaire */
.r-bronze { --rc: #b0703a; --rc-hi: rgba(255, 210, 170, 0.35); }
.r-argent { --rc: #aeb5bf; --rc-hi: rgba(255, 255, 255, 0.45); }
.r-or { --rc: #d8a032; --rc-hi: rgba(255, 230, 160, 0.45); }
.r-legendaire { --rc: #c0392b; --rc-hi: rgba(255, 190, 170, 0.4); }
.medal .medal-coin, .won-badge .medal-coin { background: var(--rc, #b9802a); box-shadow: inset 0 0 0 1px var(--rc-hi, rgba(255, 220, 160, 0.35)), 0 12px 22px -12px rgba(0, 0, 0, 0.9); }
.medal.locked .medal-coin { background: #3d3934; box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--rc) 45%, transparent), 0 12px 22px -12px rgba(0, 0, 0, 0.9); }
.medal-cap small { display: block; margin-top: 2px; font: 500 10.5px var(--font); letter-spacing: .08em; text-transform: uppercase; color: var(--rc); }
.medal.locked .medal-cap small { color: color-mix(in srgb, var(--rc) 60%, var(--faint)); }
.b3d-plaque .rarity { font: 600 11px var(--font); font-style: normal; letter-spacing: .14em; text-transform: uppercase; color: var(--rc); }
.b3d-plaque p a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }

/* page Jeu : quiz du jour (la roue a son propre écran) */
.game-head { justify-content: space-between; align-items: center; }
.wheel-link { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; padding: 8px 14px 8px 8px; border-radius: 999px; border: 1px solid var(--line); color: var(--text); transition: border-color .15s, background .15s; }
.wheel-link:hover { border-color: var(--line-2); background: var(--surface); }
.wheel-link.ready { border-color: color-mix(in srgb, var(--accent) 60%, var(--line)); }
.wheel-link span:not(.wl-mini) { display: flex; flex-direction: column; line-height: 1.2; }
.wheel-link b { font-size: 14px; }
.wheel-link small { font-size: 11.5px; color: var(--muted); }
.wheel-link .i { width: 16px; height: 16px; color: var(--muted); }
.wl-mini { width: 34px; height: 34px; border-radius: 50%; border: 3px solid #b9802a; background: conic-gradient(#4a1d16 0 30deg, #24221d 30deg 60deg, #171613 60deg 90deg, #2f2b23 90deg 120deg, #24221d 120deg 150deg, #3a3326 150deg 180deg, #4a1d16 180deg 210deg, #171613 210deg 240deg, #2f2b23 240deg 270deg, #2a1912 270deg 330deg, #24221d 330deg); }
.wheel-link.ready .wl-mini { animation: wlSpin 6s linear infinite; }
@keyframes wlSpin { to { transform: rotate(360deg); } }
.quiz-zone { min-height: 460px; }
.qz-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.qz-kicker { display: block; font: 600 11px var(--font); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
.qz-head b { font: var(--display-w) calc(24px * var(--display-scale)) / 1.1 var(--display); letter-spacing: var(--display-ls); }
.qz-head b::first-letter { text-transform: uppercase; }
.qz-tries { display: flex; align-items: center; gap: 5px; }
.qz-tries i { width: 10px; height: 10px; border-radius: 50%; background: var(--accent); }
.qz-tries i.used { background: var(--surface-3); }
.qz-tries small { margin-left: 6px; font-size: 12px; color: var(--muted); }
.qz-rule { margin: 16px 0 22px; font-size: 14px; }
.qz-rule b { color: var(--text); font-weight: 600; }
.qz-themes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 2vw, 28px); }
.qz-theme { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 0; border: 0; background: none; color: inherit; text-align: left; cursor: pointer; }
.qz-cover { position: relative; display: block; aspect-ratio: 2 / 3; border-radius: var(--radius); overflow: hidden; background: var(--surface-2); outline: 2px solid transparent; outline-offset: 4px; transition: outline-color .2s, transform .3s cubic-bezier(.2, .8, .2, 1), box-shadow .3s; box-shadow: 0 18px 30px -18px rgba(0, 0, 0, 0.9); }
.qz-cover img { width: 100%; height: 100%; object-fit: cover; display: block; transition: filter .3s, transform .5s cubic-bezier(.2, .8, .2, 1); }
.qz-theme:hover .qz-cover { transform: translateY(-4px); }
.qz-theme:hover .qz-cover img { transform: scale(1.03); }
.qz-themes:has(.on) .qz-theme:not(.on) .qz-cover img { filter: brightness(.55) saturate(.7); }
.qz-theme.on .qz-cover { outline-color: var(--accent); transform: translateY(-4px); }
.qz-theme.on .qz-cover::after { content: ""; position: absolute; top: 12px; right: 12px; width: 28px; height: 28px; border-radius: 50%; background: var(--accent); box-shadow: inset 0 0 0 8px var(--accent), inset 0 0 0 14px var(--accent-ink); }
.qz-theme b { font: var(--display-w) calc(19px * var(--display-scale)) / 1.2 var(--display); letter-spacing: var(--display-ls); }
.qz-theme.on b { color: var(--accent); }
.qz-actions { display: flex; align-items: center; gap: 16px; margin-top: 26px; }
.qz-go { height: 46px; padding: 0 22px; font-size: 15px; }
.qz-done { padding: 40px 0; }
.qz-done b { font: var(--display-w) calc(26px * var(--display-scale)) / 1.15 var(--display); letter-spacing: var(--display-ls); }
.qz-done p { margin: 10px 0 18px; }
.qz-q { display: flex; flex-direction: column; gap: 16px; max-width: 980px; }
.qz-top { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 13px; color: var(--muted); }
.qz-tag { padding: 3px 8px; border-radius: 4px; background: var(--surface-2); color: var(--text); font-size: 11.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.qz-score { margin-left: auto; }
.qz-late { color: var(--red); font-weight: 600; }
.qz-timer { height: 4px; border-radius: 2px; background: var(--surface-2); overflow: hidden; }
.qz-timer i { display: block; height: 100%; background: var(--accent); transform-origin: left; animation: qzTime linear forwards; }
@keyframes qzTime { from { transform: scaleX(1); } to { transform: scaleX(0); } }
.qz-body { display: flex; align-items: center; gap: 22px; min-height: 120px; }
.qz-img { width: 110px; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 8px; flex: none; background: var(--surface-2); }
.qz-body h3 { margin: 0; font: var(--display-w) calc(clamp(22px, 2.2vw, 28px) * var(--display-scale)) / 1.2 var(--display); letter-spacing: var(--display-ls); }
.qz-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.qz-choice { display: flex; align-items: center; gap: 12px; min-height: 54px; padding: 10px 14px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--surface); color: var(--text); font: 500 15px var(--font); text-align: left; cursor: pointer; transition: border-color .15s, background .15s; }
.qz-choice:hover { border-color: var(--line-2); background: var(--surface-2); }
.qz-choice kbd { flex: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 5px; border: 1px solid var(--line-2); font: 600 11px var(--font); color: var(--muted); }
.qz-choice:disabled { cursor: default; opacity: .55; }
.qz-choice.right { opacity: 1; border-color: var(--green); background: color-mix(in srgb, var(--green) 14%, var(--surface)); }
.qz-choice.wrong { opacity: 1; border-color: var(--red); background: color-mix(in srgb, var(--red) 14%, var(--surface)); }
.qz-detail { margin: 0; padding: 12px 14px; border-left: 2px solid var(--amber); background: var(--surface); font-size: 13.5px; line-height: 1.5; color: var(--muted); }
.qz-end { padding: 30px 0; }
.qz-big { display: block; font: var(--display-w) calc(84px * var(--display-scale)) / 1 var(--display); letter-spacing: var(--display-ls); }
.qz-big small { font-size: .35em; color: var(--muted); margin-left: 6px; }
.qz-end.win .qz-big { color: var(--accent); }
.qz-end p { margin: 14px 0 18px; font-size: 15px; }

/* écran de la roue */
.wheel-page { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: clamp(28px, 4vw, 64px); align-items: center; min-height: calc(100vh - var(--top-h) - 40px); }
.wheel-stage { display: grid; place-items: center; }
.wheel { position: relative; width: min(100%, calc(100vh - var(--top-h) - 90px), 700px); aspect-ratio: 1; }
.wheel-svg { width: 100%; height: 100%; display: block; overflow: visible; filter: drop-shadow(0 30px 40px rgba(0, 0, 0, 0.6)); }
.wheel-rim { fill: #15120e; stroke: #b9802a; stroke-width: 9; }
.bulb { fill: #6b5530; transition: fill .2s; }
.wheel.spinning .bulb { animation: bulb .32s steps(1) infinite; }
.wheel.spinning .bulb.b1 { animation-delay: .16s; }
@keyframes bulb { 0% { fill: #fff1c9; } 50% { fill: #6b5530; } }
.wheel:not(.spinning) .bulb { fill: #f2d9a6; }
.wheel-inner { fill: none; stroke: rgba(255, 220, 160, 0.18); stroke-width: .6; }
.ws path { stroke: #0e0d0b; stroke-width: .9; transition: fill .3s; }
.ws image { pointer-events: none; }
.ws-label { font: 700 5.6px var(--font); letter-spacing: .08em; fill: var(--text); }
.ws-glyph { font: 600 24px var(--font); fill: var(--faint); }
.ws-coin { fill: #b9802a; }
.ws-chibi path { fill: #23211c; }
.ws-badge path { fill: #2e2a22; }
.ws-badge2 path { fill: #3a3326; }
.ws-badge2 .ws-label { fill: #e6d3b0; }
.ws-miss path { fill: #151412; }
.ws-miss .ws-label { fill: var(--faint); }
.ws-again path { fill: #2a1912; }
.ws-again .ws-label, .ws-again .ws-glyph { fill: #ff8a6b; }
.ws-legend path { fill: #0b0b0b; }
.ws-legend .ws-label { fill: #f2c46a; }
.ws-legend .ws-coin { fill: #d8a032; }
.ws.hit path { animation: hit .9s ease-in-out 3; }
@keyframes hit { 50% { fill: #5a3f1c; } }
.wheel-hub { fill: #b9802a; stroke: #15120e; stroke-width: 3; cursor: pointer; transition: fill .15s; }
.wheel-hub:hover { fill: #d8a032; }
.wheel-hub-t { font: 700 15px var(--jp); fill: #15120e; pointer-events: none; }
.wheel-pin { position: absolute; z-index: 2; left: 50%; top: -2.5%; width: 7%; aspect-ratio: 3 / 4; margin-left: -3.5%; transform-origin: 50% 22%; background: var(--accent); clip-path: polygon(50% 100%, 0 30%, 8% 10%, 30% 0, 70% 0, 92% 10%, 100% 30%); filter: drop-shadow(0 4px 5px rgba(0, 0, 0, 0.6)); }
.wheel-side { display: flex; flex-direction: column; gap: 18px; }
.wheel-title { margin: 0; font: var(--display-w) calc(clamp(32px, 3.4vw, 44px) * var(--display-scale)) / 1 var(--display); letter-spacing: var(--display-ls); }
.wheel-title .jp { font-size: 13px; margin-left: 12px; }
.spin-box { display: flex; align-items: baseline; gap: 10px; padding: 14px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.spin-n { font: var(--display-w) calc(52px * var(--display-scale)) / 1 var(--display); letter-spacing: var(--display-ls); color: var(--accent); }
.spin-box span { color: var(--muted); font-size: 14px; }
.spin-btn { height: 50px; font-size: 15px; }
.spin-result { min-height: 40px; }
.won-head { font: var(--display-w) calc(24px * var(--display-scale)) / 1.2 var(--display); letter-spacing: var(--display-ls); margin: 0 0 14px; animation: wonIn .5s cubic-bezier(.2, 1.4, .4, 1) both; }
.won-head.legend { color: #f2c46a; }
.won-row { display: flex; gap: 20px; flex-wrap: wrap; margin-bottom: 12px; }
.won-row figure { margin: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; animation: wonIn .6s cubic-bezier(.2, 1.4, .4, 1) both; animation-delay: .12s; }
.won-row figcaption { font-size: 14px; font-weight: 600; line-height: 1.3; }
.won-row figcaption small { display: block; font-size: 10.5px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--rt, var(--muted)); }
.won-badge .medal-coin { display: block; width: 110px; aspect-ratio: 1; border-radius: 50%; padding: 5px; }
.won-badge .medal-coin img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }
.won-chibi img { height: 110px; width: auto; filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 0.5)); }
@keyframes wonIn { from { opacity: 0; transform: translateY(10px) scale(.9); } }
.odds { display: grid; gap: 7px; padding-top: 6px; }
.odd { display: grid; grid-template-columns: 12px 1fr auto; align-items: center; gap: 10px; font-size: 13px; color: var(--muted); }
.odd i { width: 10px; height: 10px; border-radius: 3px; background: #23211c; box-shadow: inset 0 0 0 1px var(--line-2); }
.odd b { font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
.odd-legend i { background: #0b0b0b; box-shadow: inset 0 0 0 1px #f2c46a; }
.odd-badge i { background: #2e2a22; }
.odd-badge2 i { background: #3a3326; }
.odd-again i { background: #2a1912; box-shadow: inset 0 0 0 1px #ff8a6b; }
.odd-miss i { background: #151412; }
@media (max-width: 1000px) {
  .wheel-page { grid-template-columns: 1fr; min-height: 0; }
  .wheel { width: min(100%, 520px); }
  .qz-themes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .qz-choices { grid-template-columns: 1fr; }
  .qz-img { width: 80px; }
}
@media (prefers-reduced-motion: reduce) { .qz-timer i { animation-timing-function: steps(5); } .wheel-link.ready .wl-mini { animation: none; } }

/* musée : pièces rares cachées tant qu'elles ne sont pas obtenues, exemplaires en double */
.r-legendaire { --rc: #111; --rc-hi: rgba(242, 196, 106, 0.55); --rt: #f2c46a; }
.r-bronze { --rt: #c98a50; } .r-argent { --rt: #c3c9d1; } .r-or { --rt: #e2b23f; }
.medal-cap small, .b3d-plaque .rarity { color: var(--rt); }
.medal.locked .medal-cap small { color: color-mix(in srgb, var(--rt) 60%, var(--faint)); }
.medal.mystery .medal-coin { background: var(--rc); box-shadow: inset 0 0 0 1px var(--rc-hi), 0 12px 22px -12px rgba(0, 0, 0, 0.9); }
.medal-q { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%; background: #050505; color: #3a3631; font: var(--display-w) calc(30px * var(--display-scale)) / 1 var(--display); letter-spacing: .04em; }
.medal.big .medal-q { font-size: 48px; }
.medal.mystery .medal-cap { color: var(--muted); }
.medal.mystery:hover .medal-coin { transform: translateY(-3px); }
.medal-n, .dex-n { position: absolute; right: -2px; bottom: 4px; z-index: 2; min-width: 26px; height: 22px; padding: 0 6px; display: grid; place-items: center; border-radius: 11px; background: var(--text); color: var(--bg); font: 700 11.5px var(--font); box-shadow: 0 3px 8px rgba(0, 0, 0, 0.5); }
.dex-n { top: 8px; right: 8px; bottom: auto; }

/* perchoir : chibis côte à côte, défilement continu */
.chibi-perch { --slot: auto; width: min(380px, 42%); -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); }
.perch-track img { width: auto; height: 82px; padding: 0; margin-right: -2px; object-fit: initial; }
@media (max-width: 900px) { .chibi-perch { width: 60%; } .perch-track img { height: 54px; } }


/* avatar (badge ou chibi) dans la barre du haut */
.avatar.has-img { padding: 0; overflow: hidden; background: var(--surface-2); }
.avatar img { width: 100%; height: 100%; display: block; }
.avatar img.av-badge { object-fit: cover; border-radius: 50%; }
.avatar img.av-chibi { object-fit: cover; object-position: 50% 18%; transform: scale(1.35); transform-origin: 50% 20%; }

/* Profil : en-tête, tableau de bord, collections en onglets */
.pf-hero { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: clamp(18px, 3vw, 40px); padding: 8px 0 26px; border-bottom: 1px solid var(--line); }
.pf-avatar { position: relative; width: 132px; height: 132px; border-radius: 50%; padding: 0; border: 1px solid var(--line-2); background: var(--surface); color: var(--muted); display: grid; place-items: center; cursor: pointer; overflow: visible; transition: border-color .15s, transform .25s cubic-bezier(.2, .8, .2, 1); }
.pf-avatar:hover { border-color: var(--muted); transform: translateY(-2px); }
.pf-avatar > .i { width: 48px; height: 48px; }
.pf-avatar img { width: 100%; height: 100%; border-radius: 50%; display: block; }
.pf-avatar img.av-badge { object-fit: cover; }
.pf-avatar img.av-chibi { object-fit: contain; border-radius: 0; filter: drop-shadow(0 10px 12px rgba(0, 0, 0, 0.5)); }
.pf-edit { position: absolute; right: 4px; bottom: 4px; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--text); color: var(--bg); box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5); }
.pf-edit .i { width: 15px; height: 15px; }
.pf-id h1 { margin: 2px 0 8px; font: var(--display-w) calc(clamp(32px, 3.6vw, 46px) * var(--display-scale)) / 1 var(--display); letter-spacing: var(--display-ls); }
.pf-id .qz-kicker .jp { margin-left: 10px; letter-spacing: 0; }
.pf-rings { display: flex; gap: clamp(16px, 2.5vw, 34px); }
.pf-ring { display: flex; align-items: center; gap: 12px; }
.pf-ring svg { width: 74px; height: 74px; transform: rotate(-90deg); }
.pf-ring circle { fill: none; stroke: var(--surface-3); stroke-width: 7; }
.pf-ring circle.fill { stroke: var(--accent); stroke-linecap: round; transition: stroke-dasharray .8s cubic-bezier(.2, .8, .2, 1); }
.pf-ring b { display: block; font: var(--display-w) calc(28px * var(--display-scale)) / 1 var(--display); letter-spacing: var(--display-ls); }
.pf-ring b small { font-size: .55em; color: var(--muted); }
.pf-ring span { font-size: 13px; color: var(--muted); }
.pf-board { display: grid; grid-template-columns: 4fr 3fr; gap: 22px; padding: 12px 0 12px; }
.pf-friends { padding: 0 0 26px; }
.pf-friends[hidden] { display: none; }
.pf-friends-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.pf-friends-head .qz-kicker small { color: var(--faint); margin-left: 4px; }
.pf-friends-head .link { display: inline-flex; align-items: center; gap: 5px; }
.pf-friends-head .link .i { width: 13px; height: 13px; }
.pf-friends-list { display: flex; flex-wrap: wrap; gap: 8px; }
.pf-friend { display: inline-flex; align-items: center; gap: 9px; padding: 5px 14px 5px 5px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--text); font-size: 14px; transition: border-color .15s, color .15s; }
.pf-friend:hover { border-color: var(--accent); color: var(--accent); }
.pf-friend .social-avatar { width: 32px; height: 32px; }
.pf-group .qz-kicker { margin-bottom: 8px; }
.pf-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 1px; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--line); }
.pf-tile { display: flex; flex-direction: column; gap: 3px; padding: 14px 16px; background: var(--bg); min-height: 86px; }
.pf-tile b { font: var(--display-w) calc(26px * var(--display-scale)) / 1.05 var(--display); letter-spacing: var(--display-ls); }
.pf-tile span { font-size: 12.5px; color: var(--muted); }
.pf-tile small { font-size: 11.5px; color: var(--faint); }
.pf-tabs { display: flex; gap: 26px; border-bottom: 1px solid var(--line); margin-bottom: 16px; }
.pf-tabs button { position: relative; padding: 0 0 12px; border: 0; background: none; color: var(--muted); font: var(--display-w) calc(22px * var(--display-scale)) / 1.1 var(--display); letter-spacing: var(--display-ls); cursor: pointer; transition: color .15s; }
.pf-tabs button small { font: 500 12px var(--font); letter-spacing: 0; color: var(--faint); margin-left: 6px; }
.pf-tabs button:hover, .pf-tabs button.on { color: var(--text); }
.pf-tabs button.on::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--accent); }
.mu-top { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(20px, 4vw, 56px); align-items: center; margin-bottom: 24px; }
.mu-legend { display: flex; align-items: center; gap: 20px; }
.mu-legend .medal.big .medal-coin { width: 132px; }
.mu-legend b { display: block; font: var(--display-w) calc(24px * var(--display-scale)) / 1.1 var(--display); letter-spacing: var(--display-ls); color: #f2c46a; }
.mu-legend p { margin: 4px 0 0; }
.mu-legend.locked b { color: var(--muted); } /* pas obtenue : visible et cliquable, mais en retrait */
.mu-tiers { display: grid; gap: 10px; max-width: 520px; }
.tier { display: grid; grid-template-columns: 74px 1fr 62px; align-items: center; gap: 12px; font-size: 13px; }
.tier span { color: var(--rt); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; font-size: 11.5px; }
.tier i { height: 6px; border-radius: 3px; background: linear-gradient(90deg, var(--rc) calc(var(--f) * 100%), var(--surface-3) 0); }
.tier b { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.mu-tiers p { margin: 4px 0 0; }
.mu-series { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
.mu-chip { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 14px; border-radius: 17px; border: 1px solid var(--line); background: none; color: var(--muted); font: 500 13px var(--font); cursor: pointer; transition: color .15s, border-color .15s, background .15s; }
.mu-chip small { font-size: 11.5px; color: var(--faint); font-variant-numeric: tabular-nums; }
.mu-chip:hover { color: var(--text); border-color: var(--line-2); }
.mu-chip.on { color: var(--text); border-color: var(--text); background: var(--surface); }
.pf-panel .hall-row { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 26px 20px; }
/* profils : toute une série de pièces sur une ligne, pastilles des séries plus fines (la page tient dans l'écran) */
.profile-page .pf-panel .hall-row { grid-template-columns: repeat(auto-fill, minmax(86px, 1fr)); gap: 16px 12px; }
.profile-page .pf-panel .medal { gap: 6px; }
.profile-page .pf-panel .medal-cap { font-size: 12px; }
.profile-page .mu-series { gap: 6px; margin-bottom: 16px; }
.profile-page .mu-chip { height: 30px; padding: 0 11px; gap: 6px; font-size: 12.5px; }
.pf-panel .dex-grid { grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; }
.pf-panel .dex { padding: 22px 6px 10px; }
.pf-panel .dex img { width: 76px; height: 76px; }
.pf-panel .dex b { font-size: 12.5px; }
@media (max-width: 1000px) {
  .pf-hero { grid-template-columns: auto minmax(0, 1fr); }
  .pf-rings { grid-column: 1 / -1; }
  .pf-board { grid-template-columns: 1fr; }
  .mu-top { grid-template-columns: 1fr; }
}
@media (max-width: 600px) { .pf-avatar { width: 96px; height: 96px; } }

/* choix de l'avatar */
.av-pick { padding: 28px; }
.av-pick h2 { margin: 0 0 4px; font: var(--display-w) calc(26px * var(--display-scale)) / 1.1 var(--display); letter-spacing: var(--display-ls); }
.av-pick h3 { margin: 22px 0 10px; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.av-pick h3 small { margin-left: 6px; color: var(--faint); }
.av-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 10px; }
.av-opt { aspect-ratio: 1; padding: 6px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); cursor: pointer; transition: border-color .15s, transform .2s; }
.av-opt img { width: 100%; height: 100%; object-fit: contain; display: block; }
.av-opt.coin { border-radius: 50%; padding: 4px; background: var(--rc); border-color: transparent; }
.av-opt.coin img { border-radius: 50%; object-fit: cover; }
.av-opt:hover { transform: translateY(-2px); border-color: var(--line-2); }
.av-opt.on { outline: 2px solid var(--accent); outline-offset: 2px; }
.av-reset { margin-top: 20px; }

/* perchoir : aucun effet au survol, flou à la sortie à gauche */
.chibi-perch img:hover { transform: none; }
.chibi-perch .perch-track img { transition: none; }
.chibi-perch .perch-track img:not(.shadow) { filter: blur(var(--bl, 0px)) drop-shadow(0 3px 4px rgba(0, 0, 0, 0.5)); }
.chibi-perch .perch-track img.shadow { filter: blur(var(--bl, 0px)) brightness(0) drop-shadow(0 0 1px rgba(255, 255, 255, 0.45)) drop-shadow(0 0 1px rgba(255, 255, 255, 0.25)); }

/* roue v3 : cases découpées, vignettes sans cerclage, bandeau d'ampoules, colonne de droite plus grande */
.wheel-page { grid-template-columns: minmax(0, 1fr) minmax(380px, 480px); }
.wheel-rim { display: none; }
.wheel-band { fill: none; stroke: #1c1813; stroke-width: 11; }
.wheel-line { fill: none; stroke: #b9802a; stroke-width: 1.6; }
.wheel-ring { fill: none; stroke: rgba(255, 220, 160, 0.08); stroke-width: .6; }
.wheel-inner { display: none; }
.wheel-seps line { stroke: rgba(216, 160, 50, 0.45); stroke-width: .7; }
.ws path { stroke: none; }
.ws image { filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.6)); }
.ws-label { font: 700 5.2px var(--font); letter-spacing: .1em; }
.ws-glyph { font: 500 19px var(--font); }
.ws-chibi path { fill: #201e19; }
.ws-badge path { fill: #2a2620; }
.ws-badge2 path { fill: #353026; }
.ws-miss path { fill: #141311; }
.ws-again path { fill: #26170f; }
.ws-legend path { fill: #0a0a0a; }
.wheel-hub { fill: #15120e; stroke: #b9802a; stroke-width: 1.6; cursor: pointer; transition: fill .15s; }
.wheel-hub:hover { fill: #221d16; }
.wheel-hub-in { fill: #b9802a; pointer-events: none; }
.wheel-hub-t { font: 700 13px var(--jp); fill: #15120e; }
.wheel-side { gap: 22px; }
.wheel-title { font-size: calc(clamp(40px, 4vw, 56px) * var(--display-scale)); }
.spin-box { padding: 18px 0; }
.spin-n { font-size: calc(76px * var(--display-scale)); }
.spin-box span { font-size: 16px; }
.spin-btn { height: 58px; font-size: 17px; }
.won-head { font-size: calc(28px * var(--display-scale)); }
.won-badge .medal-coin { width: 132px; }
.won-chibi img { height: 132px; }
.won-row figcaption { font-size: 15px; }
.odds { gap: 9px; }
.odds .qz-kicker { margin-bottom: 4px; }
.odd { font-size: 15px; grid-template-columns: 14px 1fr auto; }
.odd i { width: 12px; height: 12px; }

/* musée : pièces cachées avec le même cerclage discret que les Bronze, seule la couleur change */
.medal.mystery .medal-coin { background: #3d3934; box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--rc) 45%, transparent), 0 12px 22px -12px rgba(0, 0, 0, 0.9); }
.r-legendaire.medal.mystery .medal-coin { box-shadow: inset 0 0 0 2px rgba(242, 196, 106, 0.3), 0 12px 22px -12px rgba(0, 0, 0, 0.9); }
.medal-q { background: #1a1816; color: #4a463f; }
.medal.mystery .medal-cap { color: var(--faint); }
.medal.mystery .medal-cap small { color: color-mix(in srgb, var(--rt) 60%, var(--faint)); }

/* perchoir : chibis un peu plus espacés */
.perch-track img { margin-right: 8px; }
.chibi-perch { width: min(430px, 44%); }

/* avatar : chibi posé au bas du cercle (rien ne dépasse), cadre de rareté pour un badge */
.pf-av-in { position: absolute; inset: 0; border-radius: 50%; overflow: hidden; display: grid; place-items: center; color: var(--muted); }
.pf-av-in > .i { width: 48px; height: 48px; }
.pf-avatar img.av-chibi { position: absolute; left: 50%; bottom: 0; width: auto; height: 86%; max-width: 100%; object-fit: contain; object-position: 50% 100%; border-radius: 0; transform: translateX(-50%); filter: none; }
.pf-avatar img.av-badge { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.pf-avatar.framed { background: var(--rc); border-color: transparent; box-shadow: inset 0 0 0 1px var(--rc-hi), 0 14px 26px -14px rgba(0, 0, 0, 0.9); }
.pf-avatar.framed .pf-av-in { inset: 6px; }
.avatar img.av-chibi { width: 100%; height: 100%; object-fit: cover; object-position: 50% 6%; transform: none; }
.avatar.framed { border: 2px solid var(--rc); padding: 1px; }
.avatar.framed img { border-radius: 50%; }
.r-legendaire.framed { box-shadow: inset 0 0 0 1px rgba(242, 196, 106, 0.6); }

/* sélecteur d'avatar : large et sans défilement */
.modal.av-modal { width: min(1240px, 96vw); }
.av-pick { padding: 18px 26px 22px; }
.av-pick h2 { margin: 0; font-size: calc(22px * var(--display-scale)); }
.av-pick > p { margin: 2px 0 0; font-size: 13px; }
.av-pick h3 { margin: 14px 0 8px; }
.av-grid { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.av-opt { padding: 4px; }

/* profil : tuiles Visionnage et Jeu à la même hauteur, compactes pour que le haut du profil tienne dans l'écran */
.pf-tile { height: 78px; min-height: 0; justify-content: flex-start; padding: 10px 14px; gap: 2px; }
.pf-tile b { font-size: calc(22px * var(--display-scale)); }
.pf-tile small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.av-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin: 0 40px 14px 0; }
.av-tabs small { margin-left: 4px; color: var(--faint); }
.av-panel .av-grid { max-height: calc(100vh - 230px); overflow-y: auto; padding: 4px; margin: -4px; }
.av-reset { margin-top: 14px; }

/* pièces en métal (partout où il y a un badge) : anneau à reflets, biseau, éclat qui suit la souris */
.r-bronze { --m1: #4a2810; --m2: #a3612b; --m3: #f6c896; }
.r-argent { --m1: #50565f; --m2: #b4bcc7; --m3: #ffffff; }
.r-or { --m1: #6a440a; --m2: #cf9622; --m3: #fff2b8; }
.r-legendaire { --m1: #020202; --m2: #1b1a18; --m3: #f2c46a; }
.metal, .medal:not(.locked) .medal-coin, .won-badge .medal-coin, .av-opt.coin, .pf-avatar.framed, .avatar.framed {
  background: conic-gradient(from 210deg, var(--m2), var(--m3) 7%, var(--m2) 16%, var(--m1) 30%, var(--m2) 43%, var(--m3) 52%, var(--m2) 60%, var(--m1) 76%, var(--m2) 88%, var(--m3) 95%, var(--m2));
  box-shadow: inset 0 1.5px 1px rgba(255, 255, 255, 0.55), inset 0 -2px 3px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(0, 0, 0, 0.55), 0 16px 26px -14px rgba(0, 0, 0, 0.95);
}
.medal:not(.locked) .medal-coin img, .won-badge .medal-coin img, .av-opt.coin img, .rv-front img { box-shadow: 0 0 0 1.5px rgba(0, 0, 0, 0.55), inset 0 0 0 1px rgba(255, 255, 255, 0.2); }
/* éclat : reflet clair sur la face, déplacé par la souris */
.medal:not(.locked) .medal-coin::after, .won-badge .medal-coin::after, .rv-front::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle at var(--lx, 32%) var(--ly, 24%), rgba(255, 255, 255, 0.38), rgba(255, 255, 255, 0.08) 28%, transparent 52%), linear-gradient(135deg, rgba(255, 255, 255, 0.14), transparent 40%, transparent 70%, rgba(0, 0, 0, 0.18));
  mix-blend-mode: soft-light;
}
.won-badge .medal-coin { position: relative; }
.medal:not(.locked):hover .medal-coin, .medal-coin.tilt { transform: perspective(520px) rotateX(var(--tx, 0deg)) rotateY(var(--ty, 0deg)) translateY(-4px) scale(1.04); transition: transform .12s ease-out; }
.medal:not(.locked) .medal-coin:not(.tilt) { transition: transform .5s cubic-bezier(.2, .8, .2, 1); }
.r-legendaire.metal::before, .medal.r-legendaire:not(.locked) .medal-coin::before { content: ""; position: absolute; inset: -3px; border-radius: 50%; pointer-events: none; box-shadow: 0 0 22px rgba(242, 196, 106, 0.35); }
.av-opt.coin { padding: 5px; }
.pf-avatar.framed .pf-av-in { box-shadow: 0 0 0 1.5px rgba(0, 0, 0, 0.55); }
.avatar.framed { border: 0; padding: 2.5px; }

/* révélation d'un gain */
.reveal { --glow: #e6edf6; --charge: .25; position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; align-content: center; gap: 26px; background: rgba(6, 5, 4, 0.94); opacity: 0; transition: opacity .25s; cursor: default; }
.reveal.in { opacity: 1; }
.reveal::after { content: ""; position: fixed; inset: 0; background: #fff; opacity: 0; pointer-events: none; }
.reveal.open::after { animation: rvFlash .55s ease-out; }
.reveal.open.r-legendaire::after, .reveal.open.r-or::after { animation-duration: .9s; }
@keyframes rvFlash { 0% { opacity: .85; } 100% { opacity: 0; } }
.rv-fx { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; }
.rv-stage { position: relative; width: min(340px, 70vw); aspect-ratio: 1; display: grid; place-items: center; perspective: 1100px; }
.rv-glow { position: absolute; inset: -40%; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--glow) 70%, transparent), transparent 62%); opacity: calc(var(--charge) * .9); transform: scale(calc(.6 + var(--charge) * .5)); transition: background .4s; animation: rvPulse 1s ease-in-out infinite; filter: blur(6px); }
.reveal[data-lvl="2"] .rv-glow, .reveal[data-lvl="3"] .rv-glow { animation-duration: .45s; }
@keyframes rvPulse { 50% { transform: scale(calc(.68 + var(--charge) * .55)); } }
.rv-rays { position: absolute; inset: -70%; border-radius: 50%; background: repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--glow) 55%, transparent) 0deg 6deg, transparent 6deg 22deg); -webkit-mask-image: radial-gradient(circle, #000 18%, transparent 62%); mask-image: radial-gradient(circle, #000 18%, transparent 62%); opacity: 0; transition: opacity .6s; animation: rvRays 14s linear infinite; }
.reveal.open .rv-rays { opacity: .9; }
.reveal.r-bronze.open .rv-rays { opacity: .45; }
@keyframes rvRays { to { transform: rotate(360deg); } }
.rv-coin { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; }
.rv-face { position: absolute; inset: 0; border-radius: 50%; backface-visibility: hidden; -webkit-backface-visibility: hidden; padding: 4.5%; }
.rv-back { display: grid; place-items: center; background: conic-gradient(from 210deg, #3a352d, #8a8170 8%, #3a352d 18%, #15130f 32%, #3a352d 45%, #8a8170 53%, #3a352d 62%, #15130f 78%, #3a352d 90%, #8a8170 96%, #3a352d); box-shadow: inset 0 2px 2px rgba(255, 255, 255, 0.35), inset 0 -3px 4px rgba(0, 0, 0, 0.6); }
.rv-back span { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%; background: #17140f; box-shadow: inset 0 0 0 2px rgba(216, 150, 46, 0.25), inset 0 0 40px rgba(0, 0, 0, 0.8); color: #d8962e; font: 700 clamp(80px, 16vw, 130px) / 1 var(--jp); text-shadow: 0 2px 0 rgba(0, 0, 0, 0.6); }
.rv-front { transform: rotateY(180deg); }
.rv-front img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }
.rv-chibi { width: 100%; height: 100%; display: grid; place-items: center; }
.rv-chibi img { max-width: 100%; max-height: 100%; object-fit: contain; filter: brightness(0) drop-shadow(0 0 2px rgba(255, 255, 255, 0.5)); transition: filter .5s ease-out; }
.reveal.open .rv-chibi img { filter: drop-shadow(0 18px 24px rgba(0, 0, 0, 0.6)); }
.rv-text { position: relative; z-index: 3; text-align: center; opacity: 0; transform: translateY(12px); transition: opacity .4s .5s, transform .5s .5s cubic-bezier(.2, 1.4, .4, 1); }
.reveal.open .rv-text { opacity: 1; transform: none; }
.rv-text small { display: block; font: 600 12px var(--font); letter-spacing: .16em; text-transform: uppercase; color: var(--rt, var(--muted)); }
.reveal.r-legendaire .rv-text small { color: #f2c46a; }
.rv-text b { display: block; margin-top: 6px; font: var(--display-w) calc(clamp(30px, 4vw, 46px) * var(--display-scale)) / 1.1 var(--display); letter-spacing: var(--display-ls); }
.rv-next { position: relative; z-index: 3; opacity: 0; transition: opacity .3s .9s; }
.reveal.open .rv-next { opacity: 1; }
.reveal.open.r-legendaire .rv-stage { animation: rvQuake .5s; }
@keyframes rvQuake { 20% { transform: translate(-6px, 3px); } 40% { transform: translate(5px, -4px); } 60% { transform: translate(-3px, 2px); } 80% { transform: translate(2px, -1px); } }
.chibi-perch { -webkit-mask-image: linear-gradient(90deg, transparent, #000 2%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 2%, #000 88%, transparent); }
.reveal { gap: 44px; }
.medal:not(.locked) .medal-coin { padding: 7%; } .won-badge .medal-coin { padding: 7%; }

/* révélation 3D : la pièce tombe, rebondit (onde au sol), monte en rareté puis se dévoile */
.rv-stage.rv-3d { width: min(560px, 86vw, 64vh); }
.rv-canvas { position: relative; z-index: 1; width: 100%; height: 100%; }
.rv-canvas canvas { width: 100%; height: 100%; display: block; cursor: grab; }
.rv-flat { width: 78%; aspect-ratio: 1; margin: 11% auto; border-radius: 50%; padding: 5%; position: relative; }
.rv-flat img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }
.rv-dust { position: absolute; left: 50%; top: 50%; width: 70%; aspect-ratio: 1; margin: -35% 0 0 -35%; border-radius: 50%; border: 3px solid color-mix(in srgb, var(--glow) 70%, #fff); opacity: 0; pointer-events: none; }
.reveal.impact .rv-dust { animation: rvWave .6s ease-out; }
@keyframes rvWave { 0% { opacity: .8; transform: scale(.7); } 100% { opacity: 0; transform: scale(1.6); } }
.reveal.impact .rv-stage { animation: rvQuake .4s; }
.rv-3d .rv-glow { inset: -15%; }

/* profil : moins d'espace en haut, barre compacte collée sous la navigation au défilement */
.profile-page { padding-top: calc(var(--top-h) + 16px); padding-bottom: 20px; }
.privacy-notice { display: flex; align-items: center; gap: 10px; margin: 0 0 18px; padding: 12px 15px; border: 1px solid rgba(226, 185, 94, .35); border-radius: 10px; color: #e2b95e; background: rgba(226, 185, 94, .07); font-size: 13px; }
.privacy-notice .i { width: 17px; height: 17px; }
.public-profile .pf-avatar:disabled { cursor: default; }
.public-profile .pf-avatar:disabled:hover { transform: none; border-color: var(--line-2); }
.public-profile .pf-mini-tabs button { white-space: nowrap; }
/* étagères « En ce moment » et « Favoris » : petites affiches en ligne */
.pu-shelves { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 22px; padding: 0 0 10px; }
.pu-shelf { min-width: 0; }
.pu-shelf-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.pu-shelf-head .qz-kicker small { color: var(--faint); margin-left: 4px; }
.pu-shelf-head .link { display: inline-flex; align-items: center; gap: 4px; }
.pu-shelf-head .link .i { width: 13px; height: 13px; }
.pu-shelf-row { display: grid; grid-auto-flow: column; grid-auto-columns: 52px; gap: 8px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: thin; }
.pu-poster { display: flex; flex-direction: column; gap: 3px; min-width: 0; color: inherit; text-decoration: none; }
.pu-poster-cover { position: relative; display: block; aspect-ratio: 2 / 3; overflow: hidden; border-radius: 8px; background: var(--surface-2); border: 1px solid var(--line); transition: transform .2s cubic-bezier(.2, .8, .2, 1), border-color .15s; }
.pu-poster:hover .pu-poster-cover { transform: translateY(-3px); border-color: var(--line-2); }
.pu-poster-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pu-poster-cover i { position: absolute; left: 0; bottom: 0; height: 3px; width: calc(var(--f) * 100%); background: var(--accent); }
.pu-poster b { margin-top: 4px; font-size: 12.5px; font-weight: 600; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pu-poster small { font-size: 11.5px; color: var(--faint); }
.pu-poster b, .pu-poster small { display: none; }
.public-library-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 22px; }
.public-library-filter { flex-wrap: wrap; }
.grid.fit-grid { gap: 18px 16px; overflow-y: auto; scrollbar-width: none; justify-content: start; }
.grid.fit-grid::-webkit-scrollbar { display: none; }
.public-library-head { margin-bottom: 14px; }
.public-favorite { position: absolute; top: 9px; left: 9px; z-index: 2; display: grid; place-items: center; width: 27px; height: 27px; border-radius: 50%; color: #f4cf64; background: rgba(15, 14, 12, .82); box-shadow: 0 3px 10px rgba(0, 0, 0, .3); }
@media (max-width: 760px) {
  .public-library-head { align-items: flex-start; flex-direction: column; }
}
.pf-hero { padding-top: 0; padding-bottom: 12px; }
.pf-hero .pf-avatar:not(.pf-avatar-mini) { width: 96px; height: 96px; }
.pf-hero .pf-avatar > .i { width: 38px; height: 38px; }
.pf-hero .pf-id h1 { font-size: calc(clamp(28px, 3vw, 38px) * var(--display-scale)); margin-bottom: 6px; }
.pf-hero .pf-ring svg { width: 60px; height: 60px; }
.pf-hero .pf-ring b { font-size: calc(24px * var(--display-scale)); }
.pf-mini { position: fixed; z-index: 40; left: 0; right: 0; top: var(--top-h); background: color-mix(in srgb, var(--bg) 94%, transparent); border-bottom: 1px solid var(--line); transform: translateY(-110%); opacity: 0; pointer-events: none; transition: transform .3s cubic-bezier(.2, .8, .2, 1), opacity .2s; }
.pf-mini.show { transform: none; opacity: 1; pointer-events: auto; }
.pf-mini-in { display: flex; align-items: center; gap: clamp(12px, 2vw, 26px); height: 60px; }
.pf-avatar.pf-avatar-mini { width: 40px; height: 40px; cursor: default; }
.pf-avatar-mini:hover { transform: none; }
.pf-avatar-mini.framed .pf-av-in { inset: 3px; }
.pf-avatar-mini .pf-av-in > .i { width: 18px; height: 18px; }
.pf-mini-title { font: var(--display-w) calc(19px * var(--display-scale)) / 1 var(--display); letter-spacing: var(--display-ls); margin-right: 6px; }
.pf-mini-stat { font-size: 13px; color: var(--muted); white-space: nowrap; }
.pf-mini-stat b { color: var(--text); font-weight: 700; margin-right: 2px; }
.pf-mini-tabs { margin-left: auto; display: flex; gap: 4px; }
.pf-mini-tabs button { height: 32px; padding: 0 12px; border-radius: 6px; border: 0; background: none; color: var(--muted); font: 500 13px var(--font); cursor: pointer; }
.pf-mini-tabs button.on { background: var(--surface-3); color: var(--text); }
@media (max-width: 900px) { .pf-mini-stat:nth-of-type(n+3) { display: none; } }

/* roue : résultat en une ligne + lien vers la collection */
.won-list { display: flex; flex-direction: column; gap: 4px; margin: 0 0 14px; }
.won-list span { font-size: 16px; }
.won-list small { font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--rt, var(--muted)); margin-left: 4px; }
/* pièces du musée un peu plus fines, toutes inclinables */
.medal:not(.locked) .medal-coin, .won-badge .medal-coin { padding: 5%; }
.medal .medal-coin { transition: transform .5s cubic-bezier(.2, .8, .2, 1); }
.medal:hover .medal-coin, .medal .medal-coin.tilt { transform: perspective(520px) rotateX(var(--tx, 0deg)) rotateY(var(--ty, 0deg)) translateY(-3px); }
.medal .medal-coin.tilt { transition: transform .12s ease-out; }
/* perchoir : aucun fondu ni flou à gauche, fondu à droite seulement */
.chibi-perch { -webkit-mask-image: linear-gradient(90deg, #000 0, #000 88%, transparent); mask-image: linear-gradient(90deg, #000 0, #000 88%, transparent); }
.chibi-perch .perch-track img:not(.shadow) { filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.5)); }
.chibi-perch .perch-track img.shadow { filter: brightness(0) drop-shadow(0 0 1px rgba(255, 255, 255, 0.45)) drop-shadow(0 0 1px rgba(255, 255, 255, 0.25)); }

/* révélation 3D plein écran : la pièce tombe au centre, lueur et rayons derrière elle, texte dessous */
.reveal.is-3d { display: block; }
.reveal.is-3d .rv-canvas { position: fixed; inset: 0; width: auto; height: auto; z-index: 1; }
.reveal.is-3d .rv-stage { position: fixed; left: 50%; top: 44.7%; width: min(620px, 74vh); transform: translate(-50%, -50%); z-index: 0; }
.reveal.is-3d .rv-text { position: fixed; left: 0; right: 0; top: 76vh; }
.reveal.is-3d .rv-next { position: fixed; left: 50%; top: 88vh; transform: translateX(-50%); }
.reveal.is-3d.impact .rv-stage { animation: none; }
.reveal.is-3d.impact .rv-canvas { animation: rvQuake .4s; }
/* vitrine : description et chance d'obtention */
.b3d-desc { display: block !important; margin: 10px 0 0 !important; font-size: 14px !important; line-height: 1.5; color: var(--muted); }
.b3d-odds { display: block; margin-top: 10px; font-size: 12px; color: var(--faint); }
/* sol éclairé sous la pièce, pour que son ombre se voie */
.rv-floor { display: none; }
.reveal.is-3d { background: rgba(6, 5, 4, 0.97); }
.reveal.is-3d .rv-floor { display: block; position: fixed; left: 50%; top: 75vh; width: min(760px, 92vw); height: 16vh; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--glow) 26%, rgba(255, 240, 220, 0.14)), transparent); pointer-events: none; transition: background .5s; }
.reveal.is-3d .rv-text { top: 81vh; }
.reveal.is-3d .rv-next { top: 91vh; }

/* mise en page calée sur la pièce (--cx, --cy, --cr fournis par la scène 3D) */
.reveal.is-3d { --cx: 50vw; --cy: 45vh; --cr: 26vh; }
.reveal.is-3d .rv-stage { left: var(--cx); top: var(--cy); width: calc(var(--cr) * 2.5); }
.reveal.is-3d .rv-floor { left: var(--cx); top: calc(var(--cy) + var(--cr) * 1.04); width: calc(var(--cr) * 4.2); height: calc(var(--cr) * 0.75); }
.reveal.is-3d .rv-text { top: calc(var(--cy) + var(--cr) * 1.32); }
.reveal.is-3d .rv-next { top: calc(var(--cy) + var(--cr) * 1.32 + 92px); }
.reveal.is-3d .rv-flat { position: fixed; left: var(--cx); top: var(--cy); width: calc(var(--cr) * 2); margin: 0; transform: translate(-50%, -50%); }

/* révélation : gros texte penché de la rareté, au-dessus de la pièce */
.rv-tier { position: fixed; z-index: 3; left: var(--cx); top: calc(var(--cy) - var(--cr) - 10px); text-align: center; white-space: nowrap; pointer-events: none; opacity: 0; transform: translate(-50%, -100%) skewX(-12deg) rotate(-5deg); }
.rv-tier b { display: block; font: 900 italic calc(clamp(46px, 7vw, 96px) * var(--display-scale)) / .9 var(--display); letter-spacing: -.02em; text-transform: uppercase; color: var(--rt); -webkit-text-stroke: 1px rgba(0, 0, 0, 0.35); text-shadow: 0 5px 0 rgba(0, 0, 0, 0.55), 0 0 34px color-mix(in srgb, var(--glow) 65%, transparent); }
.rv-tier small { display: block; margin-top: 6px; font: 700 13px var(--font); letter-spacing: .16em; text-transform: uppercase; color: var(--text); opacity: .85; }
.rv-tier.r-legendaire b { color: #f2c46a; background: linear-gradient(90deg, #f2c46a, #ff5a3c, #f2c46a); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.rv-tier.slam { animation: rvSlam .55s cubic-bezier(.2, 1.5, .4, 1) forwards; }
@keyframes rvSlam {
  0% { opacity: 0; transform: translate(-50%, -100%) skewX(-12deg) rotate(-5deg) scale(2.4); }
  60% { opacity: 1; }
  100% { opacity: 1; transform: translate(-50%, -100%) skewX(-12deg) rotate(-5deg) scale(1); }
}
.reveal.open .rv-tier { transition: opacity .4s; }

/* révélation : bloc de textes au-dessus de la pièce (jamais dessus), bouton en dessous */
.reveal.is-3d .rv-head { position: fixed; z-index: 3; left: var(--cx); top: calc(var(--cy) - var(--cr) - 22px); transform: translate(-50%, -100%); display: flex; flex-direction: column; align-items: center; gap: 4px; width: min(92vw, 900px); pointer-events: none; }
.reveal.is-3d .rv-head .rv-tier { position: static; transform: skewX(-12deg) rotate(-4deg); min-height: calc(clamp(46px, 7vw, 96px) * .9 + 24px); }
.reveal.is-3d .rv-head .rv-tier.slam { animation: rvSlam2 .55s cubic-bezier(.2, 1.5, .4, 1) forwards; }
@keyframes rvSlam2 { 0% { opacity: 0; transform: skewX(-12deg) rotate(-4deg) scale(2.4); } 60% { opacity: 1; } 100% { opacity: 1; transform: skewX(-12deg) rotate(-4deg) scale(1); } }
.rv-series { min-height: 30px; font: var(--display-w) calc(24px * var(--display-scale)) / 1.2 var(--display); letter-spacing: .02em; text-transform: uppercase; color: var(--text); opacity: 0; }
.rv-series.slam { animation: rvSeries .6s cubic-bezier(.2, 1.4, .4, 1) forwards; }
@keyframes rvSeries { 0% { opacity: 0; transform: translateY(-14px); letter-spacing: .4em; } 100% { opacity: .9; transform: none; letter-spacing: .06em; } }
.reveal.is-3d .rv-head .rv-text { position: static; min-height: 64px; }
.reveal.is-3d .rv-head .rv-text b { font-size: calc(clamp(26px, 3.4vw, 40px) * var(--display-scale)); }
.reveal.is-3d .rv-next { top: calc(var(--cy) + var(--cr) * 1.12 + 26px); }
.reveal.is-3d .rv-floor { top: calc(var(--cy) + var(--cr) * 1.04); }

/* révélation : rareté collée au-dessus de la pièce, le reste en dessous */
.reveal.is-3d .rv-head { top: calc(var(--cy) - var(--cr) - 4px); }
.reveal.is-3d .rv-head .rv-tier { min-height: 0; }
.reveal.is-3d .rv-foot { position: fixed; z-index: 3; left: var(--cx); top: calc(var(--cy) + var(--cr) * 1.08 + 8px); transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 10px; width: min(92vw, 900px); pointer-events: none; }
.reveal.is-3d .rv-foot .rv-text { position: static; min-height: 0; }
.reveal.is-3d .rv-foot .rv-text b { font-size: calc(clamp(26px, 3.2vw, 38px) * var(--display-scale)); margin-top: 2px; }
.reveal.is-3d .rv-next { top: auto; bottom: 4vh; }
/* nom de l'anime : cartouche gravé aux couleurs de la rareté */
.rv-series { min-height: 0; opacity: 0; font: inherit; letter-spacing: 0; text-transform: none; }
.rv-series span { display: inline-flex; align-items: center; gap: 14px; padding: 7px 18px; border-radius: 4px; border: 1px solid color-mix(in srgb, var(--rt, #e6d3b0) 55%, transparent); background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(0, 0, 0, 0.35)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 8px 18px -10px rgba(0, 0, 0, 0.9); font: 700 14px var(--font); letter-spacing: .22em; text-transform: uppercase; color: var(--rt, #e6d3b0); }
.rv-series span::before, .rv-series span::after { content: ""; width: 18px; height: 1px; background: currentColor; opacity: .6; }
.rv-series.slam { animation: rvSeries2 .6s cubic-bezier(.2, 1.4, .4, 1) forwards; }
@keyframes rvSeries2 { 0% { opacity: 0; transform: translateY(10px) scale(.92); } 100% { opacity: 1; transform: none; } }
.reveal.is-3d .rv-head { top: calc(var(--cy) - var(--cr) - 26px); }
.reveal.is-3d .rv-next { top: calc(var(--cy) + var(--cr) * 1.08 + 118px); bottom: auto; }
.reveal.is-3d .rv-foot .rv-text b { margin-top: 10px; }
.reveal.is-3d .rv-next { top: calc(var(--cy) + var(--cr) * 1.08 + 134px); }

/* gros plan sur la pièce gagnée : elle seule, le reste s'efface, la page derrière est floutée */
.reveal.is-3d { transition: opacity .25s, background .45s, backdrop-filter .45s, -webkit-backdrop-filter .45s; }
.reveal.is-3d.focus { background: rgba(6, 5, 4, 0.5); -webkit-backdrop-filter: blur(18px) saturate(.85); backdrop-filter: blur(18px) saturate(.85); }
.reveal.is-3d .rv-head, .reveal.is-3d .rv-foot, .reveal.is-3d .rv-floor, .reveal.is-3d .rv-stage, .reveal.is-3d .rv-fx { transition: opacity .35s; }
.reveal.is-3d.focus .rv-head, .reveal.is-3d.focus .rv-foot, .reveal.is-3d.focus .rv-next, .reveal.is-3d.focus .rv-floor, .reveal.is-3d.focus .rv-stage, .reveal.is-3d.focus .rv-fx { opacity: 0 !important; pointer-events: none; }
.reveal.is-3d.open.over-coin .rv-canvas canvas { cursor: zoom-in; }
.reveal.is-3d.focus .rv-canvas canvas { cursor: zoom-out; }
/* perchoir : taille propre à chaque chibi (même masse visuelle), bustes posés à plat sans ombre décalée */
.chibi-perch .perch-track img { height: calc(var(--ph, 82) * 1px); }
.chibi-perch .perch-track img.flat:not(.shadow) { filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.45)); }
@media (max-width: 900px) { .chibi-perch .perch-track img { height: calc(var(--ph, 82) * .66px); } }
/* perchoir : de la fin du titre au bord droit ; au bout gauche, fondu et flou (les chibis s'en vont) */
.chibi-perch { width: auto; right: 8px; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14%, #000 95%, transparent); mask-image: linear-gradient(90deg, transparent 0, #000 14%, #000 95%, transparent); }
.chibi-perch .perch-track img:not(.shadow) { filter: blur(var(--bl, 0px)) drop-shadow(0 3px 4px rgba(0, 0, 0, 0.5)); }
.chibi-perch .perch-track img.flat:not(.shadow) { filter: blur(var(--bl, 0px)) drop-shadow(0 0 3px rgba(0, 0, 0, 0.45)); }
.chibi-perch .perch-track img.shadow { filter: blur(var(--bl, 0px)) brightness(0) drop-shadow(0 0 1px rgba(255, 255, 255, 0.45)) drop-shadow(0 0 1px rgba(255, 255, 255, 0.25)); }
@media (max-width: 900px) { .chibi-perch { width: auto; } }
/* perchoir : net jusqu'au bout de la ligne des compteurs, puis fondu au-delà ; même fondu doux côté titre, sans flou */
.chibi-perch { right: -48px; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 48px, #000 calc(100% - 48px), transparent); mask-image: linear-gradient(90deg, transparent 0, #000 48px, #000 calc(100% - 48px), transparent); }
.chibi-perch .perch-track img { --bl: 0px; }
@media (max-width: 900px) { .chibi-perch { right: -16px; } }
/* perchoir : entre le début de « En cours » et la fin de la ligne ; entrée/sortie progressive aux deux limites */
.chibi-perch { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 56px, #000 calc(100% - 72px), transparent); mask-image: linear-gradient(90deg, transparent 0, #000 56px, #000 calc(100% - 72px), transparent); }
.perch-track img { margin-right: 20px; }
@media (max-width: 900px) { .perch-track img { margin-right: 12px; } }
/* perchoir qui ne déborde pas : chibis rangés depuis la droite, sans défilement ni fondu */
.chibi-perch.fits { display: flex; justify-content: flex-end; -webkit-mask-image: none; mask-image: none; }
.chibi-perch.fits .perch-track { flex-direction: row-reverse; transform: none !important; }
.chibi-perch.fits .perch-track img:first-child { margin-right: 0; }

/* perchoir : chibis plus espacés et cliquables */
.perch-track img { margin-right: 34px; cursor: pointer; }
@media (max-width: 900px) { .perch-track img { margin-right: 18px; } }
/* carte d'un chibi */
.modal.cx-modal { width: min(420px, 92vw); }
.cx-card { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 34px 28px 28px; }
.cx-no { position: absolute; top: 16px; left: 18px; font: 500 12px var(--mono); letter-spacing: .06em; color: var(--faint); }
.cx-art { width: 220px; height: 220px; display: grid; place-items: center; margin-bottom: 10px; border-radius: 50%; background: radial-gradient(closest-side, var(--surface-2), transparent); }
.cx-art img { max-width: 100%; max-height: 100%; object-fit: contain; filter: drop-shadow(0 12px 18px rgba(0, 0, 0, 0.55)); animation: cxIn .5s cubic-bezier(.2, 1.4, .4, 1) both; }
@keyframes cxIn { from { opacity: 0; transform: translateY(12px) scale(.9); } }
.cx-card.locked .cx-art img { filter: brightness(0) drop-shadow(0 0 1px rgba(255, 255, 255, 0.4)); }
.cx-card h2 { margin: 2px 0 0; font: var(--display-w) calc(28px * var(--display-scale)) / 1.15 var(--display); letter-spacing: var(--display-ls); }
.cx-card.locked h2 { letter-spacing: .2em; color: var(--faint); }
.cx-card p { margin: 0 0 16px; font-size: 13.5px; }
/* carte mise en avant dans le Chibidex */
.dex.flash { border-color: var(--accent); animation: dexFlash 1.6s ease-out 2; }
@keyframes dexFlash { 0%, 100% { box-shadow: 0 0 0 0 transparent; } 30% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 45%, transparent); } }
/* perchoir : images à hauteur commune (rebord à 112 px du haut, 14 px de mains/pieds qui pendent sous la ligne) */
.chibi-perch .perch-track img { height: 126px; margin-bottom: -14px; }
@media (max-width: 900px) { .chibi-perch .perch-track img { height: 83px; margin-bottom: -9px; } }
/* perchoir : la coupe recouvre le trait (3 px sous la ligne) pour que les chibis soient bien posés dessus, ombre de contact serrée */
.chibi-perch .perch-track img { margin-bottom: -17px; }
.chibi-perch .perch-track img:not(.shadow), .chibi-perch .perch-track img.flat:not(.shadow) { filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, 0.6)); }
@media (max-width: 900px) { .chibi-perch .perch-track img { margin-bottom: -11px; } }
/* le masque de fondu coupe tout ce qui sort de la boîte : on la prolonge sous le trait pour garder mains et pieds qui pendent */
.chibi-perch { bottom: -48px; padding-bottom: 20px; }
/* perchoir : écart un peu réduit */
.perch-track img { margin-right: 28px; }
@media (max-width: 900px) { .perch-track img { margin-right: 15px; } }
/* la barre de défilement garde sa place quand une fenêtre s'ouvre (body en overflow hidden) : la page derrière ne bouge plus */
html { scrollbar-gutter: stable; }
/* carte d'un chibi : entrée façon carte retournée, le chibi sort du disque, reflet qui balaie la carte, textes en cascade */
.modal-wrap .modal.cx-modal { opacity: 0; transform: perspective(1000px) rotateY(-80deg) scale(.88); transform-origin: 50% 50%; transition: transform .7s cubic-bezier(.2, 1.25, .35, 1), opacity .2s; }
.modal-wrap.in .modal.cx-modal { opacity: 1; transform: none; }
.cx-card::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, 0.09) 47%, rgba(255, 255, 255, 0.16) 50%, rgba(255, 255, 255, 0.09) 53%, transparent 62%); transform: translateX(-110%); animation: cxSheen 1s .45s cubic-bezier(.3, .6, .3, 1) forwards; }
@keyframes cxSheen { to { transform: translateX(110%); } }
.cx-art { animation: cxDisc .55s .15s cubic-bezier(.2, 1.3, .4, 1) both; }
@keyframes cxDisc { from { transform: scale(.3); opacity: 0; } }
.cx-art img { animation: cxRise .6s .3s cubic-bezier(.2, 1.5, .4, 1) both; }
@keyframes cxRise { from { opacity: 0; transform: translateY(28px) scale(.6) rotate(-6deg); } }
.cx-card > :not(.cx-art) { animation: cxUp .4s cubic-bezier(.2, .8, .2, 1) both; }
.cx-card > .cx-no { animation-delay: .4s; }
.cx-card > .qz-kicker { animation-delay: .45s; }
.cx-card > h2 { animation-delay: .52s; }
.cx-card > p { animation-delay: .58s; }
.cx-card > .btn { animation-delay: .64s; }
@keyframes cxUp { from { opacity: 0; transform: translateY(8px); } }
@media (max-width: 900px) {
  .modal-wrap .modal.cx-modal { transform: translateY(40px) rotateX(18deg); }
}
@media (prefers-reduced-motion: reduce) {
  .modal-wrap .modal.cx-modal, .cx-card::after, .cx-art, .cx-art img, .cx-card > * { transition: opacity .2s; animation: none; transform: none; }
}
/* perchoir : seule la partie au-dessus du trait capte la souris ; ce qui pend dessous laisse passer clics et survol vers les compteurs */
.chibi-perch { pointer-events: none; }
.perch-track .pc { pointer-events: auto; flex: none; display: block; height: 109px; margin-right: 28px; cursor: pointer; }
.chibi-perch .perch-track .pc img { display: block; height: 126px; margin: 0; pointer-events: none; }
.chibi-perch.fits .perch-track .pc:first-child { margin-right: 0; }
@media (max-width: 900px) { .perch-track .pc { height: 72px; margin-right: 15px; } .chibi-perch .perch-track .pc img { height: 83px; } }
/* carte d'un chibi : exemplaires, chance par tour, badge Légendaire ; ouvrable depuis le Chibidex */
.dex { cursor: pointer; }
.cx-rar { position: absolute; top: 15px; right: 52px; font: 600 10.5px var(--font); font-style: normal; letter-spacing: .14em; text-transform: uppercase; color: var(--rt, #f2c46a); }
.cx-stats { display: grid; grid-template-columns: 1fr 1fr; width: 100%; margin: 0 0 18px; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.cx-stats > div { display: flex; flex-direction: column; gap: 2px; padding: 10px 8px; }
.cx-stats > div + div { border-left: 1px solid var(--line); }
.cx-stats b { font: var(--display-w) 20px / 1.1 var(--display); letter-spacing: var(--display-ls); }
.cx-stats span { font-size: 11.5px; color: var(--muted); }
.cx-card p { margin-bottom: 12px; }
.cx-card > .cx-stats { animation-delay: .62s; }
.cx-card > .cx-rar { animation-delay: .4s; }
.cx-card > .btn { animation-delay: .7s; }
.cx-card:not(:has(.btn)) { padding-bottom: 10px; }
/* perchoir : coupe du buste pile sur le trait (plus d'enfoncement) ; seuls mains et pieds pendent devant */
.perch-track .pc { height: 112px; }
@media (max-width: 900px) { .perch-track .pc { height: 74px; } }
/* page Jeu : plateau de quiz + colonne joueur (roue, compteurs), cartes de thème plus petites */
.game-layout { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 28px; align-items: start; }
.game-side { position: sticky; top: 84px; display: flex; flex-direction: column; gap: 14px; }
.game-side .wheel-link { margin: 0; border-radius: var(--radius); padding: 12px 14px 12px 12px; }
.game-side .wheel-link .i { margin-left: auto; }
.gs-stats { display: flex; flex-direction: column; padding: 14px 16px 6px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.gs-stats .qz-kicker { margin-bottom: 6px; }
.gs-stats > div { display: flex; align-items: baseline; gap: 10px; padding: 9px 0; border-top: 1px solid var(--line); }
.gs-stats > div:first-of-type { border-top: 0; }
.gs-stats b { min-width: 64px; font: var(--display-w) 20px / 1 var(--display); letter-spacing: var(--display-ls); }
.gs-stats b small { font-size: .6em; color: var(--muted); }
.gs-stats span:not(.qz-kicker) { font-size: 12.5px; color: var(--muted); }
.quiz-zone { padding: 22px 24px 26px; border: 1px solid var(--line); border-radius: 14px; background: var(--bg-2); min-height: 420px; }
.qz-rules { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; padding: 0; list-style: none; }
.qz-rules li { padding: 6px 11px; border-radius: 999px; border: 1px solid var(--line); font-size: 12.5px; color: var(--muted); }
.qz-rules b { color: var(--text); font-weight: 600; }
.qz-rule { margin: 18px 0 14px; }
.qz-themes { grid-template-columns: repeat(4, minmax(0, 170px)); gap: 18px; }
.qz-theme { gap: 9px; }
.qz-theme b { font-size: calc(15px * var(--display-scale)); line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.qz-theme.on .qz-cover::after { top: 8px; right: 8px; width: 22px; height: 22px; box-shadow: inset 0 0 0 6px var(--accent), inset 0 0 0 11px var(--accent-ink); }
.qz-actions { margin-top: 22px; }
.qz-q { max-width: none; }
.qz-done { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 22px 0 6px; }
.qz-done p { margin: 6px 0 0; }
.qz-end-actions { display: flex; gap: 10px; flex-wrap: wrap; }
/* correction : un onglet par essai */
.qr { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); }
.qr-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.qr-head .qz-kicker { margin: 0; }
.qr-tabs { display: flex; gap: 6px; }
.qr-tab { display: flex; align-items: baseline; gap: 8px; padding: 7px 12px; border-radius: 8px; border: 1px solid var(--line); background: none; color: var(--muted); font-size: 12.5px; transition: border-color .15s, color .15s, background .15s; }
.qr-tab b { font: 600 14px var(--mono); color: var(--text); }
.qr-tab b small { font-size: 11px; color: var(--muted); }
.qr-tab:hover { border-color: var(--line-2); }
.qr-tab.on { border-color: var(--accent); color: var(--text); background: color-mix(in srgb, var(--accent) 10%, transparent); }
.qr-tab.won b { color: var(--green); }
.qr-sum { display: grid; grid-template-columns: auto auto minmax(0, 1fr); margin: 16px 0 18px; border: 1px solid var(--line); border-radius: 10px; }
.qr-sum > div { display: flex; flex-direction: column; gap: 3px; padding: 12px 18px; min-width: 0; }
.qr-sum > div + div { border-left: 1px solid var(--line); }
.qr-sum b { font: var(--display-w) 22px / 1.1 var(--display); letter-spacing: var(--display-ls); }
.qr-sum b small { font-size: .6em; color: var(--muted); }
.qr-sum b.qr-themes { font: 600 14px / 1.35 var(--font); letter-spacing: 0; padding-top: 4px; }
.qr-sum span { font-size: 12px; color: var(--muted); }
.qr-list { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; list-style: none; }
.qr-item { padding: 14px 16px; border: 1px solid var(--line); border-left: 3px solid var(--line-2); border-radius: 10px; background: var(--surface); }
.qr-item.ok { border-left-color: var(--green); }
.qr-item.ko { border-left-color: var(--red); }
.qr-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 12px; color: var(--muted); }
.qr-num { font: 600 13px var(--mono); color: var(--text); }
.qr-item.ok .qr-num { color: var(--green); }
.qr-item.ko .qr-num { color: var(--red); }
.qr-diff { display: inline-flex; align-items: center; gap: 3px; }
.qr-diff i { width: 5px; height: 10px; border-radius: 1px; background: var(--surface-3); }
.qr-diff i:last-of-type { margin-right: 5px; }
.qr-diff[data-d="1"] i:nth-child(-n+1), .qr-diff[data-d="2"] i:nth-child(-n+2), .qr-diff[data-d="3"] i { background: var(--amber); }
.qr-rate { margin-left: auto; }
.qr-rate b { color: var(--text); font-weight: 600; }
.qr-q { display: flex; align-items: center; gap: 14px; margin: 10px 0 10px; }
.qr-q img { width: 52px; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 6px; flex: none; background: var(--surface-2); }
.qr-q h4 { margin: 0; font: 600 16px / 1.35 var(--font); letter-spacing: 0; }
.qr-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin: 0; padding: 0; list-style: none; }
.qr-choices li { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 11px; border-radius: 7px; border: 1px solid var(--line); font-size: 13.5px; color: var(--muted); }
.qr-choices li small { flex: none; font-size: 11px; }
.qr-choices li.right { border-color: color-mix(in srgb, var(--green) 60%, transparent); background: color-mix(in srgb, var(--green) 10%, transparent); color: var(--text); }
.qr-choices li.right small { color: var(--green); }
.qr-choices li.wrong { border-color: color-mix(in srgb, var(--red) 60%, transparent); background: color-mix(in srgb, var(--red) 10%, transparent); color: var(--text); }
.qr-choices li.wrong small { color: var(--red); }
.qr-none { margin: 8px 0 0; font-size: 12.5px; color: var(--red); }
.qr-detail { display: flex; gap: 14px; align-items: flex-start; margin-top: 10px; padding: 10px 12px; border-left: 2px solid var(--amber); background: var(--bg-2); border-radius: 0 6px 6px 0; }
.qr-detail img { width: 120px; border-radius: 6px; flex: none; }
.qr-detail p { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--muted); }
@media (max-width: 1000px) {
  .game-layout { grid-template-columns: 1fr; }
  .game-side { position: static; order: -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); }
  .gs-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 14px; padding-bottom: 10px; }
  .gs-stats .qz-kicker { grid-column: 1 / -1; }
  .gs-stats > div { flex-direction: column; gap: 2px; padding: 6px 0; border: 0; }
  .qz-themes { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
}
@media (max-width: 600px) {
  .game-side { grid-template-columns: 1fr; }
  .quiz-zone { padding: 16px 14px 18px; border-radius: 12px; }
  .qz-themes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .qz-done { flex-direction: column; align-items: flex-start; }
  .qr-sum { grid-template-columns: 1fr 1fr; }
  .qr-sum > div:last-child { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--line); }
  .qr-choices { grid-template-columns: 1fr; }
  .qr-rate { margin-left: 0; flex-basis: 100%; }
  .qr-detail { flex-direction: column; }
}
.qr-tab { white-space: nowrap; }
@media (max-width: 600px) { .qr-tabs { width: 100%; } .qr-tab { flex: 1; justify-content: center; padding: 7px 6px; } }
/* Jeu : essais du jour (colonne), bandeau du dernier essai, cartes d'essai, correction en fenêtre */
.gs-card { display: flex; flex-direction: column; padding: 14px 16px 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.gs-tries .qz-kicker { margin-bottom: 8px; }
.gt-row { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; margin: 0 -10px; width: calc(100% + 20px); border: 0; border-radius: 8px; background: none; color: var(--text); font-size: 13px; text-align: left; transition: background .15s; }
button.gt-row:hover { background: var(--surface-2); }
.gt-row + .gt-row { box-shadow: 0 -1px 0 var(--line); }
.gt-row > span { flex: 1; color: var(--muted); }
.gt-row b { font: 600 15px var(--mono); }
.gt-row b small { font-size: 11px; color: var(--muted); }
.gt-row em { min-width: 52px; font-style: normal; font-size: 11.5px; color: var(--muted); text-align: right; }
.gt-row.won em { color: var(--green); font-weight: 600; }
.gt-row .i { width: 14px; height: 14px; color: var(--faint); }
.gt-row.todo em { color: var(--faint); }
.gt-row.todo { padding-right: 34px; }
.gt-foot { margin: 8px 0 0; padding-top: 10px; border-top: 1px solid var(--line); font-size: 12px; color: var(--muted); }
.gt-foot b { color: var(--green); }
.qz-tries i.won { background: var(--green); }
.qz-tries i.used:not(.won) { background: var(--surface-3); }
.qz-last { position: relative; display: flex; align-items: center; gap: 18px; margin-top: 16px; padding: 14px 48px 14px 18px; border: 1px solid var(--line-2); border-left: 3px solid var(--red); border-radius: 10px; background: var(--surface); animation: qlIn .5s cubic-bezier(.2, 1.2, .4, 1) both; }
.qz-last.win { border-left-color: var(--green); }
@keyframes qlIn { from { opacity: 0; transform: translateY(-8px); } }
.ql-score { font: var(--display-w) calc(40px * var(--display-scale)) / 1 var(--display); letter-spacing: var(--display-ls); }
.ql-score small { font-size: .4em; color: var(--muted); margin-left: 3px; }
.qz-last.win .ql-score { color: var(--green); }
.ql-text { flex: 1; min-width: 0; }
.ql-text .qz-kicker { margin-bottom: 2px; }
.ql-text p { margin: 0; font-size: 14px; }
.ql-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.ql-x { position: absolute; top: 8px; right: 8px; }
.qa-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 20px; }
.qa-card { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 16px 16px 14px; border: 1px solid var(--line); border-top: 3px solid var(--red); border-radius: 10px; background: var(--surface); color: var(--text); text-align: left; transition: border-color .15s, transform .2s cubic-bezier(.2, .8, .2, 1); }
.qa-card.won { border-top-color: var(--green); }
.qa-card:hover { transform: translateY(-2px); border-color: var(--line-2); }
.qa-card .qz-kicker { margin: 0; }
.qa-card b { font: var(--display-w) calc(38px * var(--display-scale)) / 1 var(--display); letter-spacing: var(--display-ls); }
.qa-card b small { font-size: .42em; color: var(--muted); margin-left: 3px; }
.qa-card em { font-style: normal; font-size: 12.5px; font-weight: 600; color: var(--muted); }
.qa-card.won em { color: var(--green); }
.qa-themes { font-size: 12.5px; color: var(--muted); }
.qa-open { display: inline-flex; align-items: center; gap: 4px; margin-top: 8px; font-size: 12.5px; color: var(--accent); }
.qa-open .i { width: 14px; height: 14px; }
.modal.qr-modal { width: min(980px, 100%); padding: 26px 28px 28px; }
.qr-modal .qr { margin: 0; padding: 0; border: 0; }
.qr-modal .qr-head { padding-right: 40px; }
.qr-modal .qr-head h3 { margin: 2px 0 0; font: var(--display-w) calc(26px * var(--display-scale)) / 1.1 var(--display); letter-spacing: var(--display-ls); }
@media (max-width: 600px) {
  .qz-last { flex-wrap: wrap; padding-right: 44px; }
  .ql-actions { width: 100%; }
  .qa-cards { grid-template-columns: 1fr; }
  .modal.qr-modal { padding: 18px 14px 20px; }
}
/* bandeau du dernier essai : boutons et croix sur une même ligne, même hauteur ; pastille d'essai raté en rouge */
.qz-last { padding-right: 14px; }
.ql-actions { align-items: center; }
.ql-actions .ql-x { position: static; width: 40px; height: 40px; }
.qz-tries i.used.lost { background: var(--red); }
@media (max-width: 600px) { .qz-last { padding-right: 14px; } .ql-actions .btn { flex: 1; } }
/* correction : une question à la fois + bande de navigation (carrés verts réussies, rouges ratées, gris non jouées) */
.qr-modal .qr-sum { margin-bottom: 14px; }
.qr-stage { min-height: 330px; }
.qr-stage .qr-item { animation: qrIn .25s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes qrIn { from { opacity: 0; transform: translateY(6px); } }
.qr-choices li { justify-content: flex-start; }
.qr-nav { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
.qr-nav .icon-btn:disabled { opacity: .35; pointer-events: none; }
.qr-dots { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.qr-dot { width: 32px; height: 32px; border-radius: 6px; border: 1px solid transparent; font: 600 12px var(--mono); color: #10130f; background: var(--green); cursor: pointer; transition: transform .15s, box-shadow .15s, opacity .15s; opacity: .55; }
.qr-dot.ko { background: var(--red); color: #1a0d0a; }
.qr-dot.skip { background: var(--surface-3); color: var(--muted); }
.qr-dot:hover { opacity: .85; }
.qr-dot.on { opacity: 1; transform: translateY(-2px); box-shadow: 0 0 0 2px var(--bg-2), 0 0 0 4px var(--text); }
@media (max-width: 600px) {
  .qr-stage { min-height: 0; }
  .qr-nav { gap: 6px; }
  .qr-dot { width: 26px; height: 26px; font-size: 11px; }
  .qr-dots { gap: 4px; }
}
@media (max-width: 600px) {
  .qr-modal .qr-nav { position: sticky; bottom: -20px; margin: 14px -14px -20px; padding: 12px 10px 14px; background: var(--bg-2); z-index: 2; }
  .qr-modal .qr-head h3 { font-size: calc(22px * var(--display-scale)); }
  .qr-modal .qr-sum { grid-template-columns: auto auto minmax(0, 1fr); margin: 12px 0 10px; }
  .qr-modal .qr-sum > div { padding: 8px 10px; }
  .qr-modal .qr-sum > div:last-child { grid-column: auto; border-top: 0; border-left: 1px solid var(--line); }
  .qr-modal .qr-sum b { font-size: 17px; }
  .qr-modal .qr-sum b.qr-themes { font-size: 12.5px; padding-top: 2px; }
  .qr-modal .qr-sum span { font-size: 11px; }
}
@media (max-width: 600px) {
  .qr-modal .qr-nav .icon-btn { display: none; }
  .qr-modal .qr-dots { flex-wrap: nowrap; gap: 4px; }
  .qr-modal .qr-dot { width: 25px; height: 30px; flex: none; }
}
/* correction : un essai réussi est vert (bord, fond, libellé) ; sélectionné, le vert remplace l'accent */
.qr-tab.won { border-color: color-mix(in srgb, var(--green) 45%, transparent); background: color-mix(in srgb, var(--green) 7%, transparent); color: var(--green); }
.qr-tab.won:hover { border-color: color-mix(in srgb, var(--green) 70%, transparent); }
.qr-tab.won.on { border-color: var(--green); background: color-mix(in srgb, var(--green) 16%, transparent); color: var(--green); }
.qr-tab.won b small { color: color-mix(in srgb, var(--green) 65%, var(--muted)); }
/* résumé de la correction : score et thème sans légende, centrés verticalement */
.qr-sum > div { justify-content: center; }
.qr-sum b.qr-themes { padding-top: 0; }
/* correction : l'explication sous le cadre de la question, pas dedans */
.qr-stage > .qr-detail { margin-top: 12px; animation: qrIn .25s cubic-bezier(.2, .8, .2, 1) both; }
/* correction : un essai réussi n'est vert que sélectionné ; sinon onglet neutre comme les autres (seul le score reste vert) */
.qr-tab.won:not(.on) { border-color: var(--line); background: none; color: var(--muted); }
.qr-tab.won:not(.on):hover { border-color: var(--line-2); }
.qr-tab.won:not(.on) b small { color: var(--muted); }
/* correction : pas de hauteur réservée (plus de vide sous l'explication), question et score plus grands, explication étiquetée */
.qr-stage { min-height: 0; }
.qr-q h4 { font-size: 19px; line-height: 1.3; }
.qr-choices li { font-size: 14.5px; padding: 9px 12px; }
.qr-sum b { font-size: 26px; }
.qr-sum b small { font-size: .7em; }
.qr-stage > .qr-detail { display: block; padding: 12px 16px 14px; border: 1px solid color-mix(in srgb, var(--amber) 35%, var(--line)); border-left: 3px solid var(--amber); border-radius: 10px; background: color-mix(in srgb, var(--amber) 7%, var(--surface)); }
.qr-detail-k { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 6px; font: 600 11px var(--font); letter-spacing: .14em; text-transform: uppercase; color: var(--amber); }
.qr-detail-k .i { width: 14px; height: 14px; }
.qr-detail-b { display: flex; gap: 14px; align-items: flex-start; }
.qr-detail-b p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--text); opacity: .88; }
.qr-modal .qr-nav { margin-top: 14px; padding-top: 14px; }
@media (max-width: 600px) {
  .qr-q h4 { font-size: 17px; }
  .qr-modal .qr-sum b { font-size: 20px; }
  .qr-detail-b { flex-direction: column; }
}
/* carte d'un essai réussi : « Voir la correction » en vert, comme le liseré et le +1 spin */
.qa-card.won .qa-open { color: var(--green); }
/* correction : plus d'air entre la question et l'explication, et entre l'explication et la navigation */
.qr-stage > .qr-detail { margin-top: 20px; }
@media (min-width: 601px) { .qr-modal .qr-nav { margin-top: 24px; padding-top: 16px; } }
@media (max-width: 600px) { .qr-stage > .qr-detail { margin-top: 14px; margin-bottom: 6px; } }
/* correction : nom de l'anime en grand dans le résumé ; plus d'air entre la ligne Q / difficulté et l'intitulé de la question */
.qr-sum b.qr-themes { font: var(--display-w) calc(26px * var(--display-scale)) / 1.15 var(--display); letter-spacing: var(--display-ls); padding: 0; }
.qr-q { margin: 18px 0 14px; }
@media (max-width: 600px) {
  .qr-modal .qr-sum b.qr-themes { font-size: calc(18px * var(--display-scale)); }
  .qr-q { margin: 14px 0 12px; }
}
/* --- Jeu : animations et 3D (dopamine sobre : pas de néon, juste du mouvement et des éclats) --- */
.fx-burst { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 300; }
.fx-coin { position: fixed; left: 0; top: 0; z-index: 301; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; pointer-events: none; font: 700 15px var(--mono); color: #3b2604;
  background: radial-gradient(circle at 35% 30%, #fff3c4, #ffcf4d 38%, #c98a17 75%, #8a5a0c); box-shadow: inset 0 0 0 3px rgba(255, 240, 190, 0.55), inset 0 -4px 8px rgba(80, 45, 0, 0.45), 0 10px 22px -6px rgba(0, 0, 0, 0.7); backface-visibility: visible; }
.wheel-link.bump { animation: wlBump .6s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes wlBump { 30% { transform: scale(1.06); border-color: #ffcf4d; box-shadow: 0 0 0 4px rgba(255, 207, 77, 0.18); } }
/* cartes inclinables (jaquettes des thèmes, cartes d'essai) */
.tilt3d { position: relative; transform-style: preserve-3d; }
.tilt3d::before { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .25s;
  background: radial-gradient(circle at var(--gx, 50%) var(--gy, 30%), rgba(255, 255, 255, 0.22), transparent 55%); mix-blend-mode: soft-light; }
.tilt3d.tilting::before { opacity: 1; }
.qz-cover.tilt3d.tilting { transform: perspective(700px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(-6px) scale(1.03); transition: transform .08s linear, outline-color .2s, box-shadow .3s; box-shadow: 0 26px 34px -18px rgba(0, 0, 0, 0.95); }
.qa-card { overflow: hidden; animation: qaRise .55s cubic-bezier(.2, 1.2, .35, 1) both; animation-delay: calc(var(--d, 0) * 90ms); }
@keyframes qaRise { from { opacity: 0; transform: perspective(800px) rotateX(-24deg) translateY(24px); } }
.qa-card.tilt3d.tilting { transform: perspective(800px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(-3px); transition: transform .08s linear, border-color .15s; }
/* question : arrive comme une carte distribuée, choix en cascade */
.qz-q { animation: qzDeal .45s cubic-bezier(.2, 1.1, .3, 1) both; transform-origin: 50% 0; }
@keyframes qzDeal { from { opacity: 0; transform: perspective(900px) rotateX(16deg) translateY(18px); } }
.qz-choice { animation: qzChoice .35s cubic-bezier(.2, 1, .3, 1) both; }
.qz-choice:nth-child(2) { animation-delay: .05s; } .qz-choice:nth-child(3) { animation-delay: .1s; } .qz-choice:nth-child(4) { animation-delay: .15s; }
@keyframes qzChoice { from { opacity: 0; transform: translateY(10px) scale(.97); } }
.qz-choice.pop { animation: qzPop .5s cubic-bezier(.2, 1.6, .4, 1); box-shadow: 0 0 0 3px color-mix(in srgb, var(--green) 30%, transparent); }
@keyframes qzPop { 0% { transform: scale(1); } 35% { transform: scale(1.05); } 100% { transform: scale(1); } }
.shake { animation: fxShake .42s cubic-bezier(.36, .07, .19, .97); }
@keyframes fxShake { 15%, 85% { transform: translateX(-2px); } 30%, 70% { transform: translateX(5px); } 45%, 55% { transform: translateX(-6px); } }
.qz-score.bump { animation: qzBump .5s cubic-bezier(.2, 1.6, .4, 1); color: var(--green); }
@keyframes qzBump { 40% { transform: scale(1.3); } }
.qz-score { display: inline-block; }
.qz-streak { display: none; padding: 3px 9px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--amber) 55%, transparent); color: var(--amber); font: 600 11.5px var(--mono); letter-spacing: .02em; }
.qz-streak.on { display: inline-block; animation: qzBump .5s cubic-bezier(.2, 1.6, .4, 1); }
.qz-streak.hot { color: #1a1206; background: var(--amber); border-color: var(--amber); }
.qz-timer.hurry i { background: var(--red); }
.qz-timer.hurry { animation: qzHurry .45s ease-in-out infinite alternate; }
@keyframes qzHurry { to { opacity: .45; } }
/* résultat de l'essai : le bandeau bascule en 3D, la pastille du nouvel essai éclot, reflet sur un essai réussi */
.qz-last { animation: qlFlip .6s cubic-bezier(.2, 1.25, .35, 1) both; transform-origin: 50% 0; overflow: hidden; }
@keyframes qlFlip { from { opacity: 0; transform: perspective(900px) rotateX(-75deg); } }
.qz-last.shake { animation: fxShake .42s cubic-bezier(.36, .07, .19, .97); }
.qz-last.win.fresh::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, 0.08) 47%, rgba(255, 255, 255, 0.16) 50%, rgba(255, 255, 255, 0.08) 53%, transparent 62%); transform: translateX(-110%); animation: cxSheen 1.1s 1s cubic-bezier(.3, .6, .3, 1) forwards; }
.qz-last.win .ql-score { text-shadow: 0 0 18px color-mix(in srgb, var(--green) 35%, transparent); }
.qz-tries i.new { animation: pipNew .7s .3s cubic-bezier(.2, 1.8, .4, 1) both; }
@keyframes pipNew { from { transform: scale(0); } 60% { transform: scale(1.7); } }
/* correction : la question glisse en 3D dans le sens de la navigation */
.qr-stage .qr-item, .qr-stage > .qr-detail { animation: qrSwap .38s cubic-bezier(.2, 1, .3, 1) both; }
.qr-stage > .qr-detail { animation-delay: .06s; }
@keyframes qrSwap { from { opacity: 0; transform: perspective(1000px) rotateY(calc(var(--dir, 0) * 22deg)) translateX(calc(var(--dir, 0) * 36px)) translateY(calc((1 - var(--dir, 0) * var(--dir, 0)) * 8px)); } }
.qr-dot.on { animation: qzBump .4s cubic-bezier(.2, 1.6, .4, 1); }
@media (prefers-reduced-motion: reduce) {
  .qz-q, .qz-choice, .qz-choice.pop, .shake, .qz-score.bump, .qz-streak.on, .qz-timer.hurry, .qz-last, .qz-tries i.new, .qa-card, .qr-stage .qr-item, .qr-stage > .qr-detail, .qr-dot.on, .wheel-link.bump { animation: none; }
  .tilt3d.tilting { transform: none; }
}
/* cartes d'essai vivantes : trame de manga qui dérive dans le coin, gros score en filigrane qui flotte,
   reflet qui court sur le liseré d'un essai réussi (sous l'inclinaison 3D et son reflet, qui restent au-dessus) */
.qa-card { --tone: color-mix(in srgb, var(--red) 30%, transparent); --ghost: color-mix(in srgb, var(--red) 34%, var(--line)); }
.qa-card.won { --tone: color-mix(in srgb, var(--green) 34%, transparent); --ghost: color-mix(in srgb, var(--green) 45%, var(--line)); }
.qa-card > :not(.qa-bg) { position: relative; z-index: 1; }
.qa-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; border-radius: inherit; pointer-events: none; }
.qa-tone { position: absolute; inset: 0; background-image: radial-gradient(circle, var(--tone) 1.1px, transparent 1.6px); background-size: 8px 8px;
  -webkit-mask-image: radial-gradient(115% 95% at 100% 100%, #000 0, transparent 68%); mask-image: radial-gradient(115% 95% at 100% 100%, #000 0, transparent 68%);
  opacity: .8; transition: opacity .3s; animation: qaTone 9s linear infinite; }
@keyframes qaTone { to { background-position: -32px -32px; } }
.qa-ghost { position: absolute; right: 10px; bottom: -34px; font: var(--display-w) 150px / 1 var(--display); letter-spacing: -.04em; color: transparent; -webkit-text-stroke: 1.5px var(--ghost);
  transition: translate .45s cubic-bezier(.2, .8, .2, 1), -webkit-text-stroke-color .3s; animation: qaGhostIn .9s cubic-bezier(.2, .8, .2, 1) both, qaFloat 6s ease-in-out 1s infinite alternate; animation-delay: calc(var(--d, 0) * 90ms + 150ms), calc(var(--d, 0) * 700ms + 1s); }
@keyframes qaGhostIn { from { opacity: 0; transform: translateX(40px); } }
@keyframes qaFloat { from { transform: translateY(0) rotate(0deg); } to { transform: translateY(-7px) rotate(-2deg); } }
.qa-card:hover .qa-tone { opacity: 1; }
.qa-card:hover .qa-ghost { translate: -10px 0; }
.qa-card.won .qa-bg::after { content: ""; position: absolute; top: 0; left: 0; width: 38%; height: 2px; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--green) 70%, #fff), transparent);
  animation: qaShine 3.6s cubic-bezier(.45, 0, .2, 1) 1.2s infinite; transform: translateX(-110%); }
@keyframes qaShine { 0% { transform: translateX(-110%); } 45%, 100% { transform: translateX(290%); } }
.qa-card.won em { animation: qaSpin 2.4s ease-in-out 1.4s infinite; }
@keyframes qaSpin { 0%, 70%, 100% { transform: none; } 80% { transform: translateY(-2px) scale(1.06); } 90% { transform: none; } }

@media (max-width: 600px) { .qa-ghost { font-size: 120px; bottom: -28px; } }
@media (prefers-reduced-motion: reduce) {
  .qa-tone, .qa-ghost, .qa-card.won .qa-bg::after, .qa-card.won em { animation: none; }
  .qa-card.won .qa-bg::after { display: none; }
}
/* outils du propriétaire (page Jeu) : valider un essai, remettre la journée à zéro */
.gs-tools { gap: 6px; }
.gs-tools .qz-kicker { margin-bottom: 4px; }
.gs-tools .btn { justify-content: flex-start; width: 100%; }
.gs-tools .btn .i { width: 14px; height: 14px; }
/* quiz du jour : pastilles — gris tant que l'essai n'est pas joué, vert réussi, rouge raté */
.qz-tries i, .qz-tries i.used { background: var(--surface-3); }
.qz-tries i.won, .qz-tries i.used.won { background: var(--green); }
.qz-tries i.lost, .qz-tries i.used.lost { background: var(--red); }
/* règles du quiz : infobulle sur un « ? » en haut à droite du panneau */
.qz-head-r { display: flex; align-items: center; gap: 14px; }
.qz-help { position: relative; display: inline-grid; place-items: center; width: 24px; height: 24px; padding: 0; border-radius: 50%; border: 1px solid var(--line-2); background: none; color: var(--muted); font: 600 12.5px var(--font); cursor: help; transition: color .15s, border-color .15s; }
.qz-help:hover, .qz-help:focus-visible { color: var(--text); border-color: var(--muted); }
.qz-help-tip { position: absolute; top: calc(100% + 10px); right: -6px; z-index: 30; width: 250px; padding: 12px 14px; border: 1px solid var(--line-2); border-radius: 10px; background: var(--surface); box-shadow: 0 14px 30px -12px rgba(0, 0, 0, 0.8);
  text-align: left; cursor: default; opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity .16s, transform .16s, visibility 0s .16s; }
.qz-help:hover .qz-help-tip, .qz-help:focus .qz-help-tip { opacity: 1; visibility: visible; transform: none; transition: opacity .16s, transform .16s; }
.qz-help-tip .qz-kicker { display: block; margin: 0 0 8px; }
.qz-help-tip .qz-rules { display: grid; gap: 7px; margin: 0; }
.qz-help-tip .qz-rules li { padding: 0; border: 0; border-radius: 0; font-size: 13px; font-weight: 400; color: var(--muted); }
.qz-help-tip .qz-rules b { font: 600 13px / 1.3 var(--font); letter-spacing: normal; color: var(--text); }
/* barre du haut : onglets resserrés, trait juste sous le libellé (et plus collé au bas de la barre) */
.nav { gap: 0; }
.nav a { padding: 0 12px; }
.nav a::after, .nav a.on::after { left: 12px; right: 12px; bottom: -1px; border-radius: 2px 2px 0 0; }
@media (max-width: 900px) { .nav a::after, .nav a.on::after { left: 8px; right: 8px; } }
/* barre du haut : onglets centrés dans la barre sur grand écran (logo à gauche, recherche à droite) */
@media (min-width: 1400px) {
  .nav { position: absolute; left: 50%; top: 0; transform: translateX(-50%); }
}
/* carte d'un chibi : plus de disque — le personnage s'accoude à un muret (trait + ombre portée), comme sur le bandeau ;
   images chibis/c : rebord à 112/126 de la hauteur, mains et pieds qui pendent devant le trait */
.cx-art { position: relative; width: 100%; height: 220px; display: flex; justify-content: center; align-items: flex-start; margin-bottom: 14px; border-radius: 0; background: none; }
.cx-art img { position: relative; z-index: 1; height: 220px; width: auto; max-width: none; max-height: none; object-fit: initial; filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, 0.6)); }
.cx-ledge { position: absolute; left: 0; right: 0; top: calc(220px * 112 / 126); height: 1px; background: var(--line-2);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent); mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent); }
.cx-ledge::after { content: ""; position: absolute; left: 0; right: 0; top: 1px; height: 18px; background: linear-gradient(rgba(0, 0, 0, 0.45), transparent); }
.cx-card.locked .cx-art img { filter: brightness(0) drop-shadow(0 0 1px rgba(255, 255, 255, 0.4)); }
.cx-art { animation-name: cxLedge; }
@keyframes cxLedge { from { opacity: 0; } }
/* raretés de badges : pastilles en métal chromé (reflet en haut à gauche, bandes de lumière qui tournent autour) */
.tier-dot { --d: #5a3a1c; --l: #f0b47a; position: relative; display: inline-block; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 50%; flex: none;
  background: radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.95) 0 7%, rgba(255, 255, 255, 0) 32%),
    conic-gradient(from 210deg, var(--d), var(--l) 18%, var(--d) 34%, var(--l) 55%, var(--d) 72%, var(--l) 88%, var(--d));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25), inset 0 -2px 3px rgba(0, 0, 0, 0.45), 0 2px 5px rgba(0, 0, 0, 0.55); }
.tier-dot.r-bronze { --d: #5a3418; --l: #f2b27a; }
.tier-dot.r-argent { --d: #5d636d; --l: #f4f6fa; }
.tier-dot.r-or { --d: #6b4a10; --l: #ffe08a; }
.tier-dot.r-legendaire { --d: #050505; --l: #4a4a4a; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18), inset 0 0 6px rgba(150, 120, 255, 0.35), 0 2px 5px rgba(0, 0, 0, 0.55); }
/* vitrine : choix de la version en haut à droite de la scène */
.b3d-tiers { position: absolute; top: 18px; right: 18px; z-index: 3; display: flex; gap: 10px; padding: 8px 10px; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 999px; background: rgba(15, 13, 11, 0.6); }
.b3d-tiers .tier-dot { cursor: pointer; transition: transform .2s cubic-bezier(.2, 1.4, .4, 1), opacity .2s, filter .2s; }
.b3d-tiers .tier-dot:hover:not(.off) { transform: scale(1.15); }
.b3d-tiers .tier-dot.on { outline: 2px solid var(--text); outline-offset: 3px; }
.b3d-tiers .tier-dot.off { cursor: not-allowed; filter: grayscale(1) brightness(.55); opacity: .45; }
/* outils : tester les raretés de badges */
.gt-badges { display: grid; gap: 6px; margin-top: 8px; padding-top: 10px; border-top: 1px solid var(--line); }
.gt-sub { font-size: 11.5px; color: var(--muted); }
.gt-tiers { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.gt-tier { display: flex; align-items: center; gap: 8px; padding: 7px 9px; border: 1px solid var(--line); border-radius: 8px; background: none; color: var(--text); font-size: 12.5px; cursor: pointer; transition: border-color .15s, background .15s; }
.gt-tier:hover { border-color: var(--line-2); background: var(--surface-2); }
.gt-tier .tier-dot { width: 14px; height: 14px; }
/* Légendaire signé : signature manuscrite (Mrs Saint Delafield), encre dorée */
.r-signe { --rc: #111; --rc-hi: rgba(242, 196, 106, 0.55); --rt: #f2c46a; --m1: #020202; --m2: #1b1a18; --m3: #f2c46a; }
.medal-sig { position: absolute; right: 4%; bottom: 13%; z-index: 2; max-width: 92%; overflow: hidden; white-space: nowrap; pointer-events: none;
  font: 400 26px / 1.1 "Mrs Saint Delafield", cursive; transform: rotate(-11deg); transform-origin: 100% 100%;
  background: linear-gradient(100deg, #b98426, #fff0bf 45%, #e6b450 70%, #a8741c); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.8)); }
.medal.big .medal-sig { font-size: 34px; }
.medal.signed .medal-cap small { color: #f2c46a; }
.rv-tier.signed b { font: 400 64px / 1 "Mrs Saint Delafield", cursive; letter-spacing: 0; text-transform: none; }
/* rond « Légendaire signé » : métal noir et or, un reflet doré tourne autour */
.tier-dot.r-signe { --d: #070604; --l: #8a6a2a; overflow: hidden; box-shadow: inset 0 0 0 1.5px #e9c46a, inset 0 0 8px rgba(242, 196, 106, 0.55), 0 0 10px rgba(242, 196, 106, 0.45), 0 2px 5px rgba(0, 0, 0, 0.55); }
.tier-dot.r-signe::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(transparent 0 70%, rgba(255, 236, 170, 0.85) 80%, transparent 90%); mix-blend-mode: screen; animation: sigDot 2.6s linear infinite; }
@keyframes sigDot { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .tier-dot.r-signe::after { animation: none; } }
/* vitrine sur écran étroit : une seule colonne (la règle large plus haut écrasait la version mobile) */
@media (max-width: 760px) { .b3d { grid-template-columns: 1fr; min-height: 0; } .b3d-plaque { border-left: 0; border-top: 1px solid var(--line); } .b3d-stage { min-height: 360px; } }
.medal-sig { transform: rotate(var(--tilt, -0.19rad)); }
@media (max-width: 760px) { .b3d-tiers { right: auto; left: 14px; top: 14px; } }
/* médaille d'un Légendaire signé : illustration assombrie pour faire ressortir la signature dorée */
.medal.signed:not(.locked) .medal-coin img { filter: brightness(.58) saturate(.95); }
/* bandeau de rareté « Légendaire signé » : même police grasse penchée que les autres paliers (plus de cursive), en or, un peu plus petite car plus longue */
.rv-tier.signed b { font: 900 italic calc(clamp(34px, 5.6vw, 80px) * var(--display-scale)) / .9 var(--display); letter-spacing: -.02em; text-transform: uppercase;
  color: #f2c46a; background: linear-gradient(90deg, #b98426, #fff0bf 45%, #e6b450 70%, #b98426); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
/* --- Hub des jeux (#/jeu) : une carte par jeu, le quiz du jour en grand --- */
.games-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); grid-auto-rows: auto; gap: 18px; }
.game-card { position: relative; display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: var(--bg-2); color: var(--text);
  transition: border-color .2s, box-shadow .3s; animation: qaRise .55s cubic-bezier(.2, 1.2, .35, 1) both; }
.game-card:nth-child(2) { animation-delay: .08s; } .game-card:nth-child(3) { animation-delay: .16s; }
a.game-card:hover { border-color: var(--line-2); box-shadow: 0 30px 50px -30px rgba(0, 0, 0, 0.9); }
.game-card.tilt3d.tilting { transform: perspective(1100px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(-3px); transition: transform .08s linear, border-color .2s, box-shadow .3s; }
.game-card .tilt3d::before { border-radius: 14px; }
.gc-quiz { grid-row: span 2; }
.gc-art { position: relative; display: grid; place-items: center; height: 260px; overflow: hidden; border-bottom: 1px solid var(--line);
  background: radial-gradient(120% 90% at 50% 100%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 60%), var(--surface); }
.gc-q { font: var(--display-w) 120px / 1 var(--display); color: var(--surface-3); }
/* jaquettes du jour en éventail ; elles s'écartent au survol */
.gc-fan { position: relative; width: 100%; height: 100%; }
.gc-fan img { position: absolute; left: 50%; bottom: -38px; width: 132px; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 8px; box-shadow: 0 18px 30px -12px rgba(0, 0, 0, 0.9);
  transform-origin: 50% 120%; transform: translateX(-50%) rotate(calc((var(--i) - 1.5) * 11deg)) translateY(calc(abs(var(--i) - 1.5) * 10px));
  transition: transform .45s cubic-bezier(.2, 1.2, .35, 1); }
.game-card:hover .gc-fan img { transform: translateX(-50%) rotate(calc((var(--i) - 1.5) * 17deg)) translateY(calc(abs(var(--i) - 1.5) * 14px - 14px)); }
.gc-body { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 20px 22px 22px; flex: 1; }
.gc-body .qz-kicker { margin: 0; }
.game-card h2 { margin: 0; font: var(--display-w) calc(30px * var(--display-scale)) / 1.1 var(--display); letter-spacing: var(--display-ls); }
.gc-quiz h2 { font-size: calc(38px * var(--display-scale)); }
.game-card p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--muted); max-width: 52ch; }
.gc-status { min-height: 22px; margin-top: 4px; }
.gc-status .qz-tries { display: inline-flex; }
.gc-spins { font: var(--display-w) 20px / 1 var(--display); }
.gc-cta { margin-top: auto; pointer-events: none; }
.gc-body .gc-cta { margin-top: 10px; }
/* roue miniature qui tourne doucement, plus vite au survol */
.gc-wheel-art { height: 190px; }
.gc-wheel-art .wheel-svg { width: 230px; height: 230px; margin-top: 70px; }
.gc-wheel-art .wheel-rot { transform-origin: 0 0; animation: gcSpin 40s linear infinite; }
.gc-wheel:hover .gc-wheel-art .wheel-rot { animation-duration: 6s; }
@keyframes gcSpin { to { transform: rotate(360deg); } }
.gc-soon { justify-content: center; gap: 8px; padding: 22px; border-style: dashed; background: transparent; }
.gc-soon .qz-kicker { margin: 0; }
.gc-soon h2 { font-size: calc(22px * var(--display-scale)); color: var(--muted); }
.back-games { display: inline-flex; align-items: center; gap: 4px; margin-bottom: 6px; font-size: 13px; color: var(--muted); }
.back-games:hover { color: var(--text); }
.back-games .i { width: 15px; height: 15px; }
@media (max-width: 900px) {
  .games-grid { grid-template-columns: 1fr; }
  .gc-quiz { grid-row: auto; }
  .gc-art { height: 200px; }
  .gc-fan img { width: 104px; }
}
@media (prefers-reduced-motion: reduce) { .game-card, .gc-wheel-art .wheel-rot { animation: none; } }
/* éventail : positions explicites (abs() n'est pas pris en charge partout) */
.gc-fan img { transform: translateX(-50%) rotate(var(--r)) translateY(var(--y)); bottom: -30px; width: 150px; }
.gc-fan img:nth-child(1) { --r: -18deg; --y: 18px; --r2: -26deg; --y2: 6px; z-index: 1; }
.gc-fan img:nth-child(2) { --r: -6deg; --y: 2px; --r2: -9deg; --y2: -16px; z-index: 2; }
.gc-fan img:nth-child(3) { --r: 6deg; --y: 2px; --r2: 9deg; --y2: -16px; z-index: 3; }
.gc-fan img:nth-child(4) { --r: 18deg; --y: 18px; --r2: 26deg; --y2: 6px; z-index: 2; }
.game-card:hover .gc-fan img { transform: translateX(-50%) rotate(var(--r2)) translateY(var(--y2)); }
.gc-quiz .gc-art { height: 330px; }
@media (max-width: 900px) { .gc-quiz .gc-art { height: 230px; } .gc-fan img { width: 112px; } }
/* hub : la roue n'est plus une carte de jeu ; le quiz occupe une ligne, la carte « bientôt » à côté s'étire à sa hauteur */
.gc-quiz { grid-row: auto; }
.gc-soon { align-items: flex-start; }
/* hub : le quiz sur deux lignes à gauche, « Qui est-ce ? » et « bientôt » à droite */
.gc-quiz { grid-row: span 2; }
.gc-shadow-art { height: 170px; background: radial-gradient(70% 90% at 50% 100%, rgba(120, 140, 255, 0.14), transparent 65%), var(--surface); }
.gc-shadow-art img { height: 150px; margin-top: 30px; filter: brightness(0) drop-shadow(0 0 1px rgba(255, 255, 255, 0.5)) drop-shadow(0 12px 16px rgba(0, 0, 0, 0.7)); transition: transform .4s cubic-bezier(.2, 1.3, .35, 1), filter .5s; }
.gc-qm { position: absolute; right: 22%; top: 18px; font: var(--display-w) 54px / 1 var(--display); color: var(--accent); transform: rotate(12deg); text-shadow: 0 6px 0 rgba(0, 0, 0, 0.5); transition: transform .4s cubic-bezier(.2, 1.6, .4, 1); }
.gc-shadow:hover .gc-shadow-art img { transform: translateY(-6px) scale(1.04); filter: brightness(.18) drop-shadow(0 0 1px rgba(255, 255, 255, 0.6)) drop-shadow(0 12px 16px rgba(0, 0, 0, 0.7)); }
.gc-shadow:hover .gc-qm { transform: rotate(-8deg) scale(1.15); }
.gc-shadow h2 { font-size: calc(26px * var(--display-scale)); }
/* page d'aperçu « Qui est-ce ? » */
.sg-badge { padding: 5px 11px; border-radius: 999px; border: 1px dashed var(--line-2); font-size: 12px; color: var(--muted); }
.sg-zone { max-width: 900px; }
.sg-stage { position: relative; display: grid; place-items: center; height: 300px; margin: 18px 0 16px; border-radius: 12px; overflow: hidden; background: radial-gradient(60% 80% at 50% 100%, rgba(120, 140, 255, 0.16), transparent 70%), var(--surface); }
.sg-glow { position: absolute; inset: auto 0 0; height: 40%; background: linear-gradient(transparent, rgba(0, 0, 0, 0.35)); }
.sg-shadow { position: relative; height: 250px; filter: brightness(0) drop-shadow(0 0 1.5px rgba(255, 255, 255, 0.55)) drop-shadow(0 18px 22px rgba(0, 0, 0, 0.75)); animation: sgFloat 4s ease-in-out infinite; }
@keyframes sgFloat { 50% { transform: translateY(-8px); } }
.sg-qm { position: absolute; right: calc(50% - 170px); top: 26px; font: var(--display-w) 72px / 1 var(--display); color: var(--accent); transform: rotate(12deg); text-shadow: 0 6px 0 rgba(0, 0, 0, 0.5); }
.sg-choices .qz-choice:disabled { opacity: .7; }
.sg-note { margin: 16px 0 0; font-size: 13px; }
@media (max-width: 900px) { .gc-quiz { grid-row: auto; } .sg-stage { height: 230px; } .sg-shadow { height: 190px; } .sg-qm { right: 14%; font-size: 56px; } }
@media (prefers-reduced-motion: reduce) { .sg-shadow { animation: none; } }
/* outils du propriétaire : repliés par défaut (clic sur « Outils » pour ouvrir) */
.gs-tools { gap: 0; }
.gs-tools .gt-sum { display: flex; align-items: center; justify-content: space-between; list-style: none; cursor: pointer; user-select: none; }
.gs-tools .gt-sum::-webkit-details-marker { display: none; }
.gs-tools .gt-sum .qz-kicker { margin: 0; }
.gs-tools .gt-sum .i { width: 14px; height: 14px; color: var(--muted); transition: transform .2s; }
.gs-tools[open] .gt-sum .i { transform: rotate(90deg); }
.gs-tools .gt-body { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.gc-shadow-art { align-items: end; }
.gc-shadow-art img { height: 140px; margin: 0 0 6px; }
/* page du quiz : tient sur un écran d'ordinateur (marge du bas réduite) */
@media (min-width: 901px) { .game-page { padding-bottom: 40px; } }
/* hub : toutes les cartes de jeu sur une ligne, même hauteur ; le quiz garde un peu plus de largeur mais n'est plus en double hauteur */
.games-grid { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; }
.gc-quiz { grid-row: auto; }
.gc-quiz .gc-art, .gc-shadow-art { height: 190px; }
.gc-fan img { width: 112px; bottom: -36px; }
.gc-quiz h2 { font-size: calc(30px * var(--display-scale)); }
.gc-body .gc-cta { margin-top: auto; }
.gc-status + .gc-cta, .gc-body p + .gc-cta { margin-top: auto; }
.gc-body { gap: 8px; }
.gc-body > .gc-cta { align-self: flex-start; }
.gc-body p { margin-bottom: 8px; }
@media (max-width: 1100px) { .games-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .gc-soon { grid-column: 1 / -1; } }
@media (max-width: 700px) { .games-grid { grid-template-columns: 1fr; } }
/* carte du quiz : les jaquettes occupent toute la largeur (plus de vide sur les côtés), fond flouté des mêmes jaquettes */
.gc-fan-bg { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(4, 1fr); filter: blur(22px) brightness(.42) saturate(1.2); transform: scale(1.25); }
.gc-fan-bg span { background: center / cover no-repeat; }
.gc-quiz .gc-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 55%, rgba(0, 0, 0, 0.45)); pointer-events: none; }
.gc-fan { z-index: 1; }
.gc-fan img { width: clamp(96px, 25%, 150px); bottom: -46px; left: calc(50% + (var(--i) - 1.5) * 23%); }
.gc-fan img:nth-child(1) { --r: -9deg; --y: 10px; --r2: -13deg; --y2: -2px; }
.gc-fan img:nth-child(2) { --r: -3deg; --y: 0px; --r2: -4deg; --y2: -14px; }
.gc-fan img:nth-child(3) { --r: 3deg; --y: 0px; --r2: 4deg; --y2: -14px; }
.gc-fan img:nth-child(4) { --r: 9deg; --y: 10px; --r2: 13deg; --y2: -2px; }
/* hub : inclinaison des cartes de jeu nettement plus discrète (environ un tiers de l'effet des petites cartes), reflet plus doux */
.game-card.tilt3d.tilting { transform: perspective(1400px) rotateX(calc(var(--rx, 0deg) * .3)) rotateY(calc(var(--ry, 0deg) * .3)); transition: transform .15s ease-out, border-color .2s, box-shadow .3s; }
.game-card.tilt3d::before { background: radial-gradient(circle at var(--gx, 50%) var(--gy, 30%), rgba(255, 255, 255, 0.1), transparent 55%); }
/* vitrine : grandes fissures d'or sombre derrière la pièce (version signée), en fondu */
.b3d-stage > canvas:first-child { z-index: 1; }
.b3d-stage canvas.b3d-cracks, .b3d-stage.ready canvas.b3d-cracks { z-index: 0; opacity: 0; pointer-events: none; transition: opacity .7s ease; }
.b3d-stage canvas.b3d-cracks.on { opacity: .9; }
/* musée en 3D : un canevas fixe sur la page (sous la barre du haut et les fenêtres) dessine les pièces
   à la place des médailles ; la médaille garde sa place, son ombre au sol et reste cliquable */
.coin-gallery { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 30; pointer-events: none; }
.medal.g3d .medal-coin { background: none !important; box-shadow: 0 16px 22px -14px rgba(0, 0, 0, 0.85) !important; transform: none !important; }
.medal.g3d .medal-coin > * { visibility: hidden; }
.medal.g3d:hover .medal-coin, .medal.g3d .medal-coin.tilt { transform: none !important; }
.medal.g3d .medal-coin::before, .medal.g3d .medal-coin::after { display: none !important; }
/* médaille pas encore obtenue : noire, cerclée de la couleur de sa rareté très assombrie */
.medal.locked .medal-coin { background: color-mix(in srgb, var(--rc, #b0703a) 30%, #050505) !important; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rc, #b0703a) 35%, transparent), 0 12px 22px -12px rgba(0, 0, 0, 0.9) !important; }
.medal.locked .medal-coin img { filter: grayscale(1) brightness(.2) contrast(1.15); }
.medal.g3d.locked .medal-coin { background: none !important; box-shadow: 0 16px 22px -14px rgba(0, 0, 0, 0.85) !important; }
/* pièces 3D : plus d'ombre ni de disque 2D derrière (la pièce 3D les remplace) */
.medal.g3d .medal-coin, .medal.g3d.locked .medal-coin { box-shadow: none !important; background: none !important; }
.pf-avatar.g3d, .pf-avatar.g3d.framed { background: none; border-color: transparent; box-shadow: none; }
.pf-avatar.g3d .pf-av-in { visibility: hidden; }
.pf-avatar.g3d:hover { transform: none; }
.av-opt.g3d, .av-opt.coin.g3d { background: none; border-color: transparent; box-shadow: none; }
.av-opt.g3d img { visibility: hidden; }
.av-opt.g3d:hover { transform: none; }
.b3d-change { align-self: flex-start; margin-top: 14px; }
.av-opt.g3d::before, .av-opt.g3d::after, .pf-avatar.g3d::before, .pf-avatar.g3d::after { display: none !important; }
/* musée : les badges en premier ; sous la grille, une barre compacte (pièce maîtresse + progression par rareté) */
.mu-sum { display: flex; align-items: center; gap: 28px; margin-top: 28px; padding: 14px 18px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.mu-sum .mu-legend { gap: 12px; flex: none; }
.mu-sum .mu-legend .medal { gap: 0; }
.mu-sum .mu-legend .medal-coin { width: 52px; }
.mu-sum .mu-legend .medal-cap { display: none; }
.mu-sum .mu-legend .qz-kicker { margin-bottom: 1px; }
.mu-sum .mu-legend b { font-size: calc(17px * var(--display-scale)); }
.mu-sum .mu-tiers { flex: 1; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px; max-width: none; padding-left: 26px; border-left: 1px solid var(--line); }
.mu-sum .tier { display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; gap: 5px 8px; font-size: 12px; }
.mu-sum .tier span { font-size: 10.5px; line-height: 1.2; }
.mu-sum .tier b { font-size: 13px; }
.mu-sum .tier b small { font-size: 10.5px; color: var(--muted); font-weight: 500; }
.mu-sum .tier i { grid-column: 1 / -1; height: 4px; }
.mu-sum .tier.r-signe i { background: linear-gradient(90deg, #f2c46a calc(var(--f) * 100%), rgba(242, 196, 106, .2) 0); box-shadow: inset 0 0 0 1px rgba(255, 236, 170, .14), 0 0 7px rgba(242, 196, 106, .12); }
@media (max-width: 900px) {
  .mu-sum { flex-direction: column; align-items: stretch; gap: 14px; }
  .mu-sum .mu-tiers { grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 14px 0 0; border-left: 0; border-top: 1px solid var(--line); }
}
/* en attendant sa pièce 3D : un disque sombre, sans image (on ne voit pas la médaille plate se changer en 3D) */
.coins3d .medal:not(.g3d) .medal-coin { background: radial-gradient(circle at 40% 35%, #151311, #070606 70%) !important; box-shadow: none !important; transform: none !important; }
.coins3d .medal:not(.g3d) .medal-coin > *, .coins3d .medal:not(.g3d) .medal-coin::before, .coins3d .medal:not(.g3d) .medal-coin::after { visibility: hidden; }
.coins3d .pf-avatar[data-badge]:not(.g3d) .pf-av-in { visibility: hidden; }
/* pièces pas encore obtenues : toutes noires, sans teinte de rareté */
.medal.locked .medal-coin, .medal.mystery .medal-coin, .r-legendaire.medal.mystery .medal-coin { background: #111; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06), 0 12px 22px -12px rgba(0, 0, 0, 0.9); }
.medal.locked .medal-cap small, .medal.mystery .medal-cap small { color: var(--faint); }
/* --- Vitrine de la pièce maîtresse : fenêtre craquelée de rouge sombre, textes à part --- */
.modal.b3d-modal.b3d-master { background: radial-gradient(120% 90% at 35% 50%, #1c0605 0%, #0b0303 60%, #060202 100%); border-color: rgba(160, 25, 15, 0.35); box-shadow: 0 40px 100px -20px rgba(0, 0, 0, 0.9), 0 0 60px -20px rgba(200, 20, 10, 0.35); }
.b3d-master .pm-cracks { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; animation: pmBreathe 5s ease-in-out infinite; }
@keyframes pmBreathe { 0%, 100% { opacity: .55; } 50% { opacity: .95; } }
.b3d-master .b3d { position: relative; z-index: 1; }
.b3d-master .b3d-stage { background: radial-gradient(55% 50% at 50% 45%, rgba(120, 15, 10, 0.35), transparent 70%); }
.b3d-master .b3d-plaque { border-left-color: rgba(160, 25, 15, 0.3); background: linear-gradient(transparent, rgba(30, 4, 3, 0.6)); }
.b3d-master .pm-kicker { font: 600 10.5px var(--font); letter-spacing: .22em; text-transform: uppercase; color: #c2271a; }
.b3d-master .pm-title { font: 900 italic calc(34px * var(--display-scale)) / 1 var(--display); letter-spacing: -.01em; text-transform: uppercase; color: #ffd9d2; text-shadow: 0 0 18px rgba(255, 40, 20, 0.65), 0 0 2px rgba(255, 90, 60, 0.9); animation: pmGlow 3.2s ease-in-out infinite; }
@keyframes pmGlow { 50% { text-shadow: 0 0 28px rgba(255, 40, 20, 0.9), 0 0 3px rgba(255, 120, 90, 1); } }
.b3d-master .pm-motto { font-style: italic; font-size: 14px; color: #e0574a; margin-bottom: 6px; }
.b3d-master .b3d-desc { color: #c9a9a3; }
.b3d-master .b3d-odds { color: #a2554b; }
.b3d-master #b3d-status.won { color: #ff6a55; }
@media (prefers-reduced-motion: reduce) { .b3d-master .pm-cracks, .b3d-master .pm-title { animation: none; } }
/* pièce maîtresse : titre sobre (droit, sans lueur qui pulse) */
.b3d-master .pm-title { font: var(--display-w) calc(30px * var(--display-scale)) / 1.1 var(--display); letter-spacing: var(--display-ls); text-transform: none; color: #f3e3df; text-shadow: none; animation: none; }
.b3d-master .pm-kicker { letter-spacing: .16em; color: #b3362a; }
/* pièce maîtresse : à l'ouverture, les failles du fond jaillissent avec un scintillement d'éclair, puis respirent */
.b3d-master .pm-cracks.strike { animation: pmStrike .9s steps(1, end) both, pmBreathe 5s ease-in-out .9s infinite; }
@keyframes pmStrike { 0% { opacity: 0; } 18% { opacity: 1; filter: brightness(2.2); } 30% { opacity: .35; } 42% { opacity: 1; filter: brightness(1.8); } 55% { opacity: .5; } 70% { opacity: 1; filter: brightness(1.3); } 100% { opacity: .9; filter: none; } }
@media (prefers-reduced-motion: reduce) { .b3d-master .pm-cracks.strike { animation: none; opacity: .8; } }
/* avatar de la barre du haut en pièce 3D (immobile) : on masque l'image plate et son cadre */
#profile-btn.g3d, #profile-btn.g3d.framed { background: none; border-color: transparent; box-shadow: none; }
#profile-btn.g3d > * { visibility: hidden; }
/* --- Roue repensée : en-tête, roue à gauche, panneau à droite (spins + chances en barres) --- */
.wheel-page.wp2 { display: block; min-height: 0; }
.wp-head { display: flex; flex-direction: column; gap: 4px; margin-bottom: 18px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.wp-head h1 { margin: 0; font: var(--display-w) calc(clamp(30px, 3vw, 40px) * var(--display-scale)) / 1 var(--display); letter-spacing: var(--display-ls); }
.wp-main { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 400px); gap: clamp(24px, 4vw, 56px); align-items: center; }
.wp2 .wheel { width: min(100%, calc(100vh - var(--top-h) - 170px), 640px); }
.wp2 .wheel-side { gap: 16px; }
.wp-spin { display: flex; flex-direction: column; gap: 12px; padding: 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.wp2 .spin-box { padding: 0; border: 0; }
.wp2 .spin-n { font-size: calc(56px * var(--display-scale)); }
.wp2 .spin-btn { height: 52px; font-size: 16px; }
.wp-odds { display: grid; gap: 18px; padding: 18px; border: 1px solid var(--line); border-radius: 14px; }
.wp2 .odds { gap: 8px; padding: 0; }
.wp2 .odd { grid-template-columns: 12px 108px 1fr auto; font-size: 13px; }
.wp2 .odd em { height: 4px; border-radius: 2px; background: var(--surface-3); position: relative; overflow: hidden; }
.wp2 .odd em::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--w); border-radius: 2px; background: var(--muted); }
.wp2 .odd-badge em::after, .wp2 .odd-badge2 em::after { background: #c9a35a; }
.wp2 .odd-chibi em::after, .wp2 .odd-chibi2 em::after { background: #7fb6a8; }
.wp2 .odd-miss em::after { background: var(--faint); }
.wp2 .odd-legend em::after { background: #e0352a; }
.wp2 .odd-tier i { background: var(--rc); box-shadow: inset 0 0 0 1px var(--rc-hi, transparent); }
.wp2 .odd-tier span { color: var(--rt); font-weight: 600; }
.wp2 .odd-tier em::after { background: var(--rt); }
.odd-chibi2 i { background: #26231d; box-shadow: inset 0 0 0 1px #7fb6a8; }
.odd-chibi i { box-shadow: inset 0 0 0 1px #7fb6a8; }
.odd-legend i { background: #0b0b0b; box-shadow: inset 0 0 0 1px #e0352a; }
/* cases de la roue : pièce maîtresse en rouge, 2 chibis */
.ws-chibi2 path { fill: #26231d; }
.ws-chibi2 .ws-label { fill: #bfe0d6; }
.ws-legend .ws-label { fill: #ff6a55; }
@media (max-width: 1000px) { .wp-main { grid-template-columns: 1fr; } .wp2 .wheel { width: min(100%, 520px); } }
/* bouton « spins » : nombre en grand + accès à la roue, en deux parties */
.wheel-link.wl2 { display: inline-flex; align-items: stretch; gap: 0; padding: 0; overflow: hidden; border-radius: 12px; border: 1px solid var(--line-2); background: var(--surface); }
.wl2 .wl-count { display: flex; flex-direction: row; align-items: baseline; gap: 6px; padding: 9px 14px; }
.wl2 .wl-count b { font: var(--display-w) 24px / 1 var(--display); letter-spacing: var(--display-ls); color: var(--text); }
.wl2 .wl-count small { font-size: 12px; color: var(--muted); }
.wl2 .wl-go { display: inline-flex; align-items: center; gap: 6px; padding: 0 14px; border-left: 1px solid var(--line-2); font-size: 13px; font-weight: 600; color: var(--muted); transition: background .15s, color .15s; }
.wl2 .wl-go .i { width: 15px; height: 15px; margin: 0; color: inherit; }
.wl2.ready { border-color: color-mix(in srgb, var(--accent) 55%, var(--line-2)); }
.wl2.ready .wl-count b { color: var(--accent); }
.wl2.ready .wl-go { background: var(--accent); color: var(--accent-ink); border-left-color: var(--accent); }
.wl2:hover .wl-go { color: var(--text); }
.wl2.ready:hover .wl-go { background: #ff6e4f; color: var(--accent-ink); }
.wheel-link.wl2 .wl-count, .wheel-link.wl2 .wl-go { flex-direction: row; white-space: nowrap; line-height: 1; }
.wheel-link.wl2 .wl-count { align-items: baseline; }
.wheel-link.wl2 .wl-go { align-items: center; }
/* --- Révélation de la pièce maîtresse : rouge, éclairs au lieu du flash tournant, pas de nom en bas --- */
.reveal.rv-master { --rt: #ff4a32; --rc: #b3140c; }
.reveal.rv-master .rv-rays { display: none; }
.reveal.rv-master .rv-foot { display: none; }
.reveal.rv-master .rv-bolts { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 0; pointer-events: none; opacity: 0; }
.reveal.rv-master .rv-bolts.strike { animation: pmStrike .9s steps(1, end) both, pmBreathe 5s ease-in-out .9s infinite; }
.rv-tier.pm b, .reveal.rv-master .rv-tier.r-legendaire.pm b { color: #ff3b2a; background: linear-gradient(90deg, #ff6a55, #ffd9d2 45%, #ff2a1a 70%, #b3140c); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; text-shadow: none; filter: drop-shadow(0 5px 0 rgba(0, 0, 0, 0.55)) drop-shadow(0 0 22px rgba(255, 40, 20, 0.6)); }
.reveal.rv-master .rv-tier.pm small { color: #ffb4a8; }
@media (prefers-reduced-motion: reduce) { .reveal.rv-master .rv-bolts.strike { animation: none; opacity: .85; } }
.reveal.rv-master::after { background: #ff2a1a; }
/* page de la roue : carte « Outils » (tests de badges) sous les chances */
.wp-tools { margin-top: 0; }

/* --- Pièce maîtresse : la roue rougeoie pendant sa longue fin de course, puis intro plein écran avant la révélation */
.wheel.pm-spin { filter: drop-shadow(0 0 28px rgba(255, 42, 26, 0.55)); animation: pmWheel .9s ease-in-out infinite; }
@keyframes pmWheel { 50% { filter: drop-shadow(0 0 46px rgba(255, 42, 26, 0.85)); } }
.pm-intro { position: fixed; inset: 0; z-index: 310; display: grid; place-items: center; background: #050303; opacity: 0; transition: opacity .35s; cursor: pointer; overflow: hidden; }
.pm-intro.in { opacity: 1; }
.pm-intro.out { opacity: 0; transition-duration: .3s; }
.pm-intro .rv-bolts { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; }
.pm-intro .rv-bolts.strike { animation: pmStrike .9s steps(1, end) both; }
.pm-intro.quake { animation: rvQuake .5s; }
.pm-core { position: relative; z-index: 1; display: grid; justify-items: center; gap: 10px; text-align: center; opacity: 0; transform: scale(2.6); filter: blur(10px); }
.pm-intro.slam .pm-core { animation: pmSlam .7s cubic-bezier(.2, 1.3, .4, 1) forwards; }
@keyframes pmSlam { 0% { opacity: 0; transform: scale(2.6); filter: blur(10px); } 60% { opacity: 1; transform: scale(.94); filter: none; } 100% { opacity: 1; transform: none; filter: none; } }
.pm-core b { font: 900 clamp(110px, 22vw, 260px) / 1 var(--jp); color: #ff2a1a; text-shadow: 0 0 40px rgba(255, 42, 26, 0.7), 0 8px 0 #4a0602; letter-spacing: .04em; }
.pm-core span { font: 900 italic calc(clamp(30px, 4.6vw, 60px) * var(--display-scale)) / 1 var(--display); text-transform: uppercase; color: #ffd9d2; letter-spacing: -.01em; }
.pm-core small { font: 700 12px var(--font); letter-spacing: .3em; text-transform: uppercase; color: #ff8a78; }
.pm-intro.slam .pm-core b { animation: pmGlitch 1.6s steps(1) .7s infinite; }
@keyframes pmGlitch { 0%, 100% { transform: none; } 8% { transform: translate(-4px, 2px); text-shadow: -6px 0 #00e0ff, 6px 0 #ff2a1a, 0 0 40px rgba(255, 42, 26, 0.7); } 12% { transform: none; } 55% { transform: translate(3px, -2px) skewX(-6deg); } 59% { transform: none; } }
.pm-intro::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle, #fff 0, #ff2a1a 40%, #3a0400 75%); opacity: 0; pointer-events: none; }
.pm-intro.shatter::after { animation: pmShatter .6s ease-out forwards; }
@keyframes pmShatter { 0% { opacity: 0; transform: scale(.2); } 35% { opacity: 1; } 100% { opacity: 1; transform: scale(1.6); } }
@media (prefers-reduced-motion: reduce) { .wheel.pm-spin, .pm-intro.quake, .pm-intro.slam .pm-core b { animation: none; } }

/* ===========================================================================
   Jeux : hub (une carte par jeu : image, nom, état du jour) et mini-jeux du jour
   =========================================================================== */
.mg-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.mg-grid .gc-quiz { grid-column: span 2; grid-row: auto; }
.mg-card .gc-art, .mg-grid .gc-quiz .gc-art { height: 168px; background: radial-gradient(80% 100% at 50% 100%, rgba(255, 255, 255, 0.04), transparent 70%), var(--surface); }
.mg-card .gc-body { gap: 6px; padding: 14px 16px 16px; }
.mg-card h2, .mg-grid .gc-quiz h2 { font-size: calc(22px * var(--display-scale)); }
.mg-card .gc-status { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; min-height: 22px; margin: 0; font-size: 12.5px; }
.gc-st-todo { color: var(--text); font-weight: 600; }
.gc-st-todo.on { color: var(--amber); }
.gc-max { color: var(--muted); }
.gc-st-done { display: inline-flex; align-items: center; gap: 5px; color: var(--muted); }
.gc-st-done .i { width: 14px; height: 14px; color: var(--green); }
.gc-won { font: 700 13px var(--font); color: var(--green); }
.gc-won.none { color: var(--faint); }
.mg-card.played .gc-art > * { opacity: .45; filter: grayscale(.6); transition: opacity .3s, filter .3s; }
.mg-card.played:hover .gc-art > * { opacity: .8; filter: none; }
.mg-card.played h2 { color: var(--muted); }
.mg-grid .gc-fan img { width: 96px; bottom: -40px; }
/* vignettes */
.gc-px { width: 120px; height: 120px; border-radius: 10px; image-rendering: pixelated; box-shadow: 0 14px 24px -14px rgba(0, 0, 0, 0.9); }
.gc-px-q { position: absolute; right: calc(50% - 82px); top: 14px; font: var(--display-w) 40px / 1 var(--display); color: var(--accent); transform: rotate(12deg); }
.gc-emo { display: flex; gap: 6px; font-size: 46px; line-height: 1; }
.gc-emo i { font-style: normal; display: inline-block; transition: transform .35s cubic-bezier(.2, 1.6, .4, 1); }
.mg-card:hover .gc-emo i:nth-child(1) { transform: translateY(-8px) rotate(-8deg); }
.mg-card:hover .gc-emo i:nth-child(2) { transform: translateY(-14px); transition-delay: .05s; }
.mg-card:hover .gc-emo i:nth-child(3) { transform: translateY(-8px) rotate(8deg); transition-delay: .1s; }
.gc-cl { position: relative; width: 150px; height: 120px; }
.gc-cl i { position: absolute; left: 0; right: 0; top: calc(var(--i) * 27px); height: 24px; display: flex; align-items: center; gap: 8px; padding: 0 8px; border: 1px solid var(--line-2); border-radius: 6px; background: var(--bg-2); transform: translateX(calc((var(--i) - 1.5) * 6px)); transition: transform .4s cubic-bezier(.2, 1.3, .4, 1); }
.gc-cl b { display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); font: 700 10px var(--font); }
.gc-cl em { height: 4px; flex: 1; border-radius: 2px; background: var(--surface-3); }
.gc-cl em + em { flex: .5; }
.mg-card:hover .gc-cl i { transform: none; }
.gc-st { display: flex; gap: 5px; }
.gc-st i { display: grid; place-items: center; width: 34px; height: 34px; font: 700 18px var(--font); font-style: normal; color: #fff; background: #1f5f9e; border-radius: 3px; }
.gc-st i.r { background: #d6342b; }
.gc-st i.y { background: #1f5f9e; position: relative; z-index: 0; }
.gc-st i.y::before { content: ""; position: absolute; inset: 2px; z-index: -1; border-radius: 50%; background: #f2b51b; }
.gc-sz { position: relative; display: flex; align-items: flex-end; justify-content: center; gap: 4px; height: 150px; padding-left: 20px; }
.gc-sz-r { position: absolute; left: 0; bottom: 0; top: 0; display: flex; flex-direction: column-reverse; justify-content: space-between; }
.gc-sz-r i { width: 8px; height: 1px; background: var(--faint); }
.gc-sz-r i:nth-child(odd) { width: 14px; }
.gc-sz-p { height: calc(var(--h) / 220 * 140px); width: auto; filter: drop-shadow(0 10px 12px rgba(0, 0, 0, 0.6)); transform-origin: bottom center; transition: transform .45s cubic-bezier(.2, 1.4, .4, 1) calc(var(--k) * 50ms); }
.gc-sz-line { position: absolute; left: 14px; right: -6px; bottom: 141px; border-top: 1.5px dashed var(--accent); opacity: .7; transition: bottom .45s cubic-bezier(.2, 1.4, .4, 1); }
.mg-card:hover .gc-sz-p { transform: scaleY(.9); }
.mg-card:hover .gc-sz-line { bottom: 127px; }
@media (max-width: 1100px) { .mg-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .mg-grid { grid-template-columns: 1fr; } .mg-grid .gc-quiz { grid-column: auto; } }

/* --- commun aux mini-jeux */
.mg-zone { margin-top: 6px; }
.mg-head { align-items: center; }
.mg-head .qz-head-r { display: flex; align-items: center; gap: 14px; }
.mg-lead { margin: 14px 0 0; font-size: 14px; }
.mg-tools { margin-top: 16px; max-width: 420px; }
.mg-done { display: flex; align-items: center; gap: 20px; margin: 18px 0 4px; padding: 16px 18px; border: 1px solid var(--line-2); border-radius: 12px; background: var(--surface); }
.mg-done.win { border-color: color-mix(in srgb, var(--green) 45%, var(--line)); background: color-mix(in srgb, var(--green) 6%, var(--surface)); }
.mg-done-n { display: flex; flex-direction: column; align-items: center; min-width: 64px; font: var(--display-w) calc(40px * var(--display-scale)) / 1 var(--display); color: var(--faint); }
.mg-done.win .mg-done-n { color: var(--green); }
.mg-done-n small { font: 600 11px var(--font); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-top: 4px; }
.mg-done-t { flex: 1; min-width: 0; }
.mg-done-t p { margin: 0 0 2px; font-size: 15px; }
.px-row { display: flex; gap: 8px; align-items: center; }
.px-row .input { flex: 1; min-width: 0; height: 44px; font-size: 15px; }
.px-row .btn { height: 44px; }
.px-ask { display: block; margin-bottom: 8px; font: var(--display-w) calc(19px * var(--display-scale)) / 1.2 var(--display); }
.px-pot { font-size: 12.5px; color: var(--muted); white-space: nowrap; }
.px-pot b { color: var(--amber); font-size: 15px; }
.em-next { display: flex; gap: 10px; justify-content: flex-end; margin-top: 18px; }
.st-k { padding: 0 5px; border-radius: 3px; color: #fff; }
.st-k.r { background: #d6342b; }
.st-k.y { background: #b98a10; }
@media (max-width: 700px) { .mg-head { flex-wrap: wrap; } .mg-done { flex-wrap: wrap; } }

/* --- Pixel */
.px-layout { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 28px; margin-top: 20px; align-items: start; }
.px-frame { position: relative; width: 330px; max-width: 100%; border-radius: 12px; overflow: hidden; border: 1px solid var(--line-2); background: var(--surface); box-shadow: 0 30px 50px -30px rgba(0, 0, 0, 0.9); }
.px-frame canvas { display: block; width: 100%; height: auto; image-rendering: pixelated; }
.px-frame.sharp canvas { image-rendering: auto; }
.px-cap { position: absolute; left: 0; right: 0; bottom: 0; display: grid; gap: 2px; padding: 26px 14px 12px; background: linear-gradient(transparent, rgba(0, 0, 0, 0.85)); }
.px-cap b { font: var(--display-w) calc(20px * var(--display-scale)) / 1.1 var(--display); }
.px-cap span { font-size: 12.5px; color: var(--muted); }
.px-side { display: grid; gap: 16px; align-content: start; min-width: 0; }
.px-form small { display: block; margin-top: 8px; font-size: 12.5px; }
.px-anime { display: flex; gap: 14px; align-items: center; padding: 12px; border: 1px solid color-mix(in srgb, var(--amber) 40%, var(--line)); border-radius: 10px; background: color-mix(in srgb, var(--amber) 6%, var(--surface)); }
.px-anime img { width: 54px; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 6px; }
.px-anime b { display: block; font: var(--display-w) calc(18px * var(--display-scale)) / 1.15 var(--display); margin-bottom: 2px; }
.px-tries { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.px-tries li { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto auto; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 8px; background: var(--surface); font-size: 14px; }
.px-tries li > span { font: 600 11px var(--font); color: var(--faint); }
.px-tries b { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.px-tries li.ko b { color: var(--muted); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--red) 70%, transparent); }
.px-tries em { display: grid; place-items: center; }
.px-tries em .i { width: 16px; height: 16px; }
.px-tries li.ok em { color: var(--green); }
.px-tries li.ko em { color: var(--red); }
.px-tries small { font-size: 11px; color: var(--faint); text-transform: uppercase; letter-spacing: .08em; }
.px-side .mg-done { margin: 0; }
@media (max-width: 760px) { .px-layout { grid-template-columns: 1fr; } .px-frame { margin: 0 auto; width: min(330px, 100%); } }

/* --- Devine l'anime */
.em-diff { display: flex; align-items: center; gap: 14px; margin-top: 16px; }
.em-diff .qz-kicker { margin: 0; }
.em-steps { display: flex; gap: 4px; flex: 1; max-width: 520px; }
.em-steps i { position: relative; flex: 1; height: 26px; display: grid; place-items: center; border-radius: 5px; background: var(--surface); border: 1px solid var(--line); font: 600 11px var(--font); font-style: normal; color: var(--faint); letter-spacing: .04em; }
.em-steps i.on { background: color-mix(in srgb, var(--accent) calc(18% + 0%), var(--surface)); border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); color: var(--muted); }
.em-steps i.cur { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.em-stage { display: grid; place-items: center; gap: 12px; margin: 22px 0 6px; padding: 34px 16px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); transition: border-color .3s, background .3s; }
.em-stage.ok { border-color: var(--green); background: color-mix(in srgb, var(--green) 8%, var(--surface)); }
.em-stage.ko { border-color: var(--red); background: color-mix(in srgb, var(--red) 7%, var(--surface)); }
.em-emojis { display: flex; gap: clamp(10px, 3vw, 30px); font-size: clamp(56px, 9vw, 96px); line-height: 1.1; }
.em-emojis span { display: inline-block; animation: emPop .5s cubic-bezier(.2, 1.6, .4, 1) both; animation-delay: calc(var(--k) * .14s); }
@keyframes emPop { from { opacity: 0; transform: scale(.3) rotate(-14deg); } }
.em-verdict { display: grid; justify-items: center; gap: 2px; text-align: center; }
.em-verdict b { font: 600 12px var(--font); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.em-stage.ok .em-verdict b { color: var(--green); }
.em-stage.ko .em-verdict b { color: var(--red); }
.em-verdict span { font: var(--display-w) calc(28px * var(--display-scale)) / 1.15 var(--display); }
.em-form { display: grid; gap: 12px; max-width: 620px; margin: 18px auto 0; }
.em-hint { justify-self: center; color: var(--muted); }
.em-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.em-recap, .hl-recap, .sz-recap { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 6px; }
.em-recap li { display: grid; grid-template-columns: 120px minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: 14px; align-items: center; padding: 10px 14px; border-radius: 8px; background: var(--surface); }
.em-mini { grid-row: span 2; font-size: 26px; letter-spacing: 2px; }
.em-recap b { font-weight: 600; }
.em-recap small { grid-column: 2; color: var(--muted); font-size: 12px; }
.em-recap em { grid-column: 3; grid-row: 1 / span 2; }
.em-recap em .i, .hl-recap .i { width: 18px; height: 18px; }
.em-recap li.ok em, .hl-recap li.ok > .i { color: var(--green); }
.em-recap li.ko em, .hl-recap li.ko > .i { color: var(--red); }
@media (max-width: 600px) { .em-diff { flex-direction: column; align-items: stretch; } .em-steps i span { font-size: 9px; } .em-choices { grid-template-columns: 1fr; } .em-recap li { grid-template-columns: 84px minmax(0, 1fr) auto; } .em-mini { font-size: 20px; } }

/* --- Classe-les */
.cl-pick { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 18px; max-width: 760px; }
.cl-opt { display: grid; gap: 10px; padding: 0; border: 0; background: none; text-align: left; }
.cl-cover { display: block; aspect-ratio: 2 / 3; border-radius: 10px; overflow: hidden; background: var(--surface); border: 1px solid var(--line); transition: border-color .2s, transform .25s; }
.cl-cover img { width: 100%; height: 100%; object-fit: cover; }
.cl-opt:hover .cl-cover { border-color: var(--accent); transform: translateY(-3px); }
.cl-opt b { font: var(--display-w) calc(17px * var(--display-scale)) / 1.2 var(--display); }
.cl-list { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 8px; max-width: 820px; }
.cl-ev { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 58px; padding: 10px 16px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); text-align: left; font: 500 15px var(--font); transition: border-color .15s, background .15s; }
.cl-ev:hover { border-color: var(--line-2); background: var(--surface-2); }
.cl-n { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; border: 1.5px dashed var(--line-2); font: 700 14px var(--font); color: var(--accent-ink); }
.cl-ev.on { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); }
.cl-ev.on .cl-n { border: 0; background: var(--accent); animation: clPop .3s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes clPop { from { transform: scale(.4); } }
.cl-list.done li { display: flex; align-items: center; gap: 14px; min-height: 54px; padding: 10px 16px; border-radius: 10px; background: var(--surface); border: 1px solid var(--line); }
.cl-list.done .cl-n { border: 0; background: var(--surface-3); color: var(--text); }
.cl-list.done li.ok { border-color: color-mix(in srgb, var(--green) 50%, var(--line)); }
.cl-list.done li.ok .cl-n { background: var(--green); color: #0e1a0c; }
.cl-list.done li.ko { border-color: color-mix(in srgb, var(--red) 50%, var(--line)); }
.cl-list.done li.ko .cl-n { background: var(--red); color: #1a0806; }
.cl-t { flex: 1; min-width: 0; }
.cl-list.done em { font: 600 12px var(--font); color: var(--muted); white-space: nowrap; }
.cl-list.done li.ok em { color: var(--green); }
.cl-list.done em .i { width: 18px; height: 18px; }
.cl-recap { display: grid; gap: 8px; margin-top: 16px; }
.cl-rd { border: 1px solid var(--line); border-radius: 10px; background: var(--bg-2); padding: 0 14px; }
.cl-rd summary { display: flex; justify-content: space-between; align-items: center; padding: 12px 0; cursor: pointer; list-style: none; }
.cl-rd summary em { font: 600 12px var(--font); letter-spacing: .1em; text-transform: uppercase; }
.cl-rd summary em.ok { color: var(--green); } .cl-rd summary em.ko { color: var(--red); }
.cl-rd .cl-list { margin: 0 0 14px; }
@media (max-width: 600px) { .cl-pick { gap: 10px; } .cl-opt b { font-size: 14px; } }

/* --- Wordtaku (le Sutom des animes) : couleurs du Sutom (bleu, carré rouge, rond jaune) */
.wt-zone { --wt-blue: #1d5a96; --wt-red: #d6342b; --wt-yel: #f2b51b; padding: 26px 28px 30px; }
/* choix de l'anime */
.wt-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 440px); gap: 28px; align-items: end; padding-bottom: 24px; border-bottom: 1px solid var(--line); }
.wt-hero h2 { margin: 2px 0 8px; font: var(--display-w) calc(clamp(30px, 3.4vw, 44px) * var(--display-scale)) / 1.05 var(--display); letter-spacing: var(--display-ls); }
.wt-hero p { margin: 0; max-width: 54ch; font-size: 14.5px; }
.wt-hero p b { color: var(--text); }
.wt-search { position: relative; }
.wt-search .input { height: 52px; font-size: 16px; border-radius: 12px; }
.wt-search .input-icon .i { left: 16px; width: 18px; height: 18px; }
.wt-search .input-icon .input { padding-left: 44px; }
.wt-results { position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 6px); margin: 0; padding: 6px; list-style: none; border: 1px solid var(--line-2); border-radius: 12px; background: var(--surface); box-shadow: 0 24px 40px -18px rgba(0, 0, 0, 0.9); }
.wt-hit { display: flex; align-items: center; gap: 12px; width: 100%; padding: 6px 10px 6px 6px; border: 0; border-radius: 8px; background: none; text-align: left; font-weight: 600; }
.wt-hit img { width: 34px; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 4px; }
.wt-hit span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wt-hit .i { width: 16px; height: 16px; color: var(--faint); }
.wt-hit.on, .wt-hit:hover { background: var(--surface-3); }
.wt-hit.on .i { color: var(--accent); }
.wt-none { padding: 12px; color: var(--muted); font-size: 14px; }
.wt-top-head { display: flex; align-items: baseline; gap: 12px; margin: 22px 0 6px; }
.wt-top-head .qz-kicker { margin: 0; }
.wt-top { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 26px 18px; }
.wt-opt { position: relative; display: grid; gap: 8px; width: 100%; padding: 0 0 0 50px; border: 0; background: none; text-align: left; animation: wtIn .5s cubic-bezier(.2, 1, .3, 1) both; animation-delay: calc(var(--i) * .04s); }
@keyframes wtIn { from { opacity: 0; transform: translateY(14px); } }
.wt-rank { position: absolute; left: -4px; bottom: 34px; z-index: 0; font: 900 clamp(96px, 9vw, 150px) / .8 var(--display); letter-spacing: -.08em; color: var(--bg-2); -webkit-text-stroke: 2px var(--line-2); transition: -webkit-text-stroke-color .25s, color .25s; }
.wt-top li:first-child .wt-rank { -webkit-text-stroke-color: color-mix(in srgb, var(--accent) 70%, var(--line-2)); }
.wt-poster { position: relative; z-index: 1; display: block; aspect-ratio: 2 / 3; border-radius: 10px; overflow: hidden; background: var(--surface); box-shadow: -10px 14px 28px -14px rgba(0, 0, 0, 0.95); transition: transform .3s cubic-bezier(.2, 1.3, .4, 1), box-shadow .3s; }
.wt-poster img { width: 100%; height: 100%; object-fit: cover; }
.wt-opt b { position: relative; z-index: 1; font-size: 13.5px; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.wt-opt small { position: relative; z-index: 1; margin-top: -4px; font-size: 11.5px; color: var(--muted); }
.wt-opt:hover .wt-poster { transform: translateY(-6px) rotate(-1.5deg); box-shadow: -14px 22px 34px -14px rgba(0, 0, 0, 0.95), 0 0 0 2px var(--accent); }
.wt-opt:hover .wt-rank { color: color-mix(in srgb, var(--accent) 22%, var(--bg-2)); -webkit-text-stroke-color: var(--accent); }
.wt-confirm { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 24px; align-items: center; }
.wt-confirm img { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 10px; box-shadow: 0 20px 34px -18px rgba(0, 0, 0, 0.9); }
.wt-confirm h3 { margin: 2px 0 10px; font: var(--display-w) calc(28px * var(--display-scale)) / 1.1 var(--display); letter-spacing: var(--display-ls); }
.wt-confirm p { margin: 0 0 18px; }
@media (max-width: 900px) { .wt-hero { grid-template-columns: 1fr; } .wt-top { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) { .wt-top { grid-template-columns: repeat(2, minmax(0, 1fr)); } .wt-confirm { grid-template-columns: 110px 1fr; gap: 16px; } .wt-zone { padding: 18px 16px 22px; } }

/* partie */
.wt-board { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 34px; align-items: start; }
.wt-side { position: relative; display: grid; gap: 6px; align-content: start; }
.wt-side .qz-help { position: absolute; top: 8px; right: 8px; background: rgba(0, 0, 0, 0.6); }
.wt-cover { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 12px; margin-bottom: 10px; box-shadow: 0 24px 40px -22px rgba(0, 0, 0, 0.95); }
.wt-side .qz-kicker { margin: 0; }
.wt-anime { font: var(--display-w) calc(22px * var(--display-scale)) / 1.15 var(--display); letter-spacing: var(--display-ls); }
.wt-facts { display: flex; gap: 14px; margin-top: 6px; font-size: 13px; color: var(--muted); }
.wt-facts b { color: var(--text); font-size: 15px; }
.wt-tries { display: flex; align-items: center; gap: 6px; margin-top: 8px; }
.wt-tries i { width: 12px; height: 12px; border-radius: 50%; background: var(--accent); }
.wt-tries i.used { background: var(--surface-3); }
.wt-tries i.won { background: var(--green); }
.wt-tries small { margin-left: 6px; font-size: 12.5px; color: var(--muted); }
.wt-legend { list-style: none; margin: 14px 0 0; padding: 12px 0 0; border-top: 1px solid var(--line); display: grid; gap: 8px; font-size: 13px; color: var(--muted); }
.wt-legend li { display: flex; align-items: center; gap: 10px; }
.wt-legend i { position: relative; z-index: 0; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 3px; background: #1d5a96; color: #fff; font: 700 13px var(--font); font-style: normal; }
.wt-legend i.r { background: #d6342b; }
.wt-legend i.y::before { content: ""; position: absolute; inset: 2px; z-index: -1; border-radius: 50%; background: #f2b51b; }
.wt-main { display: grid; justify-items: center; gap: 10px; min-width: 0; }
.wt-grid { --t: clamp(36px, min(calc((100vw - 460px) / var(--len) - 6px), 8.4vh), 70px); display: grid; gap: 5px; padding: 10px; border-radius: 10px; background: #0b2744; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05), 0 30px 60px -30px rgba(0, 0, 0, 0.9); perspective: 800px; }
.wt-row { display: flex; gap: 5px; }
.wt-row i { position: relative; z-index: 0; display: grid; place-items: center; width: var(--t); height: var(--t); border-radius: 3px; background: var(--wt-blue); color: #fff; font: 800 calc(var(--t) * .5) / 1 var(--font); font-style: normal; text-transform: uppercase; transform-style: preserve-3d; }
.wt-row.blank i { background: color-mix(in srgb, var(--wt-blue) 55%, #0b2744); }
.wt-row.cur i { background: #2869a8; color: rgba(255, 255, 255, 0.35); }
.wt-row.cur i.on { color: #fff; }
.wt-row i.r { background: var(--wt-red); }
.wt-row i.y::before { content: ""; position: absolute; inset: 3px; z-index: -1; border-radius: 50%; background: var(--wt-yel); animation: wtDot .3s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes wtDot { from { transform: scale(0); } }
.wt-row i.pop { animation: wtPop .16s ease-out; }
@keyframes wtPop { 50% { transform: scale(1.14); } }
.wt-row i.flip { animation: wtFlip .46s ease-in-out; }
@keyframes wtFlip { 0% { transform: rotateX(0); } 50% { transform: rotateX(90deg); } 100% { transform: rotateX(0); } }
.wt-row.win i { animation: wtWave .6s cubic-bezier(.2, 1.6, .4, 1) both; animation-delay: calc(var(--k, 0) * 0s); }
.wt-row.win i:nth-child(2) { animation-delay: .07s; } .wt-row.win i:nth-child(3) { animation-delay: .14s; } .wt-row.win i:nth-child(4) { animation-delay: .21s; } .wt-row.win i:nth-child(5) { animation-delay: .28s; }
.wt-row.win i:nth-child(6) { animation-delay: .35s; } .wt-row.win i:nth-child(7) { animation-delay: .42s; } .wt-row.win i:nth-child(8) { animation-delay: .49s; } .wt-row.win i:nth-child(9) { animation-delay: .56s; }
@keyframes wtWave { 40% { transform: translateY(-18px) scale(1.08); } }
.wt-msg { min-height: 22px; margin: 2px 0 0; font-size: 14px; color: var(--muted); text-align: center; }
.wt-msg.bad { color: var(--red); font-weight: 600; }
.wt-msg.pop { animation: emPop .35s cubic-bezier(.2, 1.6, .4, 1); }
.wt-kb { display: grid; gap: 7px; width: min(100%, 640px); margin-top: 4px; }
.wt-kb div { display: flex; gap: 6px; justify-content: center; }
.wt-kb button { flex: 1; max-width: 56px; height: 54px; padding: 0; border: 0; border-radius: 8px; background: var(--surface-3); color: var(--text); font: 700 16px var(--font); box-shadow: 0 2px 0 rgba(0, 0, 0, 0.45); transition: background .2s, transform .08s; }
.wt-kb button:hover { background: var(--line-2); }
.wt-kb button:active { transform: translateY(2px); box-shadow: none; }
.wt-kb button.wide { max-width: 92px; flex: 1.6; font-size: 13px; }
.wt-kb button.r { background: var(--wt-red); color: #fff; }
.wt-kb button.y { background: #b98a10; color: #fff; }
.wt-kb button.x { background: var(--bg); color: var(--faint); box-shadow: none; }
@media (max-width: 860px) { .wt-board { grid-template-columns: 1fr; gap: 18px; } .wt-side { grid-template-columns: 74px minmax(0, 1fr); column-gap: 14px; } .wt-cover { grid-row: span 4; margin: 0; } .wt-legend, .wt-tries { grid-column: 2; } .wt-legend { display: none; } .wt-grid { --t: clamp(30px, calc((100vw - 90px) / var(--len) - 5px), 60px); } .wt-kb button { height: 48px; } }

/* fin : la carte du personnage se retourne, le mot s'inscrit en rouge */
.wt-reveal { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "card who" "card done"; column-gap: 32px; align-items: center; margin-top: 30px; padding-top: 26px; border-top: 1px solid var(--line); }
.wt-reveal .mg-done { grid-area: done; margin: 16px 0 0; }
.wt-card { grid-area: card; width: 200px; aspect-ratio: 2 / 3; perspective: 900px; }
.wt-card-in { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transform: rotateY(180deg); }
.wt-reveal.in .wt-card-in { animation: wtCard 1.1s cubic-bezier(.3, 1.3, .5, 1) .15s forwards; }
.wt-reveal.still .wt-card-in { animation: none; transform: none; }
@keyframes wtCard { 0% { transform: rotateY(180deg) scale(.8); } 100% { transform: rotateY(0) scale(1); } }
.wt-card-back, .wt-card-front { position: absolute; inset: 0; border-radius: 12px; overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.wt-card-back { display: grid; place-items: center; transform: rotateY(180deg); background: #0b2744; box-shadow: inset 0 0 0 3px #1d5a96; color: #f2b51b; font: 700 54px / 1 var(--jp); }
.wt-card-front { box-shadow: 0 0 0 3px var(--wt-red), 0 30px 50px -20px rgba(0, 0, 0, 0.95); }
.wt-card-front img { width: 100%; height: 100%; object-fit: cover; }
.wt-who { grid-area: who; display: grid; gap: 6px; justify-items: start; }
.wt-who .qz-kicker { margin: 0; }
.wt-word { display: flex; gap: 4px; }
.wt-word i { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 3px; background: var(--wt-red); color: #fff; font: 800 22px var(--font); font-style: normal; }
.wt-reveal.in .wt-word i { animation: wtLetter .45s cubic-bezier(.2, 1.6, .4, 1) both; animation-delay: calc(.7s + var(--k) * .12s); }
.wt-reveal.still .wt-word i { animation: none; }
@keyframes wtLetter { from { opacity: 0; transform: translateY(-20px) rotateX(90deg); } }
.wt-name { margin-top: 4px; font: var(--display-w) calc(clamp(26px, 3vw, 38px) * var(--display-scale)) / 1.05 var(--display); letter-spacing: var(--display-ls); }
.wt-reveal.in .wt-name, .wt-reveal.in .wt-who small { animation: wtIn .5s ease both; animation-delay: 1.3s; }
.wt-reveal.in .mg-done { animation: wtIn .5s ease both; animation-delay: 1.5s; }
.wt-reveal.still .wt-name, .wt-reveal.still .wt-who small, .wt-reveal.still .mg-done { animation: none; }
.wt-zone.wt-over .wt-kb { display: none; }
@media (max-width: 700px) { .wt-reveal { grid-template-columns: 110px minmax(0, 1fr); grid-template-areas: "card who" "done done"; column-gap: 16px; } .wt-card { width: 110px; } .wt-word i { width: 30px; height: 30px; font-size: 16px; } }
@media (prefers-reduced-motion: reduce) { .wt-opt, .wt-row i.pop, .wt-row i.flip, .wt-row.win i, .wt-reveal.in .wt-card-in, .wt-reveal.in .wt-word i, .wt-reveal.in .wt-name, .wt-reveal.in .mg-done { animation: none; transform: none; } }

/* hub : Wordtaku en grande carte, quiz en carte normale, essais au lieu des spins */
.mg-grid .gc-quiz { grid-column: auto; }
.mg-grid .gc-feat { grid-column: span 2; }
.mg-card .gc-art, .mg-grid .gc-quiz .gc-art { height: 200px; }
.mg-grid .gc-quiz .gc-fan img { width: 76px; bottom: -14px; border-radius: 6px; }
.mg-grid .gc-quiz h2 { font-size: calc(22px * var(--display-scale)); }
.gc-res { font: 700 12.5px var(--font); color: var(--red); }
.gc-res.ok { color: var(--green); }
.gc-feat h2 { font-size: calc(28px * var(--display-scale)); }
.gc-wt { position: relative; display: flex; align-items: center; gap: 22px; }
.gc-wt-grid { display: grid; gap: 4px; padding: 7px; border-radius: 7px; background: #0b2744; box-shadow: 0 24px 40px -20px rgba(0, 0, 0, 0.9); transform: rotate(-3deg); transition: transform .4s cubic-bezier(.2, 1.3, .4, 1); }
.gc-wt-row { display: flex; gap: 4px; }
.gc-wt-row i { position: relative; z-index: 0; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 3px; background: #1d5a96; color: #fff; font: 800 19px var(--font); font-style: normal; }
.gc-wt-row i.r { background: #d6342b; }
.gc-wt-row i.y::before { content: ""; position: absolute; inset: 3px; z-index: -1; border-radius: 50%; background: #f2b51b; }
.mg-card:hover .gc-wt-row:last-child i { animation: wtWave .6s cubic-bezier(.2, 1.6, .4, 1) both; animation-delay: calc(var(--k) * .06s); }
.gc-wt-who { height: 168px; width: auto; filter: drop-shadow(0 14px 16px rgba(0, 0, 0, 0.7)); transform: translateY(10px) rotate(4deg); transition: transform .4s cubic-bezier(.2, 1.3, .4, 1); }
.mg-card:hover .gc-wt-grid { transform: rotate(0); }
.mg-card:hover .gc-wt-who { transform: translateY(0) rotate(0) scale(1.05); }
.gc-feat .gc-art { background: radial-gradient(60% 90% at 70% 100%, rgba(214, 52, 43, 0.12), transparent 70%), var(--surface); }
@media (max-width: 1100px) { .gc-wt-row i { width: 30px; height: 30px; font-size: 15px; } .gc-wt-who { height: 130px; } }
@media (max-width: 560px) { .mg-grid .gc-feat { grid-column: auto; } .gc-wt-row i { width: 26px; height: 26px; font-size: 13px; } .gc-wt-who { height: 110px; } }

/* --- Plus ou moins */

/* --- Taille */
.sz-layout { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 28px; margin-top: 20px; align-items: center; }
/* scène : repère à gauche, personnage à droite ; --y = taille / max de l'échelle (le cadre ne change pas, les graduations si) */
.sz-scene { position: relative; height: 400px; margin: 24px 0 30px 46px; border-bottom: 2px solid var(--line-2); }
.sz-ruler span { position: absolute; left: 0; right: 0; bottom: var(--y); border-top: 1px solid var(--line); transition: bottom .15s; }
.sz-ruler i { position: absolute; right: calc(100% + 8px); top: -8px; font: 500 11px var(--font); font-style: normal; color: var(--faint); white-space: nowrap; }
.sz-ref, .sz-char { position: absolute; bottom: 0; height: var(--y); transform: translateX(-50%); display: block; transition: height .15s; }
.sz-ref { left: 27%; }
.sz-char { left: 70%; }
.sz-ref img, .sz-ref .human, .sz-char img { display: block; height: 100%; width: auto; max-width: none; }
.sz-ref .human { fill: var(--surface-3); }
.sz-ref img { filter: saturate(.55) brightness(.8) drop-shadow(0 8px 12px rgba(0, 0, 0, 0.5)); }
.sz-char img { filter: drop-shadow(0 10px 14px rgba(0, 0, 0, 0.55)); }
.sz-ref small { position: absolute; left: 50%; transform: translateX(-50%); top: calc(100% + 6px); font-size: 11px; color: var(--faint); white-space: nowrap; }
.sz-line { position: absolute; left: 0; right: 0; bottom: var(--y); border-top: 1.5px dashed var(--accent); transition: bottom .15s; pointer-events: none; }
.sz-line span { position: absolute; right: 0; top: -22px; font: 700 12px var(--font); color: var(--accent); }
.sz-line.real { border-top: 2px solid var(--green); }
.sz-line.real span { color: var(--green); right: auto; left: 6px; }
.sz-scene.sz-revealed :is(.sz-ref, .sz-char, .sz-line, .sz-ruler span) { transition-duration: .9s; transition-timing-function: cubic-bezier(.2, 1, .3, 1); }
.px-row .sz-unit { flex: 0 0 auto; width: 78px; }
.sz-side { display: grid; gap: 10px; align-content: center; }
.sz-name { font: var(--display-w) calc(28px * var(--display-scale)) / 1.1 var(--display); }
.sz-side input[type="range"] { width: 100%; accent-color: var(--accent); margin: 6px 0 4px; }
.sz-num { max-width: 110px; }
.sz-res { display: grid; grid-template-columns: auto 1fr; align-items: baseline; column-gap: 10px; padding: 14px 16px; border-radius: 10px; background: var(--surface); margin-top: 6px; }
.sz-res b { font: var(--display-w) calc(44px * var(--display-scale)) / 1 var(--display); color: var(--amber); }
.sz-res span { color: var(--muted); }
.sz-res small { grid-column: 1 / -1; margin-top: 6px; color: var(--muted); font-size: 13px; }
.sz-recap li { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto 64px; column-gap: 16px; align-items: center; padding: 8px 16px; border-radius: 10px; background: var(--surface); animation: sz-in .35s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--i) * 60ms); }
.sz-rc-img { width: 52px; height: 72px; display: flex; align-items: flex-end; justify-content: center; overflow: hidden; }
.sz-rc-img img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .5)); }
.sz-rc-who, .sz-rc-vals { display: grid; gap: 2px; min-width: 0; }
.sz-rc-who b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sz-rc-who small, .sz-rc-vals small { color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sz-rc-vals { text-align: right; }
.sz-rc-vals b { color: var(--green); font-size: 15px; }
.sz-rc-pts { font: var(--display-w) 26px / 1 var(--display); color: var(--amber); text-align: right; }
.sz-rc-pts small { display: block; font: 600 10px var(--font); color: var(--muted); letter-spacing: .08em; text-transform: uppercase; }
.sz-rc-pts.good { color: var(--green); }
.sz-rc-pts.bad { color: var(--red); }
@keyframes sz-in { from { opacity: 0; transform: translateY(8px); } }
/* fin de partie : les personnages côte à côte, à l'échelle */
.sz-lineup { display: flex; align-items: flex-end; justify-content: center; gap: clamp(4px, 1.4vw, 16px); height: 270px; margin: 22px 0 10px; padding: 0 8px 46px; position: relative; }
.sz-lineup::after { content: ""; position: absolute; left: 0; right: 0; bottom: 46px; border-top: 2px solid var(--line-2); }
.sz-lineup figure { position: relative; margin: 0; height: var(--h); min-width: 84px; display: flex; justify-content: center; animation: sz-grow .6s cubic-bezier(.2, 1.2, .3, 1) both; animation-delay: calc(var(--i) * 80ms); transform-origin: bottom; }
.sz-lu-fig { height: 100%; display: flex; align-items: flex-end; }
.sz-lu-fig img, .sz-lu-fig .human { height: 100%; width: auto; max-width: 22vw; object-fit: contain; object-position: bottom; filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .55)); }
.sz-lu-fig .human { fill: var(--surface-3); }
.sz-lineup figcaption { position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%); display: grid; justify-items: center; text-align: center; width: 84px; }
.sz-lineup figcaption b { font-size: 12.5px; color: var(--text); }
.sz-lineup figcaption small { font-size: 11px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 84px; }
@keyframes sz-grow { from { transform: scaleY(0); opacity: 0; } }
/* menu : grandes affiches par anime, personnage en pied sur fond doux */
.sz-setup .hl-unis { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 14px; }
.sz-u { aspect-ratio: 3 / 4; }
.sz-u .hl-u-art { background: radial-gradient(120% 90% at 50% 100%, color-mix(in srgb, var(--accent) 22%, var(--surface-2)), var(--bg-2) 70%); }
.sz-u .hl-u-art img { object-fit: contain; object-position: 50% 100%; padding: 14px 12px 46px; filter: drop-shadow(0 10px 12px rgba(0, 0, 0, 0.6)); transform: none; }
.sz-u:hover .hl-u-art img, .sz-u.on .hl-u-art img { filter: drop-shadow(0 10px 12px rgba(0, 0, 0, 0.6)); transform: scale(1.05); transform-origin: bottom; }
.sz-u .hl-u-txt b { font-size: calc(20px * var(--display-scale)); }
.sz-u .hl-u-n { opacity: 1; transform: none; }
@media (max-width: 800px) { .sz-layout { grid-template-columns: 1fr; } .sz-scene { height: 300px; } .sz-recap li { grid-template-columns: 44px minmax(0, 1fr) auto; column-gap: 10px; padding: 8px 10px; } .sz-rc-img { width: 44px; height: 62px; } .sz-rc-vals { display: none; } .sz-lineup { height: 200px; gap: 2px; } .sz-lineup figure { min-width: 56px; } .sz-lineup figcaption { width: 56px; } .sz-lineup figcaption small { max-width: 56px; } .sz-setup .hl-unis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (prefers-reduced-motion: reduce) { .em-emojis span, .cl-ev.on .cl-n, .st-row i.flip, .hl-v.reveal { animation: none; } }
/* Wordtaku : la révélation recouvre le plateau en fin de partie */
.wt-zone { position: relative; }
.wt-reveal.overlay { position: absolute; inset: 0; z-index: 6; margin: 0; padding: 40px; border: 0; border-radius: 14px; background: rgba(12, 11, 9, 0.95); align-content: center; justify-content: center; grid-template-columns: auto minmax(0, 520px); grid-template-areas: "card who" "card done" "card see"; animation: wtFade .5s ease both; }
@keyframes wtFade { from { opacity: 0; } }
.wt-reveal.overlay .wt-card { width: 250px; }
.wt-reveal.overlay .wt-word i { width: 52px; height: 52px; font-size: 26px; }
.wt-see { grid-area: see; justify-self: start; margin-top: 14px; color: var(--muted); }
@media (max-width: 700px) { .wt-reveal.overlay { padding: 20px 16px; grid-template-columns: 110px minmax(0, 1fr); grid-template-areas: "card who" "done done" "see see"; } .wt-reveal.overlay .wt-card { width: 110px; } .wt-reveal.overlay .wt-word i { width: 30px; height: 30px; font-size: 16px; } }

/* --- Mini-jeux : tout tient sur un écran (en-tête compact, plateau calé sur la hauteur de la fenêtre) */
.mg-page.page { padding-top: calc(var(--top-h) + 16px); padding-bottom: 24px; }
.mg-page .back-games { margin-bottom: 2px; }
.mg-page .rel-head { margin-bottom: 14px; }
.mg-page .rel-head h1 { font-size: calc(clamp(26px, 2.6vw, 32px) * var(--display-scale)); padding-bottom: 8px; }
.mg-page .wheel-link { margin-bottom: 8px; }
.mg-page .quiz-zone { min-height: 0; }
.mg-done-a { display: flex; gap: 8px; flex-wrap: wrap; }
/* Wordtaku : choix de l'anime sur une seule rangée de 10 affiches, le numéro mord le coin de l'affiche */
.wt-zone { padding: 20px 24px 22px; }
.wt-hero { padding-bottom: 16px; gap: 20px; }
.wt-hero h2 { font-size: calc(clamp(26px, 2.6vw, 34px) * var(--display-scale)); margin-bottom: 4px; }
.wt-top-head { margin: 16px 0 10px; }
.wt-top { grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 14px; }
.wt-opt { padding: 0; gap: 6px; }
.wt-poster { max-height: calc(100vh - 420px); }
.wt-rank { z-index: 2; left: -8px; bottom: 30px; font-size: clamp(54px, 5vw, 82px); color: var(--bg); -webkit-text-stroke: 2px var(--line-2); text-shadow: 0 6px 14px rgba(0, 0, 0, 0.6); pointer-events: none; }
.wt-opt b { font-size: 12.5px; }
.wt-opt:hover .wt-rank { color: var(--accent); -webkit-text-stroke-color: var(--accent); }
@media (max-width: 1200px) { .wt-top { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (max-width: 560px) { .wt-top { grid-template-columns: repeat(3, minmax(0, 1fr)); } .wt-rank { font-size: 48px; } }
/* Wordtaku : partie */
.wt-board { grid-template-columns: 210px minmax(0, 1fr); gap: 28px; }
.wt-cover { max-height: calc(100vh - 590px); min-height: 110px; margin-bottom: 6px; }
.wt-legend { margin-top: 8px; padding-top: 8px; gap: 5px; }
.wt-grid { --t: clamp(30px, min(calc((100vw - 440px) / var(--len) - 6px), calc((100vh - 430px) / 5 - 6px)), 68px); }
.wt-main { gap: 6px; }
.wt-msg { min-height: 20px; margin: 0; }
.wt-kb { gap: 6px; margin-top: 0; }
.wt-kb button { height: clamp(36px, 5.4vh, 52px); }
@media (max-width: 860px) { .wt-board { grid-template-columns: 1fr; } .wt-grid { --t: clamp(28px, min(calc((100vw - 90px) / var(--len) - 5px), calc((100vh - 520px) / 5 - 5px)), 60px); } }
/* outils des mini-jeux : petit menu dans l'en-tête (plus de bloc sous le plateau) */
.mg-head-r { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.mg-head-r .wheel-link { margin-bottom: 0; }
.mg-tools { position: relative; max-width: none; margin: 0; }
.mg-tools summary { list-style: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line); color: var(--muted); cursor: pointer; }
.mg-tools summary::-webkit-details-marker { display: none; }
.mg-tools summary .i { width: 16px; height: 16px; }
.mg-tools[open] summary { color: var(--text); border-color: var(--line-2); }
.mg-tools-pop { position: absolute; right: 0; top: calc(100% + 8px); z-index: 40; display: grid; gap: 8px; width: max-content; padding: 12px; border: 1px solid var(--line-2); border-radius: 10px; background: var(--surface); box-shadow: 0 18px 34px -14px rgba(0, 0, 0, 0.9); }
.mg-tools-pop .qz-kicker { margin: 0; }
.wt-reveal[hidden] { display: none; }
.wt-side .qz-help { z-index: 2; }
/* le numéro du top 10 s'accroche au coin bas-gauche de l'affiche (quelle que soit la longueur du titre) */
.wt-opt { grid-template-columns: minmax(0, 1fr); }
.wt-opt .wt-poster, .wt-opt .wt-rank { grid-area: 1 / 1; }
.wt-opt .wt-rank { position: relative; left: auto; bottom: auto; align-self: end; justify-self: start; margin: 0 0 -12px -10px; }
/* fin de partie : le plateau occupe le reste de l'écran, la révélation y tient sans défiler */
.wt-zone.wt-over { min-height: calc(100vh - var(--top-h) - 150px); }
.wt-reveal.overlay { padding: 24px 32px; }
.wt-reveal.overlay .wt-card { width: min(240px, calc((100vh - var(--top-h) - 230px) * .66)); }

/* Wordtaku : effets sur la photo du personnage (inclinaison à la souris, reflet holographique, éclat qui balaie, lueur, étincelles) */
.wt-card { position: relative; transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .5s cubic-bezier(.2, 1, .3, 1); animation: wtFloat 5s ease-in-out 1.4s infinite; }
.wt-card.tilt { transition: transform .08s linear; }
@keyframes wtFloat { 50% { translate: 0 -8px; } }
.wt-card-front { position: absolute; }
.wt-card.won .wt-card-front { animation: wtGlow 2.6s ease-in-out 1.3s infinite; }
@keyframes wtGlow { 50% { box-shadow: 0 0 0 3px #ff5a3c, 0 0 38px rgba(255, 60, 40, 0.55), 0 30px 50px -20px rgba(0, 0, 0, 0.95); } }
.wt-card-front img { animation: wtZoom 14s ease-in-out infinite alternate; transform-origin: 50% 30%; }
@keyframes wtZoom { to { transform: scale(1.08); } }
.wt-card:not(.won) .wt-card-front img { filter: saturate(.55) brightness(.85); }
.wt-card:not(.won) .wt-card-front { box-shadow: 0 0 0 3px #7a2a22, 0 30px 50px -20px rgba(0, 0, 0, 0.95); }
.wt-foil { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: color-dodge; opacity: .5; background: linear-gradient(115deg, transparent 22%, rgba(255, 90, 60, 0.4) 36%, rgba(255, 215, 120, 0.4) 45%, rgba(120, 210, 255, 0.35) 54%, rgba(190, 120, 255, 0.35) 61%, transparent 74%); background-size: 260% 260%; background-position: var(--mx, 0%) var(--my, 0%); animation: wtFoil 7s ease-in-out infinite alternate; }
@keyframes wtFoil { from { background-position: 0% 0%; } to { background-position: 100% 100%; } }
.wt-card.tilt .wt-foil { animation: none; opacity: .75; }
.wt-card:not(.won) .wt-foil { opacity: .2; }
.wt-glare { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: overlay; opacity: 0; background: radial-gradient(circle at var(--mx, 30%) var(--my, 20%), rgba(255, 255, 255, 0.55), transparent 50%); transition: opacity .3s; }
.wt-card.tilt .wt-glare { opacity: 1; }
.wt-card-front::after { content: ""; position: absolute; top: -10%; bottom: -10%; left: 0; width: 34%; pointer-events: none; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent); transform: translateX(-160%) skewX(-18deg); animation: wtShine 4.8s ease-in-out 1.6s infinite; }
@keyframes wtShine { 0%, 62% { transform: translateX(-160%) skewX(-18deg); } 82%, 100% { transform: translateX(360%) skewX(-18deg); } }
.wt-spark { position: absolute; z-index: 3; width: 12px; height: 12px; background: #ffd36a; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); opacity: 0; pointer-events: none; animation: wtTwinkle 2.4s ease-in-out infinite; animation-delay: calc(1.4s + var(--k) * .37s); filter: drop-shadow(0 0 6px rgba(255, 200, 90, 0.9)); }
.wt-spark:nth-of-type(1) { left: -10px; top: 12%; } .wt-spark:nth-of-type(2) { right: -12px; top: 26%; width: 16px; height: 16px; }
.wt-spark:nth-of-type(3) { left: 18%; top: -10px; } .wt-spark:nth-of-type(4) { right: 14%; bottom: -12px; width: 9px; height: 9px; }
.wt-spark:nth-of-type(5) { left: -14px; bottom: 22%; width: 15px; height: 15px; } .wt-spark:nth-of-type(6) { right: -8px; bottom: 8%; width: 8px; height: 8px; }
.wt-spark:nth-of-type(7) { left: 62%; top: -14px; width: 14px; height: 14px; }
@keyframes wtTwinkle { 0%, 100% { opacity: 0; transform: scale(.3) rotate(0); } 45% { opacity: 1; transform: scale(1) rotate(45deg); } }
.wt-card:not(.won) .wt-spark { display: none; }
.wt-reveal.still .wt-card { animation-delay: 0s; }

/* « Revoir la grille » : la révélation se range à droite du plateau, sur le même écran */
.wt-big { display: none; }
.wt-zone.wt-aside { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 340px); gap: 28px; align-items: start; }
.wt-zone.wt-aside .wt-reveal { margin: 0; padding: 0 0 0 26px; border-top: 0; border-left: 1px solid var(--line); grid-template-columns: minmax(0, 1fr); grid-template-areas: "card" "who" "done" "big"; row-gap: 12px; justify-items: start; animation: wtFade .4s ease both; }
.wt-zone.wt-aside .wt-card { width: min(170px, calc((100vh - var(--top-h) - 420px) * .66)); min-width: 110px; }
.wt-zone.wt-aside .wt-word i { width: 32px; height: 32px; font-size: 16px; }
.wt-zone.wt-aside .wt-name { font-size: calc(24px * var(--display-scale)); }
.wt-zone.wt-aside .mg-done { margin: 0; flex-wrap: wrap; gap: 12px; padding: 12px 14px; }
.wt-zone.wt-aside .mg-done-n { min-width: 0; font-size: calc(30px * var(--display-scale)); }
.wt-zone.wt-aside .wt-see { display: none; }
.wt-zone.wt-aside .wt-big { display: inline-flex; grid-area: big; color: var(--muted); }
.wt-zone.wt-aside .wt-board { grid-template-columns: 170px minmax(0, 1fr); gap: 22px; }
.wt-zone.wt-aside .wt-grid { --t: clamp(28px, min(calc((100vw - 760px) / var(--len) - 6px), calc((100vh - 430px) / 5 - 6px)), 64px); }
.wt-reveal.overlay { grid-template-areas: "card who" "card done" "card see"; }
@media (max-width: 1100px) { .wt-zone.wt-aside { grid-template-columns: 1fr; } .wt-zone.wt-aside .wt-reveal { padding: 18px 0 0; border-left: 0; border-top: 1px solid var(--line); } }
@media (prefers-reduced-motion: reduce) { .wt-card, .wt-card-front img, .wt-foil, .wt-card-front::after, .wt-spark, .wt-card.won .wt-card-front { animation: none; } }
/* bloc de fin dans la révélation : texte sur toute la largeur, boutons en dessous */
.wt-reveal .mg-done { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 18px; row-gap: 12px; }
.wt-reveal .mg-done-a { grid-column: 1 / -1; }
.wt-reveal.overlay { grid-template-columns: auto minmax(0, 460px); }

/* Wordtaku, choix de l'anime : règles cachées derrière un « ? » discret, affiches plus espacées */
.wt-pick { position: relative; }
.wt-pick-help { position: absolute; top: -6px; right: -6px; z-index: 5; opacity: .55; transition: opacity .2s; }
.wt-pick-help:hover, .wt-pick-help:focus-within { opacity: 1; }
.wt-hero { padding-right: 36px; }
.wt-top { gap: 18px clamp(18px, 2vw, 34px); }

/* --- Hub : 3 cartes en haut, 3 en bas (aucune case vide), chaque vignette sur sa copie floutée avec une lueur */
.mg-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
.mg-grid > .mg-card { grid-column: span 4; }
.mg-grid > .gc-sutom, .mg-grid > .gc-quiz, .mg-grid > .gc-pixel { grid-column: span 4; }
.mg-card .gc-art, .mg-grid .gc-quiz .gc-art { position: relative; height: 210px; overflow: hidden; background: var(--bg); }
.gc-blur, .gc-front { position: absolute; inset: 0; display: grid; place-items: center; }
.gc-blur { filter: blur(26px) saturate(1.7) brightness(.9); opacity: .6; transform: scale(1.5); pointer-events: none; }
.gc-front { z-index: 1; }
.gc-art::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(55% 60% at 50% 60%, color-mix(in srgb, var(--gc-glow, #ff5a36) 30%, transparent), transparent 72%), linear-gradient(transparent 55%, rgba(14, 13, 11, 0.55)); transition: opacity .3s; }
.mg-card:hover .gc-blur { opacity: .8; }
.gc-sutom { --gc-glow: #d6342b; } .gc-quiz { --gc-glow: #e2b95e; } .gc-pixel { --gc-glow: #b38cff; }
.gc-emoji { --gc-glow: #ff8a3c; } .gc-hilo { --gc-glow: #93c98a; } .gc-classe { --gc-glow: #8fb3e3; } .gc-taille { --gc-glow: #e2b95e; }
.gc-blur .gc-px-q, .gc-blur .gc-sz-r { display: none; }
.gc-blur img { max-height: 160px; }
.mg-card.played .gc-art .gc-front > * { opacity: .72; filter: grayscale(.35); }
.mg-card.played .gc-blur { opacity: .25; }
.mg-card.played .gc-art > .gc-front { opacity: 1; filter: none; }
.mg-card.played .gc-art > .gc-blur { opacity: .25; filter: blur(26px) saturate(.9) brightness(.8); }
/* Wordtaku : la grille seule, plus grande, au centre */
.gc-sutom .gc-wt-row i { width: 40px; height: 40px; font-size: 20px; }
.gc-sutom h2, .gc-feat h2 { font-size: calc(22px * var(--display-scale)); }
/* Quiz : jaquettes plus grandes en éventail */
.mg-grid .gc-quiz .gc-fan { position: relative; width: 100%; height: 100%; }
.mg-grid .gc-quiz .gc-fan img { width: 108px; bottom: -18px; border-radius: 8px; box-shadow: 0 18px 30px -12px rgba(0, 0, 0, 0.9); }
.mg-grid .gc-quiz .gc-blur .gc-fan img { width: 150px; }
@media (max-width: 1100px) { .mg-grid > .mg-card, .mg-grid > .gc-sutom, .mg-grid > .gc-quiz, .mg-grid > .gc-pixel { grid-column: span 6; } .mg-grid > .gc-sutom, .mg-grid > .gc-taille { grid-column: span 12; } }
@media (max-width: 560px) { .mg-grid > .mg-card, .mg-grid > .gc-sutom, .mg-grid > .gc-quiz, .mg-grid > .gc-pixel { grid-column: span 12; } .gc-sutom .gc-wt-row i { width: 30px; height: 30px; font-size: 15px; } }
.mg-card.played:hover .gc-art > .gc-blur { opacity: .45; filter: blur(26px) saturate(1.4) brightness(.9); }
.mg-card.played:hover .gc-art > .gc-front > * { opacity: .85; filter: none; }

/* --- Wordtaku, plateau resserré : jaquette | grille (| carte du personnage), centrés ; infos dans le « ? » */
.wt-board, .wt-zone.wt-aside .wt-board { grid-template-columns: auto auto; justify-content: center; align-items: center; gap: clamp(36px, 5vw, 84px); }
.wt-side { width: 230px; gap: 4px; }
.wt-side .qz-kicker { margin-top: 10px; }
.wt-holo { position: relative; border-radius: 12px; overflow: hidden; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 26px 44px -22px rgba(0, 0, 0, 0.95); transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .5s cubic-bezier(.2, 1, .3, 1); animation: wtFloat 5.5s ease-in-out infinite; }
.wt-holo.tilt { transition: transform .08s linear; }
.wt-holo .wt-cover { display: block; width: 100%; max-height: none; min-height: 0; margin: 0; border-radius: 0; box-shadow: none; aspect-ratio: 3 / 4; object-fit: cover; }
.wt-holo::after { content: ""; position: absolute; top: -10%; bottom: -10%; left: 0; width: 34%; pointer-events: none; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent); transform: translateX(-160%) skewX(-18deg); animation: wtShine 5.6s ease-in-out .8s infinite; }
.wt-holo .wt-foil { opacity: .35; }
.wt-holo.tilt .wt-foil { animation: none; opacity: .7; }
.wt-holo.tilt .wt-glare { opacity: 1; }
.wt-help { position: absolute; top: 14px; right: 14px; z-index: 8; opacity: .5; transition: opacity .2s; }
.wt-help:hover, .wt-help:focus-within { opacity: 1; }
.wt-help .qz-help-tip { width: 280px; }
.wt-help .wt-legend { margin: 6px 0 12px; padding: 0; border: 0; }
.wt-help .qz-rules { margin-bottom: 12px; }
.wt-zone.wt-play { display: grid; align-content: center; }
/* révélation rangée à droite : seulement la carte, le mot et le nom, au niveau de la grille */
.wt-zone.wt-aside { grid-template-columns: auto auto; justify-content: center; align-items: center; column-gap: clamp(36px, 5vw, 84px); }
.wt-zone.wt-aside .wt-reveal { padding: 0; border: 0; justify-items: start; grid-template-areas: "card" "who"; }
.wt-zone.wt-aside .wt-reveal .mg-done, .wt-zone.wt-aside .wt-big { display: none; }
.wt-zone.wt-aside .wt-card { width: 200px; cursor: zoom-in; }
.wt-zone.wt-aside .wt-board { grid-template-columns: auto auto; }
@media (max-width: 860px) { .wt-board { grid-template-columns: 1fr; justify-items: center; gap: 16px; } .wt-side { width: auto; grid-template-columns: 70px minmax(0, 1fr); } .wt-holo { grid-row: span 3; } .wt-zone.wt-aside { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .wt-holo, .wt-holo::after { animation: none; } }
.wt-zone.wt-aside { min-height: 0; padding-block: 34px; }
.wt-zone.wt-aside .wt-card { width: 230px; }
/* Wordtaku : abandonner, discret sous le clavier */
.wt-giveup { margin-top: 4px; color: var(--faint); }
.wt-giveup:hover { color: var(--red); border-color: color-mix(in srgb, var(--red) 40%, transparent); }
.wt-giveup .i { width: 14px; height: 14px; }
.wt-zone.wt-over .wt-giveup { display: none; }

/* Wordtaku : gain en haut (petit message animé), un seul bouton « Retour » */
.wt-gain { display: inline-flex; align-items: baseline; gap: 6px; margin-bottom: 6px; padding: 5px 14px 6px; border-radius: 999px; background: color-mix(in srgb, var(--green) 14%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--green) 45%, transparent); color: var(--green); flex-direction: row; min-width: 0; font: inherit; }
.wt-gain b { font: var(--display-w) calc(24px * var(--display-scale)) / 1 var(--display); }
.wt-gain span { font: 700 12px var(--font); letter-spacing: .12em; text-transform: uppercase; }
.wt-gain small { font-size: 11.5px; color: color-mix(in srgb, var(--green) 70%, var(--muted)); margin-left: 4px; }
.wt-reveal.in .wt-gain { animation: wtGain .7s cubic-bezier(.2, 1.6, .4, 1) 1.5s both, wtGainGlow 2.4s ease-in-out 2.3s infinite; }
@keyframes wtGain { from { opacity: 0; transform: translateY(10px) scale(.6); } }
@keyframes wtGainGlow { 50% { box-shadow: inset 0 0 0 1px var(--green), 0 0 22px color-mix(in srgb, var(--green) 40%, transparent); } }
.wt-reveal.still .wt-gain { animation: none; }
.wt-back { margin-top: 14px; }
.wt-reveal.in .wt-back { animation: wtIn .5s ease both; animation-delay: 1.6s; }
.wt-reveal.still .wt-back { animation: none; }
.wt-reveal.overlay .wt-card { cursor: zoom-out; }
.wt-zone.wt-aside .wt-gain, .wt-zone.wt-aside .wt-back { display: none; }
/* jeu de mots : l'interface prend plus de place (jaquette, grille et clavier plus grands) */
@media (min-width: 861px) {
  .wt-zone.wt-play .wt-board, .wt-zone.wt-play.wt-aside .wt-board { gap: clamp(40px, 5vw, 96px); }
  .wt-zone.wt-play .wt-side { width: clamp(260px, 24vw, 360px); }
  .wt-zone.wt-play .wt-anime { font-size: calc(26px * var(--display-scale)); }
  .wt-zone.wt-play .wt-grid { --t: clamp(40px, min(calc((100vw - 720px) / var(--len) - 8px), calc((100vh - 380px) / 5 - 7px)), 96px); gap: 7px; padding: 14px; border-radius: 14px; }
  .wt-zone.wt-play .wt-row { gap: 7px; }
  .wt-zone.wt-play .wt-kb { width: min(100%, 880px); gap: 8px; }
  .wt-zone.wt-play .wt-kb div { gap: 8px; }
  .wt-zone.wt-play .wt-kb button { max-width: 78px; height: clamp(44px, 6.4vh, 64px); font-size: 18px; border-radius: 10px; }
  .wt-zone.wt-play .wt-kb button.wide { max-width: 128px; font-size: 14px; }
  .wt-zone.wt-play .wt-msg { font-size: 14px; }
}

/* --- Wordtaku : tout tient dans la fenêtre ; l'affiche (avec son titre) a exactement la hauteur de la colonne grille + clavier,
   les cases sont plafonnées pour que la grille reste plus petite que l'affiche */
.wt-play { --wt-t: clamp(28px, min(52px, calc((100vh - var(--top-h) - 440px) / 5), calc((100vw - 980px) / var(--len, 6) - 6px)), 52px); }
.wt-play .wt-grid { --t: var(--wt-t); }
.wt-play .wt-main { gap: 6px; align-content: start; }
.wt-play .wt-kb { gap: 6px; }
.wt-play .wt-kb button { height: 44px; }
.wt-play .wt-giveup { height: 32px; margin-top: 0; }
.wt-play .wt-side { width: auto; align-self: start; }
.wt-play .wt-holo { height: calc(5 * var(--wt-t) + 160px); width: auto; aspect-ratio: 3 / 4; }
.wt-play .wt-holo .wt-cover { height: 100%; width: 100%; aspect-ratio: auto; }
.wt-play .wt-board { align-items: start; }
@media (max-width: 860px) { .wt-play { --wt-t: clamp(28px, min(calc((100vw - 90px) / var(--len, 6) - 5px), calc((100vh - var(--top-h) - 470px) / 5)), 52px); } .wt-play .wt-holo { height: auto; width: 70px; } }
/* (prioritaire sur le bloc « l'interface prend plus de place » ci-dessus : affiche = hauteur de la colonne grille + clavier, grille plus petite que l'affiche) */
.wt-zone.wt-play .wt-grid { --t: var(--wt-t); gap: 5px; padding: 10px; border-radius: 10px; }
.wt-zone.wt-play .wt-row { gap: 5px; }
.wt-zone.wt-play .wt-side { width: auto; }
.wt-zone.wt-play .wt-kb { width: auto; gap: 6px; }
.wt-zone.wt-play .wt-kb div { gap: 6px; }
.wt-zone.wt-play .wt-kb button { height: 44px; max-width: 54px; min-width: 38px; font-size: 16px; }
.wt-zone.wt-play .wt-kb button.wide { max-width: 90px; min-width: 64px; font-size: 13px; }
/* intro de la pièce maîtresse : plus d'explosion rouge à la fin ; le titre s'efface doucement dans le noir */
.pm-intro.shatter::after { animation: none; opacity: 0; }
.pm-intro.shatter .pm-core { animation: pmFadeOut .6s ease-out forwards; }
.pm-intro.shatter .pm-core b { animation: none; }
.pm-intro.shatter .rv-bolts { transition: opacity .6s ease-out; opacity: 0 !important; animation: none; }
@keyframes pmFadeOut { to { opacity: 0; transform: scale(1.03); filter: blur(4px); } }
/* Wordtaku : Retour + Rejouer (mode test) côte à côte */
.wt-acts { display: flex; gap: 10px; margin-top: 14px; }
.wt-acts .wt-back { margin-top: 0; }
.wt-reveal.in .wt-acts .mg-replay { animation: wtIn .5s ease both; animation-delay: 1.7s; }
.wt-reveal.still .wt-acts .mg-replay { animation: none; }
.wt-zone.wt-aside .wt-acts { display: none; }

/* Wordtaku : niveau de difficulté (choisi avant l'anime) */
.wt-levels { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.wt-lvl { --lv: var(--green); display: grid; gap: 2px; min-width: 150px; padding: 9px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); text-align: left; transition: border-color .15s, background .15s, transform .15s; }
.wt-lvl.lv-moyen { --lv: var(--amber); } .wt-lvl.lv-difficile { --lv: var(--red); }
.wt-lvl b { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.wt-lvl b::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--lv); opacity: .45; }
.wt-lvl small { font-size: 11.5px; color: var(--muted); }
.wt-lvl .wt-lvl-gain { font: 600 11px var(--font); font-style: normal; color: var(--lv); }
.wt-lvl:hover { border-color: var(--line-2); transform: translateY(-1px); }
.wt-lvl.on { border-color: var(--lv); background: color-mix(in srgb, var(--lv) 10%, var(--surface)); }
.wt-lvl.on b::before { opacity: 1; box-shadow: 0 0 10px var(--lv); }
.wt-lvl-tag { --lv: var(--amber); justify-self: start; margin-top: 10px; padding: 2px 10px; border-radius: 999px; font: 700 11px var(--font); letter-spacing: .1em; text-transform: uppercase; color: var(--lv); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--lv) 50%, transparent); }
.wt-lvl-tag.lv-facile { --lv: var(--green); } .wt-lvl-tag.lv-difficile { --lv: var(--red); }
.wt-side .wt-lvl-tag + .qz-kicker { margin-top: 6px; }
/* Wordtaku : courte description du personnage en fin de partie */
.wt-bio { max-width: 46ch; margin: 10px 0 0; padding-left: 12px; border-left: 2px solid color-mix(in srgb, var(--wt-red, #d6342b) 60%, transparent); font-size: 13.5px; line-height: 1.55; color: var(--muted); }
.wt-reveal.in .wt-bio { animation: wtIn .5s ease both; animation-delay: 1.45s; }
.wt-reveal.still .wt-bio { animation: none; }
.wt-zone.wt-aside .wt-bio { display: none; }

/* --- Hub : jeux mis de côté (grisés, non cliquables) ; jaquettes du quiz plus grandes */
.mg-card.soon { cursor: default; }
.mg-card.soon .gc-art > * { filter: grayscale(1) brightness(.55); opacity: .5; }
.mg-card.soon .gc-art::after { opacity: 0; }
.mg-card.soon h2 { color: var(--faint); }
.gc-soon-tag { padding: 2px 10px; border-radius: 999px; font: 700 11px var(--font); letter-spacing: .1em; text-transform: uppercase; color: var(--faint); box-shadow: inset 0 0 0 1px var(--line-2); }
.mg-grid .gc-quiz .gc-front .gc-fan img { width: 132px; bottom: -26px; border-radius: 9px; }
.mg-grid .gc-quiz .gc-front .gc-fan img:nth-child(1) { --r: -16deg; --y: 22px; --r2: -22deg; --y2: 10px; margin-left: -150px; }
.mg-grid .gc-quiz .gc-front .gc-fan img:nth-child(2) { --r: -5deg; --y: 4px; --r2: -8deg; --y2: -12px; margin-left: -50px; }
.mg-grid .gc-quiz .gc-front .gc-fan img:nth-child(3) { --r: 5deg; --y: 4px; --r2: 8deg; --y2: -12px; margin-left: 50px; }
.mg-grid .gc-quiz .gc-front .gc-fan img:nth-child(4) { --r: 16deg; --y: 22px; --r2: 22deg; --y2: 10px; margin-left: 150px; }
/* jaquettes du quiz : éventail centré en flux (plus de positions absolues), plus grandes */
.mg-grid .gc-quiz .gc-front .gc-fan { display: flex; justify-content: center; align-items: flex-end; padding-bottom: 0; }
.mg-grid .gc-quiz .gc-front .gc-fan img { position: relative; left: auto; bottom: auto; width: 128px; margin: 0 -14px -26px; transform: rotate(var(--r)) translateY(var(--y)); transition: transform .35s cubic-bezier(.2, 1.3, .4, 1); }
.mg-grid .gc-quiz .gc-front .gc-fan img:nth-child(n) { margin-left: -14px; }
.mg-grid .gc-quiz:hover .gc-front .gc-fan img { transform: rotate(var(--r2)) translateY(var(--y2)); }
.mg-grid .gc-quiz .gc-front .gc-fan img:nth-child(2), .mg-grid .gc-quiz .gc-front .gc-fan img:nth-child(3) { z-index: 2; }

/* ===========================================================================
   Pixel (refait sur le modèle du Wordtaku) : tout sur un écran, image d'anime en gros pixels
   =========================================================================== */
.px-zone { position: relative; }
/* écran de départ : trois niveaux */
.px-setup { display: grid; justify-items: center; text-align: center; padding: 10px 0 6px; }
.px-setup h2 { margin: 4px 0 6px; font: var(--display-w) calc(clamp(28px, 3vw, 40px) * var(--display-scale)) / 1.05 var(--display); letter-spacing: var(--display-ls); }
.px-setup > p { margin: 0 0 22px; font-size: 14px; }
.px-lvls { display: grid; grid-template-columns: repeat(3, minmax(0, 220px)); gap: clamp(14px, 2vw, 28px); }
.px-lvl { --lv: var(--green); display: grid; justify-items: center; gap: 4px; padding: 14px 14px 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); animation: wtIn .45s cubic-bezier(.2, 1, .3, 1) both; animation-delay: calc(var(--i) * .06s); transition: border-color .2s, transform .25s cubic-bezier(.2, 1.3, .4, 1), box-shadow .25s; }
.px-lvl.lv-moyen { --lv: var(--amber); } .px-lvl.lv-difficile { --lv: var(--red); }
.px-lvl-art { display: block; width: 100%; aspect-ratio: 1; border-radius: 10px; overflow: hidden; margin-bottom: 8px; background: radial-gradient(70% 70% at 50% 60%, color-mix(in srgb, var(--lv) 22%, transparent), transparent 75%), var(--bg-2); }
.px-lvl-art canvas { width: 100%; height: 100%; image-rendering: pixelated; }
.px-lvl b { display: flex; align-items: center; gap: 8px; font: var(--display-w) calc(20px * var(--display-scale)) / 1 var(--display); }
.px-lvl b::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--lv); box-shadow: 0 0 10px var(--lv); }
.px-lvl small { font-size: 12.5px; color: var(--muted); }
.px-lvl:hover { border-color: var(--lv); transform: translateY(-4px); box-shadow: 0 20px 34px -20px color-mix(in srgb, var(--lv) 60%, transparent); }
.px-lvl.on { border-color: color-mix(in srgb, var(--lv) 60%, var(--line)); }
.px-lvl.go { transform: scale(.97); opacity: .7; }
@media (max-width: 640px) { .px-lvls { grid-template-columns: 1fr; width: 100%; } .px-lvl { grid-template-columns: 70px 1fr; justify-items: start; text-align: left; } .px-lvl-art { grid-row: span 2; margin: 0; } }

/* partie : image | panneau, centrés, hauteur calée sur la fenêtre */
.px-board { display: grid; grid-template-columns: auto minmax(300px, 420px); justify-content: center; align-items: center; gap: clamp(30px, 4.5vw, 72px); }
.px-frame { position: relative; height: clamp(320px, calc(100vh - var(--top-h) - 250px), 640px); aspect-ratio: 3 / 4; border-radius: 14px; overflow: hidden; background: var(--bg-2); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 30px 60px -28px rgba(0, 0, 0, 0.95), 0 0 50px -16px rgba(179, 140, 255, 0.35); }
.px-frame canvas { width: 100%; height: 100%; display: block; image-rendering: pixelated; }
.px-scan { position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(transparent 0 3px, rgba(0, 0, 0, 0.12) 3px 4px); mix-blend-mode: multiply; opacity: .5; }
.px-zone.wt-over .px-scan { opacity: 0; transition: opacity .8s; }
.px-panel { display: grid; gap: 10px; align-content: center; min-width: 0; }
.px-panel .wt-lvl-tag { margin: 0; }
.px-step { margin: 4px 0 0; }
.px-q { margin: 0; font: var(--display-w) calc(clamp(24px, 2.4vw, 32px) * var(--display-scale)) / 1.1 var(--display); letter-spacing: var(--display-ls); }
.px-meter { display: flex; align-items: center; gap: 6px; }
.px-meter i { width: 26px; height: 6px; border-radius: 3px; background: var(--surface-3); transition: background .3s; }
.px-meter i.cur { background: var(--text); animation: pxBlink 1.2s ease-in-out infinite; }
.px-meter i.ok { background: var(--green); }
.px-meter i.ko { background: var(--red); }
@keyframes pxBlink { 50% { opacity: .35; } }
.px-pot { margin-left: auto; font-size: 12.5px; color: var(--muted); white-space: nowrap; }
.px-pot b { font: var(--display-w) 18px var(--display); color: var(--amber); }
.px-pot.drop b { display: inline-block; animation: pxDrop .6s cubic-bezier(.2, 1.6, .4, 1); color: var(--red); }
@keyframes pxDrop { 0% { transform: translateY(-10px) scale(1.4); } }
.px-anime { display: flex; gap: 12px; align-items: center; padding: 10px; border: 1px solid color-mix(in srgb, var(--amber) 40%, var(--line)); border-radius: 10px; background: color-mix(in srgb, var(--amber) 6%, var(--surface)); animation: wtIn .5s ease both; }
.px-anime img { width: 40px; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 5px; }
.px-anime b { display: block; font-weight: 700; }
.px-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; margin-top: 4px; }
.px-form .btn { height: 52px; }
.px-msg { min-height: 20px; margin: 0; font-size: 13.5px; color: var(--muted); }
.px-msg.bad { color: var(--red); font-weight: 600; }
.px-msg.pop { animation: emPop .35s cubic-bezier(.2, 1.6, .4, 1); }
.px-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.px-chips li { display: inline-flex; align-items: center; gap: 5px; max-width: 100%; padding: 4px 10px; border-radius: 999px; background: var(--surface); font-size: 12.5px; color: var(--muted); }
.px-chips li .i { width: 13px; height: 13px; }
.px-chips li.ko { text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--red) 70%, transparent); }
.px-chips li.ko .i { color: var(--red); }
.px-chips li.ok { color: var(--green); }
.px-giveup { justify-self: start; }
.px-from { color: var(--muted); font-size: 14px; }
.px-zone.wt-over .px-board { opacity: .25; transition: opacity .6s; }
.px-zone.wt-over { min-height: calc(100vh - var(--top-h) - 150px); }
@media (max-width: 860px) { .px-board { grid-template-columns: 1fr; justify-items: center; gap: 16px; } .px-frame { height: clamp(260px, 46vh, 420px); } .px-panel { width: 100%; } }
@media (prefers-reduced-motion: reduce) { .px-lvl, .px-meter i.cur, .px-pot.drop b, .px-anime { animation: none; } }

/* Hub, carte Pixel : grande vignette carrée en mosaïque, cadre lumineux */
.gc-pxw { position: relative; display: block; width: 168px; aspect-ratio: 1; }
.gc-pxw .gc-px { width: 100%; height: 100%; border-radius: 14px; image-rendering: pixelated; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1), 0 0 0 5px rgba(179, 140, 255, 0.12), 0 22px 36px -16px rgba(0, 0, 0, 0.95), 0 0 40px -10px rgba(179, 140, 255, 0.55); transition: transform .4s cubic-bezier(.2, 1.3, .4, 1); }
.mg-card:hover .gc-pxw .gc-px { transform: scale(1.04) rotate(-1.5deg); }
.gc-pxw .gc-px-q { right: -22px; top: -16px; font-size: 46px; text-shadow: 0 6px 0 rgba(0, 0, 0, 0.5); }
.mg-card:hover .gc-pxw .gc-px-q { transform: rotate(-8deg) scale(1.12); transition: transform .4s cubic-bezier(.2, 1.6, .4, 1); }
.gc-pixel .gc-blur img { max-height: 200px; }
@media (max-width: 560px) { .gc-pxw { width: 140px; } }

/* --- Panneau de confirmation dans la page (remplace la fenêtre du navigateur) */
.modal.cf-modal { max-width: 520px; }
.cf-panel { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 20px; align-items: center; }
.cf-ico { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); }
.cf-ico .i { width: 24px; height: 24px; }
.cf-panel.danger .cf-ico { background: color-mix(in srgb, var(--red) 14%, transparent); color: var(--red); }
.cf-img { display: block; width: 92px; aspect-ratio: 3 / 4; border-radius: 10px; overflow: hidden; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 18px 30px -16px rgba(0, 0, 0, 0.9); }
.cf-img img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(.4) blur(1.5px); }
.cf-body h3 { margin: 2px 0 6px; font: var(--display-w) calc(24px * var(--display-scale)) / 1.15 var(--display); letter-spacing: var(--display-ls); }
.cf-body p { margin: 0 0 16px; font-size: 14px; }
.cf-danger { background: var(--red); border-color: var(--red); color: #1a0806; font-weight: 600; }
.cf-danger:hover { background: #f2826f; border-color: #f2826f; }
.cf-panel { animation: emPop .35s cubic-bezier(.2, 1.4, .4, 1); }

/* --- Pixel : accueil quand la partie du jour est finie, et parties du jour */
.px-land { display: grid; justify-items: center; text-align: center; padding: 6px 0 4px; }
.px-land h2 { margin: 4px 0 6px; font: var(--display-w) calc(clamp(28px, 3vw, 40px) * var(--display-scale)) / 1.05 var(--display); letter-spacing: var(--display-ls); }
.px-land p { margin: 0 0 16px; font-size: 14px; }
.px-hist { margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--line); }
.px-hist-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 12px; }
.px-hist-head .qz-kicker { margin: 0; }
.px-hist-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 16px; }
.px-hcard { position: relative; display: grid; gap: 3px; width: 100%; padding: 0; border: 0; background: none; text-align: left; animation: wtIn .4s ease both; animation-delay: calc(var(--i) * .05s); }
.px-hcard-img { display: block; aspect-ratio: 3 / 4; border-radius: 10px; overflow: hidden; margin-bottom: 6px; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 16px 26px -16px rgba(0, 0, 0, 0.9); transition: transform .3s cubic-bezier(.2, 1.3, .4, 1), box-shadow .3s; }
.px-hcard-img img { width: 100%; height: 100%; object-fit: cover; }
.px-hcard:not(.won) .px-hcard-img img { filter: saturate(.5) brightness(.8); }
.px-hcard:hover .px-hcard-img { transform: translateY(-4px); box-shadow: 0 0 0 2px var(--accent), 0 22px 30px -16px rgba(0, 0, 0, 0.9); }
.px-hcard-res { position: absolute; top: 8px; left: 8px; padding: 2px 9px; border-radius: 999px; background: rgba(14, 13, 11, 0.85); font: 700 11px var(--font); letter-spacing: .06em; color: var(--red); }
.px-hcard.won .px-hcard-res { color: var(--green); }
.px-hcard b { font-size: 14px; line-height: 1.2; }
.px-hcard small { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.px-hcard .wt-lvl-tag { margin-top: 4px; }
.px-detail { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 26px; align-items: center; }
.px-detail .wt-card { width: 220px; animation: none; }
.px-detail-b { display: grid; gap: 6px; justify-items: start; }
.px-detail-b .qz-kicker { margin: 0; }
.px-detail-b h3 { margin: 0; font: var(--display-w) calc(30px * var(--display-scale)) / 1.05 var(--display); letter-spacing: var(--display-ls); }
.px-detail-b .px-chips { margin-top: 8px; }
@media (max-width: 640px) { .px-detail { grid-template-columns: 1fr; justify-items: center; } .cf-panel { grid-template-columns: 1fr; justify-items: center; text-align: center; } }
.px-detail .wt-card { grid-area: auto; }
.modal.px-detail-modal { max-width: 720px; }
.px-detail-b .wt-bio { max-width: none; }
/* Pixel : image moins haute et plus large (presque carrée), le visage reste cadré en haut */
.px-frame { height: clamp(300px, calc(100vh - var(--top-h) - 270px), 560px); aspect-ratio: 15 / 14; }
@media (max-width: 860px) { .px-frame { height: auto; width: min(100%, 420px); } }
/* Pixel : l'ancienne largeur fixe (330 px) ne doit plus brider le cadre, qui suit la hauteur et son format presque carré */
.px-board .px-frame { width: auto; max-width: none; }
@media (max-width: 860px) { .px-board .px-frame { width: min(100%, 420px); height: auto; } }
/* parties du jour : vignette en léger pixel (canvas) */
.px-hcard-img canvas { display: block; width: 100%; height: 100%; image-rendering: pixelated; }
.px-hcard:not(.won) .px-hcard-img canvas { filter: saturate(.5) brightness(.8); }
.px-hcard:hover .px-hcard-img canvas { filter: none; }
/* --- Jeu Pixel : fond dans la DA (encre chaude, grille de pixels discrète, lueur vermillon, pixels qui dérivent) --- */
.quiz-zone.px-zone { position: relative; overflow: hidden; isolation: isolate;
  background:
    radial-gradient(80% 70% at 50% 0%, color-mix(in srgb, var(--accent) 9%, transparent), transparent 70%),
    linear-gradient(rgba(255, 255, 255, 0.022) 1px, transparent 1px) 0 0 / 18px 18px,
    linear-gradient(90deg, rgba(255, 255, 255, 0.022) 1px, transparent 1px) 0 0 / 18px 18px,
    var(--bg-2); }
.quiz-zone.px-zone::before, .quiz-zone.px-zone::after { content: ""; position: absolute; z-index: -1; width: 8px; height: 8px; pointer-events: none; background: color-mix(in srgb, var(--accent) 55%, transparent);
  box-shadow: 18vw 30vh 0 -1px rgba(255, 255, 255, 0.08), 42vw 12vh 0 0 color-mix(in srgb, var(--accent) 30%, transparent), 61vw 44vh 0 -2px rgba(255, 255, 255, 0.07), 8vw 52vh 0 -1px color-mix(in srgb, var(--accent) 25%, transparent), 74vw 22vh 0 -2px rgba(255, 255, 255, 0.06), 30vw 60vh 0 -2px rgba(255, 255, 255, 0.05);
  animation: pxDrift 16s linear infinite; opacity: .8; }
.quiz-zone.px-zone::before { left: 2%; top: 100%; }
.quiz-zone.px-zone::after { left: 12%; top: 100%; animation-duration: 23s; animation-delay: -9s; transform: scale(.7); opacity: .6; }
@keyframes pxDrift { from { translate: 0 0; } to { translate: 0 -120vh; } }
/* niveau sélectionné : le chibi flotte doucement et la carte respire */
.px-lvl.on { animation: pxBreath 2.8s ease-in-out infinite; }
.px-lvl.on .px-lvl-art canvas { animation: pxBob 2.8s ease-in-out infinite; }
.px-lvl.on b::before { animation: pxDot 1.4s ease-in-out infinite; }
.px-lvl:hover .px-lvl-art canvas { animation: pxBob 1.6s ease-in-out infinite; }
@keyframes pxBob { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-5px) rotate(-1.2deg); } }
@keyframes pxBreath { 0%, 100% { box-shadow: 0 0 0 0 transparent; } 50% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--lv) 22%, transparent), 0 18px 30px -20px color-mix(in srgb, var(--lv) 55%, transparent); } }
@keyframes pxDot { 50% { transform: scale(1.5); box-shadow: 0 0 14px var(--lv); } }
/* en partie : l'image flotte très légèrement, le balayage descend en continu */
.px-zone .px-frame { animation: pxFloat 5s ease-in-out infinite; }
@keyframes pxFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
.px-zone .px-scan { background-size: 100% 4px; animation: pxScan 6s linear infinite; }
@keyframes pxScan { to { background-position: 0 120px; } }
@media (prefers-reduced-motion: reduce) {
  .quiz-zone.px-zone::before, .quiz-zone.px-zone::after, .px-lvl.on, .px-lvl.on .px-lvl-art canvas, .px-lvl.on b::before, .px-lvl:hover .px-lvl-art canvas, .px-zone .px-frame, .px-zone .px-scan { animation: none; }
}

/* --- Panneau de confirmation : marges propres, la croix de fermeture ne chevauche plus le titre */
.modal.cf-modal { width: min(500px, 100%); max-width: none; padding: 26px 30px 24px; }
.cf-panel { gap: 18px; align-items: start; }
.cf-ico { width: 46px; height: 46px; margin-top: 2px; }
.cf-ico .i { width: 20px; height: 20px; }
.cf-body { padding-right: 34px; min-width: 0; }
.cf-body h3 { font-size: calc(22px * var(--display-scale)); }
.cf-body .btn-row { gap: 10px; }

/* --- Pixel : bouton Jouer sous les niveaux, niveau choisi bien visible */
.px-play-btn { margin-top: 22px; height: 48px; padding: 0 26px; font-size: 15px; gap: 10px; }
.px-play-btn .i { width: 16px; height: 16px; }
.px-play-btn.go { opacity: .7; pointer-events: none; }
.px-lvl.on { border-color: var(--lv); background: color-mix(in srgb, var(--lv) 8%, var(--surface)); box-shadow: 0 0 0 1px var(--lv), 0 18px 30px -20px color-mix(in srgb, var(--lv) 70%, transparent); }

/* --- Pixel : révélation de fin en plus grand */
.px-zone .wt-reveal.overlay { grid-template-columns: auto minmax(0, 600px); column-gap: 48px; padding: 32px 48px; }
.px-zone .wt-reveal.overlay .wt-card { width: min(320px, calc((100vh - var(--top-h) - 230px) * .66)); }
.px-zone .wt-reveal .wt-name { font-size: calc(clamp(34px, 4vw, 54px) * var(--display-scale)); }
.px-zone .wt-reveal .px-from { font-size: 16px; }
.px-zone .wt-reveal .qz-kicker { font-size: 12.5px; }
.px-zone .wt-reveal .wt-bio { max-width: 52ch; font-size: 15px; margin-top: 14px; }
.px-zone .wt-reveal .wt-gain b { font-size: calc(30px * var(--display-scale)); }
.px-zone .wt-reveal .wt-acts { margin-top: 20px; }
.px-zone .wt-reveal .wt-acts .btn { height: 46px; padding: 0 20px; font-size: 15px; }
@media (max-width: 700px) { .px-zone .wt-reveal.overlay { grid-template-columns: 120px minmax(0, 1fr); padding: 20px 16px; column-gap: 16px; } .px-zone .wt-reveal.overlay .wt-card { width: 120px; } }

/* Pixel : l'éclairage du fond (lueur en haut, pixels qui montent) prend la couleur du niveau choisi */
.quiz-zone.px-zone { --px-glow: var(--accent); }
.quiz-zone.px-zone[data-lv="facile"] { --px-glow: var(--green); }
.quiz-zone.px-zone[data-lv="moyen"] { --px-glow: var(--amber); }
.quiz-zone.px-zone[data-lv="difficile"] { --px-glow: var(--red); }
.quiz-zone.px-zone {
  background:
    radial-gradient(80% 70% at 50% 0%, color-mix(in srgb, var(--px-glow) 13%, transparent), transparent 70%),
    linear-gradient(rgba(255, 255, 255, 0.022) 1px, transparent 1px) 0 0 / 18px 18px,
    linear-gradient(90deg, rgba(255, 255, 255, 0.022) 1px, transparent 1px) 0 0 / 18px 18px,
    var(--bg-2);
  transition: box-shadow .5s; box-shadow: inset 0 1px 0 color-mix(in srgb, var(--px-glow) 30%, transparent); }
.quiz-zone.px-zone::before, .quiz-zone.px-zone::after { background: color-mix(in srgb, var(--px-glow) 60%, transparent);
  box-shadow: 18vw 30vh 0 -1px rgba(255, 255, 255, 0.08), 42vw 12vh 0 0 color-mix(in srgb, var(--px-glow) 35%, transparent), 61vw 44vh 0 -2px rgba(255, 255, 255, 0.07), 8vw 52vh 0 -1px color-mix(in srgb, var(--px-glow) 30%, transparent), 74vw 22vh 0 -2px rgba(255, 255, 255, 0.06), 30vw 60vh 0 -2px rgba(255, 255, 255, 0.05); }
.px-zone[data-lv] .px-frame { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 30px 60px -28px rgba(0, 0, 0, 0.95), 0 0 50px -16px color-mix(in srgb, var(--px-glow) 45%, transparent); }

/* --- Pixel, écran de départ : « Jouer » à droite des niveaux (largeur fixe : les cartes ne bougent plus),
   tout tient dans la fenêtre, vignettes du bas atténuées */
.px-setup-zone { padding-block: 16px 18px; }
.px-setup-zone .px-setup { padding: 0; }
.px-setup-zone .px-setup h2 { font-size: calc(clamp(24px, 2.4vw, 34px) * var(--display-scale)); margin: 2px 0 4px; }
.px-setup-zone .px-setup > p { margin-bottom: 14px; }
.px-pickrow { display: flex; align-items: center; justify-content: center; gap: clamp(18px, 2.4vw, 34px); }
.px-setup-zone .px-lvls { grid-template-columns: repeat(3, auto); gap: clamp(12px, 1.6vw, 22px); }
.px-setup-zone .px-lvl { padding: 10px 12px 12px; gap: 2px; }
.px-setup-zone .px-lvl-art { width: clamp(84px, calc((100vh - var(--top-h) - 470px) * .62), 150px); margin: 0 auto 6px; }
.px-setup-zone .px-lvl b { font-size: calc(17px * var(--display-scale)); }
.px-setup-zone .px-lvl small { font-size: 11.5px; }
.px-play-btn { margin-top: 0; width: 170px; height: auto; min-height: 64px; padding: 10px 18px; justify-content: center; border-radius: 14px; }
.px-play-btn > span { display: grid; text-align: left; font: 700 18px/1.1 var(--font); }
.px-play-btn small { font: 600 11.5px var(--font); letter-spacing: .04em; opacity: .75; margin-top: 3px; }
.px-play-btn .i { width: 20px; height: 20px; flex: none; }
.px-setup-zone .px-hist { margin-top: 14px; padding-top: 12px; }
.px-setup-zone .px-hist-head { margin-bottom: 8px; }
.px-setup-zone .px-hist-list { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; }
.px-setup-zone .px-hist-list > li { flex: none; width: calc(var(--hh) * .75); }
.px-setup-zone { --hh: clamp(84px, calc(100vh - var(--top-h) - 585px), 190px); }
.px-setup-zone .px-hcard-img { height: var(--hh); aspect-ratio: auto; margin-bottom: 4px; }
.px-setup-zone .px-hcard b { font-size: 12.5px; }
.px-setup-zone .px-hcard small { font-size: 11px; }
.px-setup-zone .px-hcard .wt-lvl-tag { display: none; }
/* vignettes moins lumineuses, elles retrouvent leur éclat au survol */
.px-hcard .px-hcard-img canvas { filter: brightness(.72) saturate(.8); transition: filter .3s; }
.px-hcard:not(.won) .px-hcard-img canvas { filter: brightness(.6) saturate(.45); }
.px-hcard:hover .px-hcard-img canvas { filter: none; }
@media (max-width: 760px) { .px-pickrow { flex-direction: column; } .px-play-btn { width: 100%; } }
/* barre du haut : compteur de spins (mini roue + nombre), lien vers la roue */
.top-spins { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 11px 0 6px; margin: 0 -18px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font: 600 13px var(--font); font-variant-numeric: tabular-nums; flex: none; transition: border-color .15s, color .15s, background .15s; }
.top-spins:hover { border-color: var(--line-2); color: var(--text); background: var(--surface); }
.ts-wheel { position: relative; width: 22px; height: 22px; border-radius: 50%; flex: none;
  background: conic-gradient(#3a3326 0 45deg, #23211c 45deg 90deg, #2e2a22 90deg 135deg, #151412 135deg 180deg, #3a3326 180deg 225deg, #23211c 225deg 270deg, #2e2a22 270deg 315deg, #151412 315deg 360deg);
  box-shadow: inset 0 0 0 1.5px #b07a2e; }
.ts-wheel::after { content: ""; position: absolute; inset: 7px; border-radius: 50%; background: #b07a2e; }
.top-spins.ready { color: var(--text); border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.top-spins.ready b { color: var(--accent); }
.top-spins.ready .ts-wheel { animation: tsSpin 8s linear infinite; }
.top-spins.ready:hover .ts-wheel { animation-duration: 1.6s; }
@keyframes tsSpin { to { transform: rotate(360deg); } }
@media (max-width: 900px) { .top-spins { margin: 0; height: 32px; } }
@media (prefers-reduced-motion: reduce) { .top-spins.ready .ts-wheel { animation: none; } }

/* --- Pixel, écran de départ (correctif) : niveaux centrés, « Jouer » posé en absolu à leur droite ;
   la zone remplit la fenêtre et les parties du jour se calent en bas de page */
.px-setup-zone { display: flex; flex-direction: column; min-height: calc(100vh - var(--top-h) - 140px); }
.px-setup-zone .px-setup { flex: none; }
.px-setup-zone .px-hist { margin-top: auto; }
.px-pickrow { display: block; position: relative; width: max-content; margin: 0 auto; }
.px-pickrow .px-play-btn { position: absolute; left: calc(100% + clamp(22px, 3vw, 48px)); top: 50%; transform: translateY(-50%); }
.px-pickrow .px-play-btn:active { transform: translateY(calc(-50% + 1px)); }
@media (max-width: 1000px) { .px-pickrow { width: auto; display: flex; flex-direction: column; align-items: center; gap: 14px; } .px-pickrow .px-play-btn { position: static; transform: none; width: min(100%, 320px); } .px-setup-zone { min-height: 0; } }
.mg-page .quiz-zone.px-setup-zone { display: flex; flex-direction: column; min-height: calc(100vh - var(--top-h) - 140px); }
@media (max-width: 1000px) { .mg-page .quiz-zone.px-setup-zone { min-height: 0; } }
/* barre du haut : le compteur de spins ne chevauche plus l'avatar */
.top-spins { margin: 0 0 0 -18px; }
.top-spins.bump { animation: wlBump .6s cubic-bezier(.2, 1.6, .4, 1); }
@media (max-width: 900px) { .top-spins { margin: 0; } }
/* « Jouer » en bas à droite de la zone, juste au-dessus des parties du jour */
.px-play-row { margin-top: auto; display: flex; justify-content: flex-end; padding-top: 14px; }
.px-play-row .px-play-btn { position: static; transform: none; }
.px-play-row .px-play-btn:active { transform: translateY(1px); }
.px-setup-zone .px-hist { margin-top: 14px; }
@media (max-width: 1000px) { .px-play-row { justify-content: center; } }
/* (avec la rangée « Jouer » en plus : niveaux et vignettes un peu plus petits sur les écrans bas) */
.px-setup-zone .px-lvl-art { width: clamp(80px, calc((100vh - var(--top-h) - 520px) * .62), 150px); }
.px-setup-zone { --hh: clamp(80px, calc(100vh - var(--top-h) - 612px), 190px); }
.px-play-row { padding-top: 8px; }
.px-play-row .px-play-btn { min-height: 56px; }
.px-setup-zone { --hh: clamp(80px, calc(100vh - var(--top-h) - 622px), 190px); }
/* quiz du jour : jaquettes des thèmes bien plus grandes (largeur disponible, sans dépasser la hauteur de l'écran) */
@media (min-width: 1001px) {
  .qz-themes { grid-template-columns: repeat(4, min(calc((100% - 66px) / 4), calc((100vh - var(--top-h) - 330px) * .667), 340px)); gap: 22px; }
  .qz-theme b { font-size: calc(17px * var(--display-scale)); }
}
/* quiz du jour : la page tient sans défiler — les jaquettes prennent seulement la hauteur restante */
@media (min-width: 1001px) {
  .qz-themes { grid-template-columns: repeat(4, min(calc((100% - 66px) / 4), calc((100dvh - var(--top-h) - 470px) * .667), 340px)); }
}
/* jaquettes du quiz : profondeur en couches — fond flou au loin, image au milieu, cadre lumineux devant ;
   chaque couche glisse à sa vitesse selon la position de la souris (parallaxe) */
.qz-deep { background: #0a0908; }
.qz-deep img.qz-l0, .qz-deep img.qz-l1 { position: absolute; display: block; object-fit: cover; transition: transform .35s cubic-bezier(.2, .8, .2, 1), filter .3s; }
.qz-deep .qz-l0 { inset: -10%; width: 120%; height: 120%; filter: blur(14px) brightness(.45) saturate(1.3); transform: translate(calc((var(--gx, 50%) - 50%) * -0.1), calc((var(--gy, 50%) - 50%) * -0.1)) scale(1.05); }
.qz-deep .qz-l1 { inset: 5%; width: 90%; height: 90%; border-radius: 8px; box-shadow: 0 18px 30px -12px rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(255, 255, 255, 0.08);
  transform: translate(calc((var(--gx, 50%) - 50%) * 0.035), calc((var(--gy, 50%) - 50%) * 0.035)); }
.qz-deep .qz-l2 { position: absolute; inset: 0; z-index: 2; border-radius: inherit; pointer-events: none; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12), inset 0 0 40px rgba(0, 0, 0, 0.55);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.10), transparent 35%); transform: translate(calc((var(--gx, 50%) - 50%) * 0.06), calc((var(--gy, 50%) - 50%) * 0.06)); transition: transform .35s cubic-bezier(.2, .8, .2, 1); }
.qz-deep.tilting img.qz-l0, .qz-deep.tilting img.qz-l1, .qz-deep.tilting .qz-l2 { transition-duration: .08s; }
.qz-theme:hover .qz-deep img.qz-l1 { transform: translate(calc((var(--gx, 50%) - 50%) * 0.035), calc((var(--gy, 50%) - 50%) * 0.035)) scale(1.03); }
.qz-themes:has(.on) .qz-theme:not(.on) .qz-deep img { filter: brightness(.55) saturate(.7); }
.qz-themes:has(.on) .qz-theme:not(.on) .qz-deep img.qz-l0 { filter: blur(14px) brightness(.3) saturate(.8); }
/* hors survol : couches au repos (la position de la souris n'est suivie que pendant l'inclinaison) */
.qz-deep:not(.tilting) .qz-l0 { transform: scale(1.05); }
.qz-deep:not(.tilting) .qz-l1, .qz-deep:not(.tilting) .qz-l2 { transform: none; }

/* --- Parties du jour : contours très fins, le relief est dans l'image (tuiles éclairées par la souris), l'image seule s'incline */
.px-hcard-img { border-radius: 8px; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06), 0 12px 20px -14px rgba(0, 0, 0, 0.9); overflow: visible; perspective: 600px; background: none; }
.px-hcard:hover .px-hcard-img { transform: none; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12), 0 18px 26px -14px rgba(0, 0, 0, 0.95); }
.px-hcard-img canvas { border-radius: 8px; transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .45s cubic-bezier(.2, 1, .3, 1), filter .3s; }
.px-hcard:hover .px-hcard-img canvas { transition: transform .08s linear, filter .3s; }
/* Écran de fin Pixel : toutes les parties restent sur une seule rangée, avec défilement horizontal si nécessaire. */
.px-land-zone:not(.em-zone) .px-hist-list { display: flex; gap: 14px; overflow-x: auto; overflow-y: hidden; padding: 2px 1px 4px; scroll-snap-type: x proximity; }
.px-land-zone:not(.em-zone) .px-hist-list > li { flex: 0 0 clamp(148px, 9vw, 168px); min-width: 0; scroll-snap-align: start; }
/* Le défilement reste disponible à la molette/au pavé tactile, mais aucune barre n'est dessinée. */
.px-zone:not(.em-zone) .px-hist-list { scrollbar-width: none; -ms-overflow-style: none; }
.px-zone:not(.em-zone) .px-hist-list::-webkit-scrollbar { display: none; width: 0; height: 0; }
/* Les vignettes restent plus difficiles à lire que dans la fenêtre de détail, même au survol. */
.px-land-zone:not(.em-zone) .px-hcard .px-hcard-img canvas { filter: blur(1.6px) brightness(.68) saturate(.68); }
.px-land-zone:not(.em-zone) .px-hcard:not(.won) .px-hcard-img canvas { filter: blur(1.8px) brightness(.56) saturate(.42); }
.px-land-zone:not(.em-zone) .px-hcard:hover .px-hcard-img canvas { filter: blur(.9px) brightness(.86) saturate(.88); }
/* avatar 3D de la barre du haut : il ne participe pas au fondu entre les pages (sinon il « se réinitialise » à chaque changement de menu) */
body > canvas.coin-gallery[style*="z-index: 61"] { view-transition-name: top-coin; }
::view-transition-group(top-coin) { animation: none; }
::view-transition-old(top-coin) { display: none; }
::view-transition-new(top-coin) { animation: none; }

/* --- Jaquettes du quiz (refait) : l'image remplit la jaquette, liseré fin ; relief DANS l'image :
   le centre (les personnages) ressort et glisse plus vite que le fond, un reflet suit la souris */
.qz-cover.qz-deep { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.07), 0 18px 30px -18px rgba(0, 0, 0, 0.9); outline-width: 1.5px; outline-offset: 3px; }
.qz-deep .qz-l0 { display: none; }
.qz-deep .qz-l1 { inset: 0; width: 100%; height: 100%; border-radius: 0; box-shadow: none; transform: translate(calc((var(--gx, 50%) - 50%) * -0.03), calc((var(--gy, 50%) - 50%) * -0.03)) scale(1.06); }
.qz-deep img.qz-l3 { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; pointer-events: none;
  -webkit-mask-image: radial-gradient(ellipse 52% 50% at 50% 46%, #000 58%, transparent 78%); mask-image: radial-gradient(ellipse 52% 50% at 50% 46%, #000 58%, transparent 78%);
  filter: drop-shadow(0 10px 14px rgba(0, 0, 0, 0.55)) saturate(1.08) contrast(1.04);
  transform: translate(calc((var(--gx, 50%) - 50%) * 0.07), calc((var(--gy, 50%) - 50%) * 0.07)) scale(1.1); transition: transform .35s cubic-bezier(.2, .8, .2, 1), filter .3s; }
.qz-deep .qz-l2 { z-index: 2; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08), inset 0 -40px 50px -30px rgba(0, 0, 0, 0.55);
  background: radial-gradient(circle at var(--gx, 30%) var(--gy, 20%), rgba(255, 255, 255, 0.22), transparent 45%); mix-blend-mode: soft-light; transform: none; opacity: .7; }
.qz-deep.tilting img.qz-l3 { transition-duration: .08s; }
.qz-deep:not(.tilting) img.qz-l3 { transform: scale(1.1); }
.qz-deep:not(.tilting) .qz-l1 { transform: scale(1.06); }
.qz-deep.tilting .qz-l2 { opacity: 1; }
.qz-themes:has(.on) .qz-theme:not(.on) .qz-deep img.qz-l3 { filter: brightness(.55) saturate(.7); }
@media (prefers-reduced-motion: reduce) { .qz-deep img.qz-l3, .qz-deep .qz-l1 { transform: none; } }
/* relief des jaquettes un peu plus marqué */
.qz-deep img.qz-l3 { transform: translate(calc((var(--gx, 50%) - 50%) * 0.13), calc((var(--gy, 50%) - 50%) * 0.13)) scale(1.1); }
.qz-deep .qz-l1 { transform: translate(calc((var(--gx, 50%) - 50%) * -0.05), calc((var(--gy, 50%) - 50%) * -0.05)) scale(1.08); }
.qz-deep:not(.tilting) img.qz-l3 { transform: scale(1.1); }
.qz-deep:not(.tilting) .qz-l1 { transform: scale(1.08); }

/* --- Jaquettes du quiz (page du quiz) : plus de couche qui « ressort » ; juste un zoom au survol et l'image qui suit la souris */
.qz-deep img.qz-l3 { display: none; }
.qz-deep .qz-l1 { transform: scale(1.02); transition: transform .45s cubic-bezier(.2, .8, .2, 1), filter .3s; }
.qz-theme:hover .qz-deep .qz-l1, .qz-deep.tilting .qz-l1 { transform: translate(calc((var(--gx, 50%) - 50%) * -0.06), calc((var(--gy, 50%) - 50%) * -0.06)) scale(1.12); }
.qz-deep:not(.tilting) .qz-l1 { transform: scale(1.02); }
.qz-theme:hover .qz-deep:not(.tilting) .qz-l1 { transform: scale(1.1); }

/* --- Page Jeux, carte Quiz : les 4 jaquettes en vraie perspective 3D (éventail incurvé, profondeur),
   l'éventail entier pivote avec la souris (angles de la carte --rx / --ry) */
.mg-grid .gc-quiz .gc-front { perspective: 760px; }
.mg-grid .gc-quiz .gc-front .gc-fan { transform-style: preserve-3d; transform: rotateX(calc(8deg + var(--rx, 0deg) * 1.6)) rotateY(calc(var(--ry, 0deg) * 2)); transition: transform .5s cubic-bezier(.2, 1, .3, 1); }
.mg-grid .gc-quiz.tilting .gc-front .gc-fan { transition-duration: .1s; }
.mg-grid .gc-quiz .gc-front .gc-fan img { transform-style: preserve-3d; margin: 0 -10px -30px; box-shadow: 0 22px 30px -14px rgba(0, 0, 0, 0.95), 0 0 0 1px rgba(255, 255, 255, 0.06); transition: transform .5s cubic-bezier(.2, 1.2, .4, 1); }
.mg-grid .gc-quiz .gc-front .gc-fan img:nth-child(n) { margin-left: -10px; }
.mg-grid .gc-quiz .gc-front .gc-fan img:nth-child(1) { transform: translateZ(-30px) rotateY(32deg) rotateZ(-4deg) translateY(14px); }
.mg-grid .gc-quiz .gc-front .gc-fan img:nth-child(2) { transform: translateZ(18px) rotateY(12deg) translateY(2px); }
.mg-grid .gc-quiz .gc-front .gc-fan img:nth-child(3) { transform: translateZ(18px) rotateY(-12deg) translateY(2px); }
.mg-grid .gc-quiz .gc-front .gc-fan img:nth-child(4) { transform: translateZ(-30px) rotateY(-32deg) rotateZ(4deg) translateY(14px); }
.mg-grid .gc-quiz:hover .gc-front .gc-fan img:nth-child(1) { transform: translateZ(-10px) rotateY(24deg) rotateZ(-5deg) translateX(-14px) translateY(4px); }
.mg-grid .gc-quiz:hover .gc-front .gc-fan img:nth-child(2) { transform: translateZ(46px) rotateY(8deg) translateX(-4px) translateY(-8px); }
.mg-grid .gc-quiz:hover .gc-front .gc-fan img:nth-child(3) { transform: translateZ(46px) rotateY(-8deg) translateX(4px) translateY(-8px); }
.mg-grid .gc-quiz:hover .gc-front .gc-fan img:nth-child(4) { transform: translateZ(-10px) rotateY(-24deg) rotateZ(5deg) translateX(14px) translateY(4px); }
@media (prefers-reduced-motion: reduce) { .mg-grid .gc-quiz .gc-front .gc-fan, .mg-grid .gc-quiz .gc-front .gc-fan img { transition: none; } }
/* éventail 3D de la carte Quiz : jaquettes espacées (plus de chevauchement : les deux du centre ne se mélangent plus) */
.mg-grid .gc-quiz .gc-front .gc-fan img, .mg-grid .gc-quiz .gc-front .gc-fan img:nth-child(n) { width: 108px; margin: 0 4px -30px; }
.mg-grid .gc-quiz .gc-front .gc-fan img:nth-child(1) { transform: translateZ(-24px) rotateY(28deg) translateY(12px); }
.mg-grid .gc-quiz .gc-front .gc-fan img:nth-child(2) { transform: translateZ(22px) rotateY(9deg); }
.mg-grid .gc-quiz .gc-front .gc-fan img:nth-child(3) { transform: translateZ(22px) rotateY(-9deg); }
.mg-grid .gc-quiz .gc-front .gc-fan img:nth-child(4) { transform: translateZ(-24px) rotateY(-28deg) translateY(12px); }
.mg-grid .gc-quiz:hover .gc-front .gc-fan img:nth-child(1) { transform: translateZ(-14px) rotateY(22deg) translateX(-8px) translateY(4px); }
.mg-grid .gc-quiz:hover .gc-front .gc-fan img:nth-child(2) { transform: translateZ(40px) rotateY(6deg) translateY(-8px); }
.mg-grid .gc-quiz:hover .gc-front .gc-fan img:nth-child(3) { transform: translateZ(40px) rotateY(-6deg) translateY(-8px); }
.mg-grid .gc-quiz:hover .gc-front .gc-fan img:nth-child(4) { transform: translateZ(-14px) rotateY(-22deg) translateX(8px) translateY(4px); }

/* ===========================================================================
   Devine l'anime (refait sur le modèle de Pixel) : indices en tuiles 3D (face ivoire, dos d'encre) qui se retournent
   =========================================================================== */
.em-board { grid-template-columns: auto minmax(300px, 420px); }
.em-stage3d { perspective: 1100px; padding: 6px; }
.em-card { --rx: 0deg; --ry: 0deg; position: relative; display: grid; gap: clamp(10px, 1.6vh, 16px); padding: clamp(18px, 2.4vh, 28px) clamp(18px, 2vw, 30px) clamp(22px, 2.8vh, 32px) clamp(10px, 1.2vw, 18px);
  border-radius: 18px; background: radial-gradient(90% 70% at 50% 0%, color-mix(in srgb, var(--px-glow, var(--accent)) 9%, transparent), transparent 70%), var(--surface);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.07), 0 40px 70px -34px rgba(0, 0, 0, 0.95), 0 0 60px -26px color-mix(in srgb, var(--px-glow, var(--accent)) 45%, transparent);
  transform-style: preserve-3d; transform: rotateX(var(--rx)) rotateY(var(--ry)); transition: transform .6s cubic-bezier(.2, 1, .3, 1); }
.em-card.tilt { transition-duration: .1s; }
.em-glare { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(45% 45% at var(--mx, 28%) var(--my, 12%), rgba(255, 255, 255, 0.07), transparent 70%); }
.em-row { --t: clamp(56px, min(8.4vw, calc((100vh - var(--top-h) - 330px) / 5.4)), 96px); --gap: clamp(8px, 1vw, 14px); display: flex; align-items: center; gap: var(--gap); transform-style: preserve-3d; }
.em-row-n { width: 16px; font: 600 11px var(--font); color: var(--faint); text-align: right; }
.em-row.on .em-row-n { color: var(--muted); }

/* une tuile : deux faces dos à dos ; épaisseur dessinée sous la face (tranche) */
.em-tile { position: relative; flex: none; width: var(--t); height: calc(var(--t) * 1.12); transform-style: preserve-3d; }
.em-tile-in { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateY(180deg); transition: transform .75s cubic-bezier(.3, 1.35, .5, 1); transition-delay: calc(var(--k, 0) * .11s); }
.em-row.on .em-tile-in { transform: rotateY(0deg); }
.em-face, .em-back { position: absolute; inset: 0; display: grid; place-items: center; border-radius: calc(var(--t) * .14); backface-visibility: hidden; -webkit-backface-visibility: hidden; font-style: normal; }
.em-face { background: linear-gradient(#f4ecdc, #e3d6bb); color: #2a2118; font-size: calc(var(--t) * .56); line-height: 1; font-weight: 400;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.75), inset 0 -4px 0 rgba(120, 90, 50, 0.16), 0 5px 0 #bba684, 0 7px 0 #7d6a48, 0 20px 24px -12px rgba(0, 0, 0, 0.95); }
.em-back { transform: rotateY(180deg); background: #1d1b17; color: color-mix(in srgb, var(--accent) 80%, transparent); font: 700 calc(var(--t) * .38) / 1 var(--jp);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06), inset 0 0 0 5px #1d1b17, inset 0 0 0 6px rgba(255, 90, 54, 0.18), 0 5px 0 #0f0e0c, 0 20px 24px -12px rgba(0, 0, 0, 0.95); }
/* survol : la tuile se soulève vers le joueur */
.em-row.on .em-tile:hover .em-tile-in { transform: translateZ(18px) translateY(-4px) rotateX(10deg); transition-delay: 0s; transition-duration: .3s; }
/* trouvé : vague de tuiles qui sautent */
.em-card.win .em-row.on .em-tile-in { animation: emJump .7s cubic-bezier(.2, 1.6, .4, 1) both; animation-delay: calc(var(--r, 0) * .09s + var(--k, 0) * .06s); }
@keyframes emJump { 40% { transform: translateZ(34px) translateY(-14px) rotateZ(-5deg); } 100% { transform: rotateY(0deg); } }
.em-card.lost .em-face { filter: saturate(.55) brightness(.9); transition: filter .8s; }

/* dernier indice : plaque (année, format, studio, genres) */
.em-plate { width: calc(var(--t) * 3 + var(--gap) * 2); height: calc(var(--t) * 1.75); }
.em-plate .em-face { display: grid; align-content: center; justify-items: start; gap: 6px; padding: 8px 14px; font-size: 14px; overflow: hidden; }
.em-plate .em-back { display: flex; flex-direction: column; justify-content: center; gap: 5px; font-size: calc(var(--t) * .26); }
.em-plate .em-back small { font: 600 10.5px var(--font); letter-spacing: .14em; text-transform: uppercase; color: var(--faint); }
.em-fact { display: grid; gap: 1px; min-width: 0; text-align: left; }
.em-fact small { font: 700 9px var(--font); letter-spacing: .12em; text-transform: uppercase; color: rgba(42, 33, 24, 0.5); }
.em-fact b { font: 700 clamp(11px, calc(var(--t) * .15), 15px) / 1.2 var(--font); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* panneau : 4 propositions au dernier essai */
.em-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 4px; }
.em-choices .qz-choice { min-height: 50px; font-size: 14px; }

/* révélation : les trois séries d'emojis */
.em-sets { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.em-sets span { padding: 4px 12px; border-radius: 999px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); font-size: 20px; letter-spacing: 3px; }
.wt-reveal.in .em-sets span { animation: wtIn .5s ease both; animation-delay: calc(1.4s + var(--k, 0) * .1s); }
.wt-reveal.still .em-sets span { animation: none; }
.px-detail-b .em-sets { margin-top: 4px; }

/* parties du jour : jaquette + premiers emojis */
.em-hcard .px-hcard-img { position: relative; }
.em-hcard .px-hcard-img img { filter: brightness(.72) saturate(.8); transition: filter .3s; }
.em-hcard:not(.won) .px-hcard-img img { filter: brightness(.55) saturate(.4); }
.em-hcard:hover .px-hcard-img img { filter: none; }
.em-hc-emo { position: absolute; left: 0; right: 0; bottom: 0; padding: 22px 6px 8px; text-align: center; font-size: 20px; letter-spacing: 3px; background: linear-gradient(transparent, rgba(0, 0, 0, 0.85)); }
.px-setup-zone .em-hc-emo { display: none; }

/* écran de départ : trois tuiles par niveau, qui font un tour complet au survol */
.em-lvl-art { display: grid; place-items: center; container-type: inline-size; perspective: 600px; }
.em-lvl-art .em-row { --t: 29cqi; --gap: 3.5cqi; }
.em-lvl-art .em-tile-in { transition-duration: .9s; }
.px-lvl:hover .em-lvl-art .em-tile-in, .px-lvl.on .em-lvl-art .em-tile-in { transform: rotateY(360deg) translateZ(6px); }
.px-lvl:not(:hover):not(.on) .em-lvl-art .em-face { filter: saturate(.6) brightness(.85); }

/* hub : la carte « Devine l'anime » en tuiles */
.gc-emo.em-row { --t: 78px; --gap: 12px; perspective: 600px; }
.gc-emo.em-row .em-tile:nth-child(1) .em-tile-in { transform: rotateZ(-6deg) translateY(6px); }
.gc-emo.em-row .em-tile:nth-child(3) .em-tile-in { transform: rotateZ(6deg) translateY(6px); }
.mg-card:hover .gc-emo.em-row .em-tile-in { transform: rotateY(360deg) translateY(-8px); }

@media (max-width: 860px) { .em-row { --t: clamp(48px, 17vw, 80px); } .em-stage3d { width: 100%; display: grid; justify-content: center; } }
@media (max-width: 480px) { .em-choices { grid-template-columns: 1fr; } .em-plate .em-face { padding: 0 8px; gap: 6px; } }
@media (prefers-reduced-motion: reduce) { .em-card, .em-tile-in { transition: none; } .em-card.win .em-row.on .em-tile-in, .wt-reveal.in .em-sets span { animation: none; } }

/* Devine l'anime, écran de départ : grandes cartes de niveau qui occupent la largeur et la hauteur libres */
.em-zone.px-setup-zone .px-setup { flex: 1; display: flex; flex-direction: column; align-items: stretch; min-height: 0; }
.em-zone.px-setup-zone .px-setup > * { align-self: center; }
.em-zone.px-setup-zone .px-setup > .px-pickrow { flex: 1; display: flex; align-self: stretch; width: 100%; min-height: 0; }
.em-zone.px-setup-zone .px-lvls { flex: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2.2vw, 32px); width: min(100%, 1240px); margin: 0 auto; }
.em-zone.px-setup-zone .px-lvl { grid-template-rows: minmax(0, 1fr) auto auto; min-height: clamp(220px, calc(100vh - var(--top-h) - 400px), 460px); padding: 16px 16px 20px; gap: 4px; }
.em-zone.px-setup-zone .px-lvl-art { width: 100%; height: 100%; aspect-ratio: auto; margin: 0 0 10px; }
.em-zone.px-setup-zone .em-lvl-art .em-row { --t: min(24cqi, 120px); --gap: 3cqi; }
.em-zone.px-setup-zone .px-lvl b { font-size: calc(24px * var(--display-scale)); }
.em-zone.px-setup-zone .px-lvl small { font-size: 13.5px; }
@media (max-width: 760px) { .em-zone.px-setup-zone .px-lvls { grid-template-columns: 1fr; } .em-zone.px-setup-zone .px-lvl { min-height: 0; grid-template-columns: 1fr; justify-items: center; text-align: center; } .em-zone.px-setup-zone .px-lvl-art { height: 120px; } }
/* dernier indice : fiche sur une ligne, personnage principal, forme du titre en cases */
.em-facts { display: grid; gap: 1px; width: 100%; min-width: 0; font: 600 clamp(11px, calc(var(--t) * .15), 14px) / 1.25 var(--font); color: rgba(42, 33, 24, 0.7); }
.em-facts > * { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.em-facts b { color: #2a2118; font-weight: 800; }

.em-hero { display: flex; align-items: baseline; gap: 8px; min-width: 0; max-width: 100%; }
.em-hero small, .em-fact small { font: 700 9px var(--font); letter-spacing: .12em; text-transform: uppercase; color: rgba(42, 33, 24, 0.5); }
.em-hero b { font: 700 clamp(12px, calc(var(--t) * .17), 16px) / 1.2 var(--font); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.em-shape { display: flex; flex-wrap: wrap; gap: 4px 10px; }
.em-word { display: flex; gap: 2px; }
.em-word i { display: grid; place-items: center; width: clamp(10px, calc(var(--t) * .15), 15px); height: clamp(14px, calc(var(--t) * .2), 20px); border-bottom: 2px solid rgba(42, 33, 24, 0.35); font: 800 clamp(10px, calc(var(--t) * .15), 14px) / 1 var(--font); font-style: normal; color: #2a2118; }
.em-word i.on { border-bottom-color: var(--accent); color: var(--accent); }

/* Devine l'anime : correctif des tuiles qui disparaissaient après le survol.
   La carte ne partage plus son espace 3D avec les tuiles (elles passaient parfois derrière le fond de la carte, dans le même plan) :
   carte et rangées à plat, chaque tuile a sa propre perspective pour se retourner ; survol et saut gardent la même forme de transformation */
.em-card, .em-row { transform-style: flat; }
.em-tile { transform-style: flat; perspective: 520px; }
.em-glare { z-index: 0; }
.em-row { position: relative; z-index: 1; }
.em-row.on .em-tile:hover .em-tile-in { transform: translateY(-5px) rotateX(12deg) rotateY(0deg); }
@keyframes emJump { 40% { transform: translateY(-14px) rotateX(0deg) rotateY(0deg) rotateZ(-5deg); } 100% { transform: translateY(0) rotateX(0deg) rotateY(0deg) rotateZ(0deg); } }
.em-row.on .em-tile-in { transform: translateY(0) rotateX(0deg) rotateY(0deg); }
.em-tile-in { transform: translateY(0) rotateX(0deg) rotateY(180deg); }
.px-lvl:hover .em-lvl-art .em-tile-in, .px-lvl.on .em-lvl-art .em-tile-in { transform: translateY(-3px) rotateX(0deg) rotateY(360deg); }
.mg-card:hover .gc-emo.em-row .em-tile-in { transform: translateY(-8px) rotateX(0deg) rotateY(360deg); }
.gc-emo.em-row .em-tile:nth-child(1) .em-tile-in { transform: translateY(6px) rotateX(0deg) rotateY(0deg) rotateZ(-6deg); }
.gc-emo.em-row .em-tile:nth-child(3) .em-tile-in { transform: translateY(6px) rotateX(0deg) rotateY(0deg) rotateZ(6deg); }
.mg-card:hover .gc-emo.em-row .em-tile:nth-child(n) .em-tile-in { transform: translateY(-8px) rotateX(0deg) rotateY(360deg); }

/* Devine l'anime, écran de départ : tout tient dans la fenêtre (niveaux, bouton, parties du jour) ;
   bouton « Jouer » de taille normale, centré et détaché des cartes */
.mg-page .quiz-zone.em-zone.px-setup-zone { height: calc(100dvh - var(--top-h) - 124px); min-height: 480px; padding-block: 14px 16px; }
.em-zone.px-setup-zone .px-setup > p { margin-bottom: 12px; }
.em-zone.px-setup-zone .px-lvl { min-height: 0; height: 100%; padding: 12px 14px 14px; }
.em-zone.px-setup-zone .px-lvl-art { min-height: 0; }
.em-zone.px-setup-zone .em-lvl-art .em-row { --t: min(22cqi, 110px); }
.em-zone .px-play-row { flex: none; justify-content: center; margin-top: 0; padding-top: 18px; }
.em-zone .px-play-row .px-play-btn { width: auto; min-height: 0; height: 44px; padding: 0 30px; border-radius: 999px; gap: 8px; }
.em-zone .px-play-row .px-play-btn > span { font-size: 15px; }
.em-zone .px-play-row .px-play-btn .i { width: 16px; height: 16px; }
.em-zone.px-setup-zone { --hh: clamp(64px, calc(100dvh - var(--top-h) - 700px), 110px); }
.em-zone.px-setup-zone .px-hist { flex: none; margin-top: 14px; padding-top: 10px; }
.em-zone.px-setup-zone .px-hist-list { overflow-y: hidden; }
@media (max-width: 760px) { .mg-page .quiz-zone.em-zone.px-setup-zone { height: auto; min-height: 0; } .em-zone.px-setup-zone .px-lvl { height: auto; } }
@media (max-height: 640px) { .mg-page .quiz-zone.em-zone.px-setup-zone { height: auto; } .em-zone.px-setup-zone .px-lvl-art { height: 120px; } }

/* --- Optimisations (2026-10-06) : animer seulement transform / opacity (pas d'ombre ni de fond repeints à chaque image),
   et des calques à part pour les cartes inclinables (leur flou n'est plus redessiné à chaque mouvement de souris) */
.px-lvl.on { animation: none; position: relative; }
.px-lvl.on::after { content: ""; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--lv) 22%, transparent), 0 18px 30px -20px color-mix(in srgb, var(--lv) 55%, transparent); opacity: 0; animation: pxBreathO 2.8s ease-in-out infinite; }
@keyframes pxBreathO { 50% { opacity: 1; } }
.px-lvl.on b::before { animation: pxDotT 1.4s ease-in-out infinite; }
@keyframes pxDotT { 50% { transform: scale(1.5); } }
.px-zone .px-scan { inset: -120px 0 0 0; mix-blend-mode: normal; background: repeating-linear-gradient(transparent 0 3px, rgba(0, 0, 0, 0.07) 3px 4px); animation: pxScanT 6s linear infinite; will-change: transform; }
@keyframes pxScanT { to { transform: translateY(120px); } }
.game-card.tilt3d, .em-card, .wt-card { will-change: transform; }
.quiz-zone.px-zone::before, .quiz-zone.px-zone::after { will-change: translate; }
@media (prefers-reduced-motion: reduce) { .px-lvl.on::after, .px-lvl.on b::before, .px-zone .px-scan { animation: none; } }
.em-zone.px-setup-zone .em-lvl-art { container-type: size; }
.em-zone.px-setup-zone .em-lvl-art .em-row { --t: min(22cqi, 62cqh, 110px); }
.em-zone.px-setup-zone .px-setup > .px-pickrow { align-items: stretch; }
.em-zone.px-setup-zone .px-lvls { grid-template-rows: minmax(0, 1fr); align-items: stretch; }
.em-zone.px-setup-zone .px-lvl { height: auto; }
/* thème de chaque rangée d'indices, écrit à la verticale */
.em-row-n { width: 14px; writing-mode: vertical-rl; transform: rotate(180deg); text-align: center; font: 700 9px var(--font); letter-spacing: .16em; text-transform: uppercase; color: var(--faint); white-space: nowrap; }
.em-row.on .em-row-n { color: var(--muted); }

/* Devine l'anime, fin de partie : jaquette | titre, fiche et explication | carte des indices (comme pendant la partie) */
.px-zone .wt-reveal.overlay.em-reveal { grid-template-columns: auto minmax(0, 480px) auto; grid-template-areas: "card who board"; column-gap: clamp(24px, 3vw, 48px); }
.em-recap-card { grid-area: board; display: grid; gap: 10px; align-content: center; }
.em-recap-card .qz-kicker { margin: 0; }
.em-recap-card .em-card { transform: none; padding: 16px 18px 18px 8px; gap: 8px; }
.em-recap-card .em-row { --t: clamp(40px, min(4.8vw, calc((100dvh - var(--top-h) - 300px) / 5.4)), 78px); --gap: 8px; }
.em-recap-card .em-plate .em-face { padding: 6px 10px; gap: 4px; }
.wt-reveal.in .em-recap-card { animation: wtIn .5s ease both; animation-delay: 1.5s; }
.wt-reveal.still .em-recap-card { animation: none; }
@media (max-width: 1150px) {
  .px-zone .wt-reveal.overlay.em-reveal { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "card who" "card board"; row-gap: 16px; overflow-y: auto; }
  .em-recap-card { justify-self: start; }
}
@media (max-width: 700px) { .px-zone .wt-reveal.overlay.em-reveal { grid-template-columns: 120px minmax(0, 1fr); grid-template-areas: "card who" "board board"; } }
@media (prefers-reduced-motion: reduce) { .wt-reveal.in .em-recap-card { animation: none; } }
/* carte des indices de la fin : mêmes proportions que pendant la partie (espacements proportionnels à la taille des tuiles) */
.em-recap-card { --rt: clamp(44px, min(5vw, calc((100dvh - var(--top-h) - 300px) / 5.6)), 82px); }
.em-recap-card .em-row { --t: var(--rt); --gap: calc(var(--rt) * .15); }
.em-recap-card .em-card { gap: calc(var(--rt) * .17); padding: calc(var(--rt) * .26) calc(var(--rt) * .3) calc(var(--rt) * .3) calc(var(--rt) * .14); }
.em-recap-card .em-plate .em-face { padding: calc(var(--rt) * .1) calc(var(--rt) * .18); gap: calc(var(--rt) * .07); }
.em-recap-card .em-word i.on { border-bottom-color: color-mix(in srgb, var(--accent) 60%, transparent); }
/* Devine l'anime, détail d'une partie du jour : jaquette | texte | carte des indices */
.px-detail.em-detail { grid-template-columns: 200px minmax(0, 1fr) auto; gap: 24px; }
.px-detail.em-detail .wt-card { width: 200px; }
.px-detail.em-detail .em-recap-card { --rt: clamp(40px, 4vw, 62px); }
.modal.px-detail-modal:has(.em-detail) { width: min(1080px, 100%); max-width: none; }
@media (max-width: 900px) { .px-detail.em-detail { grid-template-columns: 130px minmax(0, 1fr); } .px-detail.em-detail .wt-card { width: 130px; } .px-detail.em-detail .em-recap-card { grid-column: 1 / -1; justify-self: center; } }
.px-detail.em-detail { grid-template-areas: "card body board"; align-items: center; }
.px-detail.em-detail .px-detail-b { grid-area: body; }
@media (max-width: 900px) { .px-detail.em-detail { grid-template-areas: "card body" "board board"; } }

/* ---------- Amis & petites conversations ---------- */
.friends-page { max-width: 1280px; margin-inline: auto; }
.friends-layout { display: grid; grid-template-columns: minmax(280px, 350px) minmax(0, 1fr); min-height: min(680px, calc(100vh - var(--top-h) - 155px)); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--surface); }
.friends-side { min-width: 0; border-right: 1px solid var(--line); background: color-mix(in srgb, var(--surface) 82%, var(--bg)); overflow: auto; }
.friends-side section { padding: 18px; border-top: 1px solid var(--line); }
.friends-side h2 { display: flex; align-items: baseline; gap: 8px; margin-bottom: 10px; font-size: 13px; color: var(--muted); text-transform: uppercase; letter-spacing: .1em; }
.friends-side h2 small { color: var(--accent); font-size: 11px; }
.friend-search { padding: 18px; }
.friend-search > label { display: block; margin-bottom: 8px; font-size: 13px; font-weight: 600; }
.friend-search > div:first-of-type { display: flex; gap: 8px; }
.friend-search .input { min-width: 0; }
.friend-search .btn { padding-inline: 12px; }
#friend-suggestions { display: grid; gap: 3px; margin-top: 6px; }
#friend-suggestions > button { display: flex; align-items: center; gap: 9px; width: 100%; padding: 7px; border: 0; border-radius: 8px; color: var(--text); background: transparent; text-align: left; }
#friend-suggestions > button:hover { background: var(--surface-2); }
#friend-suggestions > small { padding: 8px; color: var(--muted); }
.social-avatar { width: 40px; height: 40px; display: grid; place-items: center; flex: none; overflow: hidden; border: 1px solid var(--line-2); border-radius: 50%; color: var(--muted); background: var(--surface-2); }
.social-avatar img { width: 100%; height: 100%; object-fit: contain; }
.social-avatar .i { width: 18px; height: 18px; }
.social-avatar.system { border: 0; background: transparent; overflow: visible; }
.social-avatar.system .seal { width: 100%; height: 100%; border-radius: 50%; font-size: 18px; transform: rotate(-4deg); }
.friend-row, .friend-pending { display: flex; align-items: center; gap: 11px; min-width: 0; padding: 9px; border-radius: 9px; }
.friend-row:hover, .friend-row.on { background: var(--surface-2); }
.friend-row.on { box-shadow: inset 2px 0 var(--accent); }
.friend-row > span:not(.social-avatar), .friend-pending > span { min-width: 0; flex: 1; }
.friend-row b, .friend-row small, .friend-pending b, .friend-pending small { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.friend-row b, .friend-pending b { font-size: 14px; }
.friend-row small, .friend-pending small { color: var(--muted); font-size: 12px; }
.friend-row > i { min-width: 20px; height: 20px; display: grid; place-items: center; padding: 0 5px; border-radius: 999px; background: var(--accent); color: var(--accent-ink); font: 700 11px var(--mono); font-style: normal; }
.friend-request { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 0; }
.friend-request > a { display: flex; align-items: center; gap: 10px; min-width: 0; }
.friend-request > div { display: flex; gap: 5px; }
.friend-request .icon-btn:first-child { color: var(--green); }
.friend-request .icon-btn.danger { color: var(--red); }
.friend-outgoing .link { font-size: 10px; }
.friends-empty { padding: 14px 9px; color: var(--muted); }
.friends-empty p { margin: 0 0 2px; }
.friends-empty small { color: var(--faint); }
.conversation { display: grid; grid-template-rows: auto minmax(280px, 1fr) auto; min-width: 0; background: var(--bg-2); }
.conversation-head { display: flex; align-items: center; gap: 12px; min-height: 70px; padding: 12px 18px; border-bottom: 1px solid var(--line); background: var(--surface); }
.conversation-head > div { min-width: 0; flex: 1; }
.conversation-head b, .conversation-head a { display: block; }
.conversation-head a { width: max-content; color: var(--muted); font-size: 12px; }
.conversation-head a:hover { color: var(--accent); }
.messages { display: flex; flex-direction: column; gap: 7px; padding: 22px; overflow-y: auto; scroll-behavior: smooth; }
.message { align-self: flex-start; max-width: min(72%, 620px); }
.message.mine { align-self: flex-end; text-align: right; }
.message p { margin: 0; padding: 9px 13px; border: 1px solid var(--line-2); border-radius: 5px 14px 14px 14px; background: var(--surface-2); text-align: left; white-space: pre-wrap; overflow-wrap: anywhere; }
.message.mine p { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); border-radius: 14px 5px 14px 14px; background: color-mix(in srgb, var(--accent) 15%, var(--surface-2)); }
.message small { display: block; margin: 3px 4px 0; color: var(--faint); font-size: 10px; }
.messages-empty { margin: auto; color: var(--muted); text-align: center; }
.message-form { display: flex; align-items: flex-end; gap: 10px; padding: 14px 18px; border-top: 1px solid var(--line); background: var(--surface); }
.message-form textarea { min-height: 42px; max-height: 130px; resize: vertical; padding-block: 9px; line-height: 1.45; }
.conversation-empty { display: grid; place-items: center; align-content: center; grid-row: 1 / -1; padding: 40px; color: var(--muted); text-align: center; }
.conversation-empty .i { width: 42px; height: 42px; margin-bottom: 14px; color: var(--faint); }
.conversation-empty h2 { color: var(--text); }
.conversation-empty p { margin: 7px 0 0; }

@media (max-width: 800px) {
  .friends-layout { grid-template-columns: 1fr; min-height: 0; overflow: visible; }
  .friends-side { border-right: 0; border-bottom: 1px solid var(--line); max-height: none; }
  .conversation { min-height: 540px; }
  .message { max-width: 86%; }
}
@media (max-width: 520px) {
  .friends-page { padding-inline: 10px; }
  .friend-search > div:first-of-type { flex-direction: column; }
  .friend-search .btn { width: 100%; }
  .conversation-head, .message-form { padding-inline: 12px; }
  .messages { padding: 16px 12px; }
  .message-form .btn span { display: none; }
}

/* Messagerie flottante, disponible sur toutes les pages */
.social-dock { position: fixed; z-index: 75; right: 20px; bottom: 20px; display: grid; justify-items: end; gap: 10px; pointer-events: none; }
.social-dock > * { pointer-events: auto; }
.social-launch { position: relative; min-width: 132px; height: 48px; display: flex; align-items: center; justify-content: center; gap: 9px; padding: 0 16px; border: 1px solid var(--line-2); border-radius: 12px; background: var(--surface-2); color: var(--text); box-shadow: 0 16px 38px -18px rgba(0, 0, 0, .9); font-weight: 600; }
.social-launch:hover, .social-launch[aria-expanded="true"] { border-color: color-mix(in srgb, var(--accent) 65%, var(--line)); background: var(--surface-3); }
.social-launch > .i { width: 20px; height: 20px; color: var(--accent); }
.social-launch .social-avatar { width: 32px; height: 32px; border-color: var(--accent); }
.social-launch > i { position: absolute; top: -7px; right: -7px; min-width: 22px; height: 22px; display: grid; place-items: center; padding: 0 5px; border: 2px solid var(--bg); border-radius: 999px; background: var(--accent); color: var(--accent-ink); font: 700 10px var(--mono); font-style: normal; }
.social-launch > i[hidden] { display: none; }
.social-panel { width: 360px; height: min(570px, calc(100vh - 100px)); overflow: hidden; border: 1px solid var(--line-2); border-radius: 14px; background: var(--bg-2); box-shadow: 0 28px 70px -22px rgba(0, 0, 0, .95); }
.social-panel[hidden] { display: none; }
#social-panel-body { height: 100%; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
#social-panel-body > .loader { margin: auto; }
.dock-head { min-height: 58px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-bottom: 1px solid var(--line); background: var(--surface); }
.dock-head > div { display: flex; align-items: center; gap: 9px; }
.dock-head > div > .i { color: var(--accent); }
.dock-chat-head { justify-content: flex-start; }
.dock-chat-head > div { display: block; flex: 1; min-width: 0; }
.dock-chat-head > div b, .dock-chat-head > div small { display: block; }
.dock-chat-head > div small { color: var(--muted); font-size: 11px; }
.dock-chat-head > .social-avatar { width: 36px; height: 36px; }
.dock-chat-user { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; color: inherit; }
.dock-chat-user .social-avatar { width: 36px; height: 36px; }
.dock-chat-user b, .dock-chat-user small { display: block; }
.dock-chat-user small { color: var(--muted); font-size: 11px; }
.dock-chat-user:hover small { color: var(--accent); }
.dock-home { grid-row: 2 / 4; overflow-y: auto; }
.dock-home section { padding: 14px 12px; border-top: 1px solid var(--line); }
.dock-home h3 { margin: 0 0 8px; color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .11em; }
.dock-add { padding: 12px; }
.dock-add > div:first-child { display: flex; gap: 7px; }
.dock-add .input { min-width: 0; height: 38px; }
#dock-suggestions { display: grid; margin-top: 5px; }
.dock-suggestion { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 9px; padding: 6px; border-radius: 8px; }
.dock-suggestion:hover { background: var(--surface-2); }
.dock-suggestion > b { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 13px; }
.dock-suggestion .btn { height: 28px; padding-inline: 9px; font-size: 11px; }
.dock-suggestion .suggest-state { color: var(--muted); font-size: 10px; white-space: nowrap; }
#dock-suggestions .social-avatar { width: 32px; height: 32px; }
#dock-suggestions > small { padding: 8px; color: var(--muted); }
.dock-friend { width: 100%; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 9px 8px; border: 0; border-radius: 9px; background: none; text-align: left; }
.dock-friend:hover { background: var(--surface-2); }
.dock-friend > span:not(.social-avatar) { min-width: 0; }
.dock-friend b, .dock-friend small { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.dock-friend b { display: inline; font-size: 14px; }
.dock-friend em { margin-left: 7px; padding: 2px 5px; border-radius: 4px; background: color-mix(in srgb, var(--accent) 15%, transparent); color: var(--accent); font-size: 9px; font-style: normal; text-transform: uppercase; letter-spacing: .06em; }
.dock-friend small { margin-top: 2px; color: var(--muted); font-size: 11px; }
.dock-friend > i { min-width: 20px; height: 20px; display: grid; place-items: center; padding: 0 5px; border-radius: 999px; background: var(--accent); color: var(--accent-ink); font: 700 10px var(--mono); font-style: normal; }
.dock-request { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 7px; padding: 6px; }
.dock-request .social-avatar { width: 34px; height: 34px; }
.dock-request .icon-btn:first-of-type { color: var(--green); }
.dock-request .icon-btn.danger { color: var(--red); }
.dock-messages { display: flex; flex-direction: column; gap: 7px; min-height: 0; padding: 14px 12px; overflow-y: auto; }
.dock-messages .message { max-width: 82%; font-size: 13px; }
.dock-messages .message p { padding: 8px 11px; }
.dock-message-form { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: end; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--line); background: var(--surface); }
.dock-message-form textarea { min-height: 38px; max-height: 100px; padding: 7px 10px; resize: none; line-height: 1.45; }
.dock-compose { position: relative; }
.dock-propose { color: var(--muted); }
.dock-propose:hover, .dock-propose.on { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.dock-pick { position: absolute; left: 0; right: 0; bottom: 100%; display: flex; flex-direction: column; gap: 8px; max-height: 340px; padding: 10px 12px; border-top: 1px solid var(--line-2); background: var(--bg-2); box-shadow: 0 -18px 30px -18px rgba(0, 0, 0, .8); }
.dock-pick[hidden] { display: none; }
.dock-pick-head { display: flex; align-items: center; justify-content: space-between; font-size: 13px; }
.dock-pick .input { height: 36px; font-size: 13px; }
.dock-pick-list { display: flex; flex-direction: column; gap: 2px; min-height: 0; overflow-y: auto; scrollbar-width: thin; }
.dock-pick-label { padding: 4px 2px; color: var(--muted); font-size: 11px; }
.dock-pick-item { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 5px 6px; border: 0; border-radius: 8px; background: none; color: var(--text); text-align: left; cursor: pointer; }
.dock-pick-item:hover { background: var(--surface-2); }
.dock-pick-item img { width: 30px; height: 42px; object-fit: cover; border-radius: 4px; background: var(--surface-2); }
.dock-pick-item b, .dock-pick-item small { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.dock-pick-item b { font-size: 13px; }
.dock-pick-item small { color: var(--muted); font-size: 11px; }
.dock-pick-item > .i { width: 14px; height: 14px; color: var(--faint); }
.dock-pick-item:hover > .i { color: var(--accent); }
.message.has-anime { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.message.mine.has-anime { align-items: flex-end; }
.msg-anime { display: grid; grid-template-columns: 54px minmax(0, 1fr); align-items: center; gap: 11px; width: 240px; max-width: 100%; padding: 7px; border: 1px solid color-mix(in srgb, var(--c, var(--accent)) 40%, var(--line-2)); border-radius: 12px; background: color-mix(in srgb, var(--c, var(--accent)) 10%, var(--surface-2)); color: var(--text); text-align: left; transition: transform .15s, border-color .15s; }
.msg-anime:hover { transform: translateY(-1px); border-color: var(--c, var(--accent)); }
.msg-anime img { width: 54px; height: 76px; object-fit: cover; border-radius: 6px; box-shadow: 0 6px 14px -8px rgba(0, 0, 0, .8); }
.msg-anime span { min-width: 0; display: grid; gap: 2px; }
.msg-anime small { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); font: 500 9.5px var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.msg-anime small .i { width: 10px; height: 10px; color: var(--accent); }
.msg-anime b { font-size: 13.5px; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.msg-anime em { color: var(--muted); font-size: 11px; font-style: normal; }

@media (max-width: 900px) {
  .social-dock { right: 10px; bottom: calc(72px + env(safe-area-inset-bottom)); }
  .social-panel { width: min(360px, calc(100vw - 20px)); height: min(560px, calc(100vh - 150px)); }
  .social-launch { min-width: 48px; width: 48px; padding: 0; border-radius: 50%; }
  .social-launch > span { display: none; }
}
/* défilement au bord : pas d'aimantage (il ramenait la rangée en place à chaque petit pas) */
.px-zone .px-hist-list { scroll-snap-type: none; scroll-behavior: auto; }
.px-detail.em-detail .em-recap-card { margin-top: 22px; }
.mg-page .quiz-zone.px-zone .px-hist-list { scroll-snap-type: none; }

/* parties du jour : les premiers emojis en petites tuiles (comme sur le plateau), posées en bas de la jaquette */
.em-hcard .px-hcard-img { container-type: inline-size; }
.em-hc-emo.em-row { --t: min(30px, 19cqi); --gap: max(3px, 2.2cqi); position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: center; padding: 26px 6px max(7px, 5cqi); letter-spacing: 0; font-size: inherit; background: linear-gradient(transparent, rgba(8, 7, 6, 0.85) 70%); }
.em-hc-emo .em-tile-in { transition: transform .35s cubic-bezier(.2, 1.4, .4, 1); transition-delay: calc(var(--k, 0) * .05s); }
.em-hc-emo .em-face { border-radius: calc(var(--t) * .18); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75), inset 0 -2px 0 rgba(120, 90, 50, 0.16), 0 2px 0 #bba684, 0 3px 0 #7d6a48, 0 6px 8px -3px rgba(0, 0, 0, 0.9); }
.em-hcard:hover .em-hc-emo .em-tile-in { transform: translateY(-4px) rotateX(0deg) rotateY(0deg); }
.px-setup-zone .em-hc-emo.em-row { display: flex; padding-top: 14px; }
/* vignettes : tuiles plus petites, translucides et floutées au lieu de l'ivoire ; elles s'éclairent au survol */
.em-hc-emo.em-row { --t: min(24px, 15cqi); --gap: max(3px, 1.8cqi); padding: 22px 6px max(6px, 4cqi); background: linear-gradient(transparent, rgba(8, 7, 6, 0.55) 75%); }
.em-hc-emo .em-tile { perspective: none; }
.em-hc-emo .em-tile-in { transform-style: flat; }
.em-hc-emo .em-back { display: none; }
.em-hc-emo .em-face { backface-visibility: visible; -webkit-backface-visibility: visible; background: rgba(28, 25, 21, 0.38); -webkit-backdrop-filter: blur(6px) saturate(1.2); backdrop-filter: blur(6px) saturate(1.2); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 4px 10px -4px rgba(0, 0, 0, 0.7); font-size: calc(var(--t) * .6); transition: background .25s, box-shadow .25s; }
.em-hcard:hover .em-hc-emo .em-face { background: rgba(255, 248, 235, 0.16); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 0 12px -2px rgba(255, 236, 200, 0.35), 0 4px 10px -4px rgba(0, 0, 0, 0.7); }
.px-setup-zone .em-hc-emo.em-row { padding-top: 12px; }
/* étiquette de niveau des vignettes plus discrète */
.em-hcard .wt-lvl-tag { padding: 1px 7px; font-size: 9px; letter-spacing: .08em; margin-top: 3px; }
/* carte des indices (fin de partie, détail) : plus aérée — l'épaisseur des tuiles (7 px sous la face) mangeait l'écart entre rangées */
.em-recap-card .em-row { --gap: calc(var(--rt) * .22); }
.em-recap-card .em-card { gap: calc(var(--rt) * .3 + 6px); padding: calc(var(--rt) * .36) calc(var(--rt) * .4) calc(var(--rt) * .44) calc(var(--rt) * .2); }
.px-detail.em-detail .em-recap-card { --rt: clamp(44px, 4.8vw, 70px); }
.px-detail.em-detail { gap: 28px; }

/* Devine l'anime, parties du jour : cartes distribuées à l'arrivée, inclinaison 3D + reflet au survol,
   jaquette qui zoome, tuiles qui sautent en vague, reflet qui passe de temps en temps sur les parties gagnées */
.em-hcard { animation: emDeal .6s cubic-bezier(.2, 1.25, .4, 1) both; animation-delay: calc(var(--i, 0) * .07s); }
@keyframes emDeal { from { opacity: 0; transform: translateY(26px) rotate(-5deg) scale(.92); } }
.em-hcard .px-hcard-img { overflow: hidden; transform: perspective(700px) rotateX(0deg) rotateY(0deg); transition: transform .5s cubic-bezier(.2, 1, .3, 1), box-shadow .3s; will-change: transform; }
.em-hcard .px-hcard-img.tilting { transform: perspective(700px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(-6px) scale(1.03); transition: transform .08s linear, box-shadow .3s; }
.em-hcard:hover .px-hcard-img { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.16), 0 24px 30px -16px rgba(0, 0, 0, 0.95); }
.em-hcard.won:hover .px-hcard-img { box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--green) 70%, transparent), 0 24px 30px -16px rgba(0, 0, 0, 0.95), 0 0 24px -8px color-mix(in srgb, var(--green) 60%, transparent); }
.em-hcard:not(.won):hover .px-hcard-img { box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--red) 55%, transparent), 0 24px 30px -16px rgba(0, 0, 0, 0.95); }
.em-hcard .px-hcard-img img { transition: transform .8s cubic-bezier(.2, .8, .2, 1), filter .3s; }
.em-hcard:hover .px-hcard-img img { transform: scale(1.08); }
.em-hcard .px-hcard-img.tilt3d::before { z-index: 3; }
/* tuiles : petit saut en vague au survol */
.em-hcard:hover .em-hc-emo .em-tile-in { animation: emHop .5s cubic-bezier(.2, 1.6, .4, 1) both; animation-delay: calc(var(--k, 0) * .07s); }
@keyframes emHop { 0% { transform: translateY(0); } 45% { transform: translateY(-7px) rotate(-6deg); } 100% { transform: translateY(-3px); } }
/* parties gagnées : reflet qui traverse la jaquette toutes les quelques secondes */
.em-hcard.won .px-hcard-img::after { content: ""; position: absolute; top: -20%; bottom: -20%; left: 0; width: 40%; z-index: 2; pointer-events: none; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.22), transparent); transform: translateX(-180%) skewX(-18deg); animation: emSheen 5.5s ease-in-out infinite; animation-delay: calc(1.2s + var(--i, 0) * .45s); }
@keyframes emSheen { 0%, 70% { transform: translateX(-180%) skewX(-18deg); } 100% { transform: translateX(380%) skewX(-18deg); } }
@media (prefers-reduced-motion: reduce) { .em-hcard, .em-hcard:hover .em-hc-emo .em-tile-in, .em-hcard.won .px-hcard-img::after { animation: none; } .em-hcard:hover .px-hcard-img img { transform: none; } }
/* carte des indices (fin, détail) : un peu plus serrée ; fiche plus basse (sans la forme du titre) mais texte lisible */
.em-recap-card .em-row { --gap: calc(var(--rt) * .16); }
.em-recap-card .em-card { gap: calc(var(--rt) * .2 + 4px); padding: calc(var(--rt) * .3) calc(var(--rt) * .32) calc(var(--rt) * .36) calc(var(--rt) * .16); }
.em-recap-card .em-plate { height: calc(var(--rt) * 1.28); }
.em-recap-card .em-plate .em-face { padding: 8px 14px; gap: 6px; }
.em-recap-card .em-facts { font-size: 13px; line-height: 1.35; }
.em-recap-card .em-hero small { font-size: 9.5px; }
.em-recap-card .em-hero b { font-size: 14px; }
.em-recap-card .em-facts > * { white-space: normal; overflow: visible; }
.em-recap-card .em-plate { height: calc(var(--rt) * 1.42); }

/* Devine l'anime : tour complet d'une vignette ou d'une tuile au hasard (vie dans la page) */
.em-hcard .px-hcard-img.em-spin { animation: emCardSpin 1.2s cubic-bezier(.45, 0, .2, 1); }
@keyframes emCardSpin {
  0% { transform: perspective(700px) rotateX(0deg) rotateY(0deg); }
  50% { transform: perspective(700px) rotateX(0deg) rotateY(180deg) translateY(-8px) scale(1.06); }
  100% { transform: perspective(700px) rotateX(0deg) rotateY(360deg); }
}
.em-lvl-art .em-tile.em-spin .em-tile-in { animation: emTileSpin 1s cubic-bezier(.45, 0, .2, 1); }
@keyframes emTileSpin {
  0% { transform: translateY(0) rotateX(0deg) rotateY(0deg); }
  50% { transform: translateY(-10px) rotateX(0deg) rotateY(180deg); }
  100% { transform: translateY(0) rotateX(0deg) rotateY(360deg); }
}
/* tour au hasard : aussi les tuiles du plateau et de la carte des indices (le dos 絵 apparaît au passage) */
.em-row.on .em-tile.em-spin .em-tile-in { animation: emTileSpin 1s cubic-bezier(.45, 0, .2, 1); }

/* Profil : composition personnelle du bandeau de chibis. */
.pf-id-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 18px; }
.pf-id-actions .link { display: inline-flex; align-items: center; gap: 6px; }
.pf-id-actions .i { width: 14px; height: 14px; }
.pf-perch-open small { display: inline-flex; align-items: center; min-height: 20px; margin-left: 2px; padding: 0 7px; border-radius: 999px; background: color-mix(in srgb, var(--accent) 13%, var(--surface)); color: var(--accent); font-size: 10.5px; font-weight: 650; }
.modal.perch-modal { width: min(1120px, 96vw); }
.perch-pick { padding: 22px 26px 20px; }
.perch-pick-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin: 0 42px 18px 0; }
.perch-pick-head h2 { margin: 0 0 4px; font: var(--display-w) calc(28px * var(--display-scale)) / 1.08 var(--display); letter-spacing: var(--display-ls); }
.perch-pick-head p { margin: 0; font-size: 13px; }
.perch-pick-count { flex: none; display: flex; align-items: baseline; gap: 7px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.perch-pick-count b { font: var(--display-w) calc(24px * var(--display-scale)) / 1 var(--display); color: var(--accent); }
.perch-pick-count span { color: var(--muted); font-size: 12px; }
.perch-pick-tools { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.perch-pick-tools i { width: 1px; height: 13px; background: var(--line-2); }
.perch-pick-tools .link { font-size: 12px; }
.perch-pick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(135px, 1fr)); gap: 9px; max-height: min(540px, calc(100dvh - 285px)); padding: 3px 5px 5px 3px; overflow-y: auto; }
.perch-opt { position: relative; display: grid; grid-template-rows: 104px auto; gap: 6px; min-width: 0; padding: 10px 9px 9px; border: 1px solid var(--line); border-radius: 11px; overflow: hidden; background: var(--surface); color: var(--text); text-align: left; transition: border-color .18s, background .18s, transform .2s cubic-bezier(.2,.8,.2,1), opacity .18s; }
.perch-opt:hover { border-color: var(--line-2); transform: translateY(-2px); }
.perch-opt img { width: 100%; height: 104px; object-fit: contain; object-position: 50% 100%; filter: grayscale(.85) brightness(.54); opacity: .62; transition: filter .2s, opacity .2s, transform .25s cubic-bezier(.2,1.2,.3,1); }
.perch-opt:hover img { transform: translateY(-2px); }
.perch-opt > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.perch-opt small { color: var(--faint); font: 500 9.5px var(--mono); letter-spacing: .04em; }
.perch-opt b { overflow: hidden; font-size: 12px; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
.perch-opt-check { position: absolute; z-index: 2; right: 8px; top: 8px; display: grid; place-items: center; width: 24px; height: 24px; border: 1px solid var(--line-2); border-radius: 50%; background: rgba(11,10,8,.82); color: transparent; transition: color .18s, border-color .18s, background .18s, transform .2s; }
.perch-opt-check .i { width: 13px; height: 13px; }
.perch-opt.on { border-color: color-mix(in srgb, var(--accent) 62%, var(--line)); background: color-mix(in srgb, var(--accent) 7%, var(--surface)); }
.perch-opt.on img { filter: drop-shadow(0 6px 8px rgba(0,0,0,.52)); opacity: 1; }
.perch-opt.on .perch-opt-check { border-color: var(--accent); background: var(--accent); color: var(--accent-ink); transform: scale(1.06); }
.perch-pick-foot { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.perch-pick-foot > span { max-width: 560px; }
.perch-pick-empty { display: grid; justify-items: start; gap: 12px; min-height: 220px; align-content: center; padding: 24px; border: 1px dashed var(--line-2); border-radius: 12px; }
.perch-pick-empty p { margin: 0; }
@media (max-width: 650px) {
  .perch-pick { padding: 18px 14px 14px; }
  .perch-pick-head { align-items: flex-start; margin-right: 38px; }
  .perch-pick-count { padding: 7px 10px; }
  .perch-pick-count span { display: none; }
  .perch-pick-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); max-height: calc(100dvh - 300px); }
  .perch-opt { grid-template-rows: 88px auto; }
  .perch-opt img { height: 88px; }
  .perch-pick-foot { align-items: stretch; flex-direction: column; }
  .perch-pick-foot .btn { width: 100%; }
}


/* Pièce maîtresse : titre lisible, sans étirement ni énorme sur-échelle pendant son entrée. */
.reveal.rv-master .rv-head .rv-tier.pm { width: min(90vw, 820px); transform: none; }
.reveal.rv-master .rv-head .rv-tier.pm b { font: 900 calc(clamp(32px, 4.8vw, 62px) * var(--display-scale)) / 1 var(--font); font-style: normal; letter-spacing: -.045em; white-space: nowrap; }
.reveal.rv-master .rv-head .rv-tier.pm.slam { animation: pmTierIn .48s cubic-bezier(.2, 1.25, .35, 1) forwards; }
@keyframes pmTierIn { from { opacity: 0; transform: translateY(-10px) scale(1.16); } to { opacity: 1; transform: none; } }

/* --- Plus ou moins (2026-10-07) : menu des univers, duel enchaîné, fin de série --------------------------- */
/* vignette du hub (reprise du dépôt git) : duel Luffy contre Zoro ; au survol, Zoro sort de l'ombre et sa prime s'affiche */
.gc-pm { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr 1fr; }
.gc-pm-side { position: relative; overflow: hidden; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 18px; }
.gc-pm-side.l { background: radial-gradient(120% 90% at 30% 100%, rgba(255, 90, 54, .45), rgba(255, 90, 54, .06) 60%, transparent), #1a100c; }
.gc-pm-side.r { background: radial-gradient(120% 90% at 70% 100%, rgba(120, 170, 120, .38), rgba(80, 140, 110, .05) 60%, transparent), #0c1310; }
.gc-pm-side img { position: relative; z-index: 1; height: 130px; width: auto; max-width: 82%; object-fit: contain; object-position: 50% 100%; filter: none; transition: transform .45s cubic-bezier(.2, .8, .2, 1), filter .45s; }
/* la coupe plate du buste est à 96 % de la hauteur de Luffy et à 91 % de celle de Zoro : on descend
   chaque image du reste pour que les deux coupes tombent sur la même ligne */
.gc-pm-side.l img { --dy: 3.7%; max-width: 72%; transform-origin: 50% 96%; transform: translate(var(--dx, 0), var(--dy)); }
.gc-pm-side.r img { --dy: 8.8%; transform-origin: 50% 91%; transform: translate(var(--dx, 0), var(--dy)) scaleX(-1); filter: brightness(0) drop-shadow(0 0 1px rgba(147, 201, 138, .9)); }
.mg-card:hover .gc-pm-side.l img { transform: translate(var(--dx, 0), var(--dy)) scale(1.06); }
.mg-card:hover .gc-pm-side.r img { transform: translate(var(--dx, 0), var(--dy)) scaleX(-1) scale(1.06); filter: none; transition: transform .45s cubic-bezier(.2, .8, .2, 1), filter .2s; }
.gc-pm-chip { position: absolute; z-index: 2; top: 12px; display: flex; flex-direction: column; gap: 1px; padding: 5px 9px; border-radius: 8px; background: rgba(0, 0, 0, .6); border: 1px solid rgba(255, 255, 255, .1); font: var(--display-w) 13px / 1.1 var(--display); color: var(--amber); white-space: nowrap; font-variant-numeric: tabular-nums; }
.gc-pm-chip small { font: 600 9px var(--font); letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .7); }
.gc-pm-side.l .gc-pm-chip { left: 10px; }
.gc-pm-side.r .gc-pm-chip { right: 10px; text-align: right; color: var(--green); }
.gc-pm-chip b { font: inherit; }
.gc-pm-chip .a { display: none; }
.mg-card:hover .gc-pm-chip .q { display: none; }
.mg-card:hover .gc-pm-chip .a { display: inline; }
.gc-pm-mid { position: absolute; z-index: 3; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 6px; }
.gc-pm-sign { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--line-2); background: var(--bg); transition: transform .3s, background .2s, color .2s, border-color .2s, box-shadow .2s, opacity .2s; }
.gc-pm-sign svg { display: block; width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.gc-pm-vs span { display: block; transform: translate(-.03em, .04em); }
.gc-pm-sign.up { color: var(--green); } .gc-pm-sign.down { color: var(--red); }
.gc-pm-vs { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--accent); color: var(--accent-ink, #160c08); font: var(--display-w) 16px / 1 var(--display); box-shadow: 0 0 0 4px var(--bg); transition: transform .3s; }
.mg-card:hover .gc-pm-vs { transform: scale(1.08) rotate(-6deg); }
/* au survol, « moins » est choisi comme en partie : la flèche du bas s'allume, puis Zoro est dévoilé */
.mg-card:hover .gc-pm-sign.up { opacity: .35; }
.mg-card:hover .gc-pm-sign.down { background: color-mix(in srgb, var(--red) 22%, var(--bg)); border-color: color-mix(in srgb, var(--red) 70%, transparent); transform: translateY(2px); }
.gc-pm-blur { display: flex; gap: 20px; align-items: flex-end; }
.gc-pm-blur img { height: 140px; }

/* page */
.hl-zone { position: relative; overflow: hidden; isolation: isolate; }
.hl-zone::after { content: ""; position: absolute; inset: 0; z-index: 20; pointer-events: none; opacity: 0; box-shadow: inset 0 0 120px rgba(236, 111, 93, .55); }
.hl-zone.flash::after { animation: hlFlash .9s ease-out; }
@keyframes hlFlash { 15% { opacity: 1; } to { opacity: 0; } }

/* menu : une affiche par univers */
.hl-setup { display: grid; justify-items: center; text-align: center; padding: 4px 0 2px; }
.hl-setup h2 { margin: 4px 0 6px; font: var(--display-w) calc(clamp(30px, 3.2vw, 44px) * var(--display-scale)) / 1.05 var(--display); letter-spacing: var(--display-ls); }
.hl-setup > p { margin: 0 0 22px; font-size: 14px; }
.hl-unis { display: grid; grid-template-columns: repeat(auto-fit, minmax(108px, 1fr)); gap: 12px; width: 100%; perspective: 900px; }
.hl-u { --rx: 0deg; --ry: 0deg; position: relative; aspect-ratio: 3 / 4; padding: 0; overflow: hidden; border: 0; border-radius: 12px; background: var(--bg-2); color: #fff; text-align: left; cursor: pointer;
  box-shadow: 0 0 0 1px var(--line), 0 14px 26px -18px rgba(0, 0, 0, .9); transform: rotateX(var(--rx)) rotateY(var(--ry)); transform-style: preserve-3d;
  transition: transform .25s cubic-bezier(.2, .8, .2, 1), box-shadow .25s; animation: hlCardIn .55s cubic-bezier(.2, 1.1, .3, 1) both; animation-delay: calc(var(--i) * .05s); }
@keyframes hlCardIn { from { opacity: 0; transform: translateY(26px) rotateX(18deg) scale(.94); } }
.hl-u-art { position: absolute; inset: 0; }
.hl-u-art img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.75) brightness(.72); transform: scale(1.02); transition: filter .35s, transform .6s cubic-bezier(.2, .8, .2, 1); }
.hl-u::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(to top, rgba(8, 7, 6, .96) 8%, rgba(8, 7, 6, .55) 38%, transparent 64%); }
.hl-u-glare { position: absolute; inset: 0; z-index: 2; opacity: 0; pointer-events: none; background: radial-gradient(circle at var(--gx, 50%) var(--gy, 30%), rgba(255, 255, 255, .22), transparent 55%); transition: opacity .25s; }
.hl-u-txt { position: absolute; z-index: 3; left: 11px; right: 11px; bottom: 10px; display: grid; gap: 2px; }
.hl-u-txt small { font: 700 9.5px var(--font); letter-spacing: .14em; text-transform: uppercase; color: var(--amber); }
.hl-u-txt b { font: var(--display-w) calc(17px * var(--display-scale)) / 1.05 var(--display); letter-spacing: var(--display-ls); }
.hl-u-n { position: absolute; z-index: 3; top: 8px; left: 8px; padding: 2px 7px; border-radius: 999px; background: rgba(0, 0, 0, .6); color: rgba(255, 255, 255, .78); font: 600 10px var(--font); font-variant-numeric: tabular-nums; opacity: 0; transform: translateY(-4px); transition: opacity .2s, transform .2s; }
.hl-u-ok { position: absolute; z-index: 3; top: 8px; right: 8px; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--accent); color: var(--accent-ink, #160c08); opacity: 0; transform: scale(.4); transition: opacity .2s, transform .3s cubic-bezier(.2, 1.6, .4, 1); }
.hl-u-ok .i { width: 13px; height: 13px; }
.hl-u:hover { box-shadow: 0 0 0 1px var(--line-2), 0 22px 34px -18px rgba(0, 0, 0, .95); }
.hl-u:hover .hl-u-art img { filter: saturate(1) brightness(.9); transform: scale(1.08); }
.hl-u:hover .hl-u-glare { opacity: 1; }
.hl-u:hover .hl-u-n { opacity: 1; transform: none; }
.hl-u.on { box-shadow: 0 0 0 2px var(--accent), 0 22px 40px -16px color-mix(in srgb, var(--accent) 55%, transparent); }
.hl-u.on .hl-u-art img { filter: none; }
.hl-u.on .hl-u-ok { opacity: 1; transform: none; }
.hl-u.pop { animation: hlPop .4s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes hlPop { 40% { scale: 1.06; } }
/* « Tous les animes » : un grand point d'interrogation */
.hl-u-q { display: grid; place-items: center; width: 100%; height: 100%; font: var(--display-w) 92px / 1 var(--display); color: var(--accent);
  background: radial-gradient(70% 60% at 50% 40%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 70%), repeating-linear-gradient(135deg, transparent 0 10px, rgba(255, 255, 255, .025) 10px 11px), #14110e; text-shadow: 0 10px 30px color-mix(in srgb, var(--accent) 60%, transparent); transition: transform .5s cubic-bezier(.2, 1.4, .4, 1); }
.hl-u.all:hover .hl-u-q, .hl-u.all.on .hl-u-q { transform: rotate(-8deg) scale(1.08); }
.hl-go { margin-top: 22px; min-height: 50px; padding: 0 34px; gap: 10px; font-size: 15px; }
.hl-go .i { width: 16px; height: 16px; }
.hl-go.go { opacity: .7; pointer-events: none; }

/* dernières séries */
.hl-past { margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--line); }
.hl-past-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 12px; }
.hl-past-head .qz-kicker { margin: 0; }
.hl-past-head b { color: var(--text); }
.hl-past-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; }
.hl-pc { display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; align-items: center; gap: 12px; width: 100%; padding: 8px 12px 8px 8px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface); color: inherit; text-align: left; cursor: pointer;
  animation: wtIn .4s cubic-bezier(.2, 1, .3, 1) both; animation-delay: calc(var(--i) * .04s); transition: border-color .2s, transform .2s, background .2s; }
.hl-pc:hover { border-color: var(--line-2); transform: translateY(-2px); background: var(--surface-2); }
.hl-pc-img { width: 46px; height: 58px; border-radius: 7px; overflow: hidden; background: var(--bg-2); }
.hl-pc-img img { width: 100%; height: 100%; object-fit: cover; }
.hl-pc-img .hl-u-q { font-size: 30px; }
.hl-pc-txt { display: grid; gap: 1px; min-width: 0; }
.hl-pc-txt b { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hl-pc-txt small { color: var(--faint); font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hl-pc-txt .hl-pc-end { color: var(--muted); }
.hl-pc-score { display: grid; justify-items: end; gap: 3px; }
.hl-pc-score b { font: var(--display-w) calc(26px * var(--display-scale)) / 1 var(--display); font-variant-numeric: tabular-nums; }
.hl-pc-score i { padding: 1px 7px; border-radius: 999px; background: color-mix(in srgb, var(--green) 15%, transparent); color: var(--green); font: 700 10.5px var(--font); font-style: normal; white-space: nowrap; }
.hl-pc.won .hl-pc-score b { color: var(--green); }
.modal.hl-detail-modal { width: min(880px, 96vw); }
.hl-detail { padding: 22px 24px; }
.hl-detail-head { display: flex; align-items: center; gap: 16px; margin-right: 40px; }
.hl-detail-head img { width: 54px; height: 72px; border-radius: 8px; object-fit: cover; }
.hl-detail-head h3 { margin: 2px 0 2px; font: var(--display-w) calc(26px * var(--display-scale)) / 1.05 var(--display); letter-spacing: var(--display-ls); }
.hl-detail-head p { margin: 0; font-size: 13px; }
.hl-detail .hl-recap { max-height: min(60vh, 520px); overflow-y: auto; }

/* une manche : question, compteur, duel */
.hl-head { text-align: center; }
.hl-head .qz-kicker { margin: 0; }
.hl-head h2 { margin: 2px 0 0; font: var(--display-w) calc(clamp(22px, 2.4vw, 30px) * var(--display-scale)) / 1.1 var(--display); letter-spacing: var(--display-ls); animation: wtIn .4s both; }

.hl-duel { display: grid; grid-template-columns: minmax(0, 270px) 96px minmax(0, 270px); justify-content: center; align-items: stretch; margin: 18px auto 0; }
.hl-card { display: grid; grid-template-rows: auto 1fr; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; background: var(--surface); transition: border-color .3s, background .3s, box-shadow .4s; }
.hl-img { position: relative; height: clamp(170px, calc(100vh - var(--top-h, 64px) - 480px), 280px); background: var(--bg-2); overflow: hidden; }
.hl-img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; transition: transform .6s cubic-bezier(.2, .8, .2, 1); }
.hl-card:hover .hl-img img { transform: scale(1.04); }
.hl-shade { position: absolute; inset: 0; background: linear-gradient(to top, rgba(8, 7, 6, .95) 6%, rgba(8, 7, 6, .4) 36%, transparent 62%); }
.hl-who { position: absolute; left: 14px; right: 14px; bottom: 11px; display: grid; gap: 2px; color: #fff; }
.hl-who b { font: var(--display-w) calc(21px * var(--display-scale)) / 1.08 var(--display); letter-spacing: var(--display-ls); text-shadow: 0 2px 10px rgba(0, 0, 0, .6); }
.hl-who small { color: rgba(255, 255, 255, .72); font-size: 12px; line-height: 1.3; }
.hl-who .hl-from { color: var(--amber); font-size: 11px; }
.hl-val { display: grid; align-content: start; gap: 10px; padding: 12px 14px 14px; min-height: 104px; }
.hl-v { min-height: 1.15em; font: var(--display-w) calc(clamp(20px, 2.1vw, 27px) * var(--display-scale)) / 1.1 var(--display); font-style: normal; color: var(--amber); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.hl-v.hl-hidden { display: none; }
.hl-v.hl-pop { animation: hlReveal .5s cubic-bezier(.2, 1.5, .4, 1) both; }
@keyframes hlReveal { from { opacity: 0; transform: translateY(10px) scale(.8); } }
.hl-card.ok { border-color: var(--green); background: color-mix(in srgb, var(--green) 8%, var(--surface)); box-shadow: 0 0 0 1px var(--green), 0 18px 40px -20px var(--green); }
.hl-card.ok .hl-v { color: var(--green); }
.hl-card.ko { border-color: var(--red); background: color-mix(in srgb, var(--red) 8%, var(--surface)); box-shadow: 0 0 0 1px var(--red), 0 18px 40px -20px var(--red); }
.hl-card.ko .hl-v { color: var(--red); }
.hl-btns { display: grid; gap: 8px; }
.hl-btns.gone { display: none; }
.hl-btns .btn { justify-content: flex-start; gap: 10px; height: 42px; transition: border-color .15s, background .15s, transform .15s; }
.hl-btns .btn:hover { transform: translateX(3px); }
.hl-btns kbd { margin-left: auto; padding: 1px 6px; border: 1px solid var(--line-2); border-radius: 5px; font: 600 10.5px var(--font); color: var(--faint); }
.hl-arrow { font-size: 11px; }
.hl-more .hl-arrow { color: var(--green); } .hl-less .hl-arrow { color: var(--red); }
.hl-more:hover, .hl-more.chosen { border-color: var(--green); background: color-mix(in srgb, var(--green) 10%, var(--surface)); }
.hl-less:hover, .hl-less.chosen { border-color: var(--red); background: color-mix(in srgb, var(--red) 10%, var(--surface)); }
.hl-stats { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.hl-stats li { display: grid; grid-template-columns: 74px minmax(0, 1fr) 26px; align-items: center; gap: 6px; font-size: 10.5px; color: var(--muted); }
.hl-stats i { height: 4px; border-radius: 2px; background: var(--surface-3); position: relative; overflow: hidden; }
.hl-stats i::after { content: ""; position: absolute; inset: 0; background: var(--amber); transform-origin: left; transform: scaleX(var(--w)); animation: hlBar .7s cubic-bezier(.2, .9, .3, 1) both; animation-delay: calc(var(--k) * .05s + .2s); }
@keyframes hlBar { from { transform: scaleX(0); } }
.hl-card.ok .hl-stats i::after { background: var(--green); } .hl-card.ko .hl-stats i::after { background: var(--red); }
.hl-stats b { text-align: right; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }

/* minuteur en anneau, au centre */
.hl-mid { display: grid; place-items: center; }
.hl-ring { position: relative; display: grid; place-items: center; width: 64px; height: 64px; }
.hl-ring > svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.hl-ring circle { fill: none; stroke-width: 4; }
.hl-ring .bg { stroke: var(--surface-3); fill: var(--bg-2); }
.hl-ring .fg { stroke: var(--accent); stroke-linecap: round; transition: stroke .3s; }
.hl-ring b { position: relative; font: var(--display-w) calc(20px * var(--display-scale)) / 1 var(--display); font-variant-numeric: tabular-nums; }
.hl-ring b .i { width: 24px; height: 24px; }
.hl-ring.hurry .fg { stroke: var(--red); }
.hl-ring.hurry b { color: var(--red); }
.hl-ring.beat { animation: hlBeat .35s ease-out; }
@keyframes hlBeat { 30% { transform: scale(1.14); } }
.hl-ring.ok .fg { stroke: var(--green); stroke-dashoffset: 0 !important; transition: stroke-dashoffset .4s, stroke .3s; }
.hl-ring.ok b { color: var(--green); animation: hlBump .5s cubic-bezier(.2, 1.8, .4, 1); }
.hl-ring.ko .fg { stroke: var(--red); }
.hl-ring.ko b { color: var(--red); animation: hlBump .5s cubic-bezier(.2, 1.8, .4, 1); }
.hl-foot { display: flex; justify-content: center; margin-top: 14px; }

/* entrée, enchaînement, erreur */
.hl-duel.first .hl-a { animation: hlFromL .55s cubic-bezier(.2, 1, .3, 1) both; }
.hl-duel.first .hl-b { animation: hlFlip .65s cubic-bezier(.2, 1, .3, 1) .12s both; }
.hl-duel.first .hl-ring, .hl-duel.enter .hl-ring { animation: hlRingIn .5s cubic-bezier(.2, 1.6, .4, 1) .2s both; }
.hl-duel.enter .hl-b { animation: hlFlip .6s cubic-bezier(.2, 1, .3, 1) both; }
@keyframes hlFromL { from { opacity: 0; transform: translateX(-40px) rotate(-3deg); } }
@keyframes hlFlip { from { opacity: 0; transform: perspective(900px) rotateY(-75deg) translateX(30px); } }
@keyframes hlRingIn { from { opacity: 0; transform: scale(.3) rotate(-90deg); } }
.hl-duel.slide .hl-a { opacity: 0; transform: translateX(-60px) rotate(-4deg); transition: opacity .35s, transform .42s; }
.hl-duel.slide .hl-b { transform: translateX(calc(-100% - 96px)); transition: transform .46s cubic-bezier(.5, 0, .2, 1); }
.hl-duel.slide .hl-mid { opacity: 0; transform: scale(.6); transition: opacity .2s, transform .3s; }
.hl-card.shake { animation: hlShake .5s; }
@keyframes hlShake { 15%, 55% { transform: translateX(-8px) rotate(-1deg); } 35%, 75% { transform: translateX(8px) rotate(1deg); } }

/* fin de série */
.hl-end-box { max-width: 900px; margin: 0 auto; }
.hl-end-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 22px; }
.hl-end-score { display: grid; justify-items: center; min-width: 96px; padding: 12px 16px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }
.hl-end-score b { font: var(--display-w) calc(48px * var(--display-scale)) / 1 var(--display); font-variant-numeric: tabular-nums; }
.hl-end-score span { font: 700 9.5px var(--font); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); text-align: center; }
.hl-end-t h2 { margin: 2px 0 4px; font: var(--display-w) calc(clamp(28px, 3.2vw, 40px) * var(--display-scale)) / 1.05 var(--display); letter-spacing: var(--display-ls); }
.hl-end-t p { margin: 0; font-size: 13.5px; }
.hl-end-head .hl-gain { flex-direction: column; align-items: center; margin: 0; padding: 12px 18px; border-radius: 16px; }
.hl-end-head .hl-gain b { font-size: calc(34px * var(--display-scale)); }
.hl-end-head .hl-gain.none { background: var(--surface); color: var(--muted); box-shadow: inset 0 0 0 1px var(--line); }
.hl-end.live .hl-end-score { animation: hlPopIn .6s cubic-bezier(.2, 1.5, .4, 1) both; }
.hl-end.live .hl-end-t { animation: wtIn .5s .1s both; }
.hl-end.live .hl-gain { animation: hlPopIn .6s cubic-bezier(.2, 1.5, .4, 1) .25s both; }
@keyframes hlPopIn { from { opacity: 0; transform: scale(.5); } }
.hl-end-box > .hl-recap { max-height: min(44vh, 420px); overflow-y: auto; margin-top: 18px; padding-right: 4px; }
.hl-end .wt-acts { justify-content: center; margin-top: 18px; }

/* récapitulatif : personnage A | réponse au milieu | personnage B */
.hl-recap { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 6px; }
.hl-recap li { position: relative; display: grid; grid-template-columns: 22px minmax(0, 1fr) 150px minmax(0, 1fr); align-items: center; gap: 12px; padding: 8px 12px; border-radius: 10px; background: var(--surface); font-size: 13px;
  border-left: 3px solid var(--green); animation: hlRow .45s cubic-bezier(.2, 1, .3, 1) both; animation-delay: calc(var(--i) * .06s + .2s); }
.hl-recap li.ko { border-left-color: var(--red); background: color-mix(in srgb, var(--red) 6%, var(--surface)); }
@keyframes hlRow { from { opacity: 0; transform: translateY(10px); } }
.hl-end.live .hl-recap li.ko { animation: hlRow .45s cubic-bezier(.2, 1, .3, 1) calc(var(--i) * .06s + .2s) both, hlShake .5s ease calc(var(--i) * .06s + .7s); }
.hl-rc-n { color: var(--faint); font: 600 11px var(--font); font-variant-numeric: tabular-nums; }
.hl-rc { display: grid; grid-template-columns: 36px minmax(0, 1fr); column-gap: 10px; align-items: center; min-width: 0; }
.hl-rc img { width: 36px; height: 44px; border-radius: 6px; object-fit: cover; object-position: 50% 20%; }
.hl-rc > span { display: grid; min-width: 0; }
.hl-rc b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hl-rc i { font-style: normal; font-size: 11px; color: var(--faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hl-rc em { font-style: normal; font-size: 12px; color: var(--amber); font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hl-rc-mid { display: grid; justify-items: center; gap: 3px; text-align: center; }
.hl-rc-mid small { color: var(--faint); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; }
.hl-pick { display: inline-flex; align-items: center; gap: 6px; padding: 3px 11px; border-radius: 999px; font: 700 12px var(--font); white-space: nowrap; background: color-mix(in srgb, var(--green) 14%, transparent); color: var(--green); }
.hl-recap li.ko .hl-pick { background: color-mix(in srgb, var(--red) 15%, transparent); color: var(--red); }
.hl-pick.to { background: color-mix(in srgb, var(--red) 15%, transparent); color: var(--red); }

@media (max-width: 760px) {
  .hl-duel { grid-template-columns: minmax(0, 1fr) 70px minmax(0, 1fr); }
  .hl-img { height: 170px; }
  .hl-duel.slide .hl-b { transform: translateX(calc(-100% - 70px)); }
  .hl-end-head { grid-template-columns: auto minmax(0, 1fr); }
  .hl-end-head .hl-gain { grid-column: 1 / -1; justify-self: start; flex-direction: row; gap: 8px; }
  .hl-recap li { grid-template-columns: minmax(0, 1fr) 96px minmax(0, 1fr); }
  .hl-rc-n, .hl-rc-mid small { display: none; }
  .hl-rc { grid-template-columns: minmax(0, 1fr); } .hl-rc img { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hl-u, .hl-pc, .hl-recap li, .hl-duel *, .hl-end-box *, .hl-ring, .hl-score b { animation: none !important; }
  .hl-duel.slide * { transition: none; }
}
@keyframes hlBump { 40% { transform: scale(1.45); } }
/* fil d'Ariane : réussites | une pastille par manche | erreurs */
.hl-trail { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 14px auto 0; width: fit-content; max-width: 100%; }
.hl-cnt { display: flex; align-items: baseline; gap: 6px; font: 700 10.5px var(--font); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.hl-cnt b { font: var(--display-w) calc(24px * var(--display-scale)) / 1 var(--display); letter-spacing: 0; font-variant-numeric: tabular-nums; }
.hl-cnt.ok b { color: var(--green); } .hl-cnt.ko b { color: var(--red); }
.hl-cnt.bump b { display: inline-block; animation: hlBump .45s cubic-bezier(.2, 1.8, .4, 1); }
.hl-dots { display: flex; align-items: center; gap: 6px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); min-height: 34px; }
.hl-dots i { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; font: 700 11px/1 var(--font); font-style: normal; }
.hl-dots i.ok { background: color-mix(in srgb, var(--green) 22%, transparent); color: var(--green); }
.hl-dots i.ko { background: color-mix(in srgb, var(--red) 22%, transparent); color: var(--red); }
.hl-dots i.now { border: 2px solid var(--accent); }
.hl-dots i.new { animation: hlBump .45s cubic-bezier(.2, 1.8, .4, 1); }
@keyframes hlNow { 50% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 25%, transparent); } }
/* manche suivante : seul le duel s'anime, pas la question */
.hl-play.next .hl-head h2 { animation: none; }
/* coche / croix bien au centre de l'anneau */
.hl-ring b { display: grid; place-items: center; width: 100%; height: 100%; }
.hl-ring b .i { display: block; margin: 0; }

/* fin de série : lignes en grand, tout tient sur un écran (deux colonnes au-delà de 6 manches) */
.hl-end-head { grid-template-columns: auto minmax(0, 1fr); }
.hl-end-box > .hl-recap.big { max-height: none; overflow: visible; margin-top: 20px; padding: 0;
  --h: clamp(56px, calc((100vh - var(--top-h, 64px) - 360px) / var(--n) - 8px), 96px); }
.hl-recap.big li { min-height: var(--h); grid-template-columns: 26px minmax(0, 1fr) 170px minmax(0, 1fr); padding: 8px 16px; font-size: 15px; }
.hl-recap.big .hl-rc { grid-template-columns: calc(var(--h) * .62) minmax(0, 1fr); column-gap: 14px; }
.hl-recap.big .hl-rc img { width: calc(var(--h) * .62); height: calc(var(--h) - 16px); border-radius: 8px; }
.hl-recap.big .hl-rc b { font: var(--display-w) calc(17px * var(--display-scale)) / 1.15 var(--display); }
.hl-recap.big .hl-rc i { font-size: 12.5px; }
.hl-recap.big .hl-rc em { font: var(--display-w) calc(18px * var(--display-scale)) / 1.2 var(--display); }
.hl-recap.big .hl-pick { padding: 5px 14px; font-size: 13.5px; }
.hl-recap.big .hl-rc-n { font-size: 13px; }
.hl-recap.big.two { grid-template-columns: 1fr 1fr; grid-auto-flow: column; grid-template-rows: repeat(var(--n), auto); gap: 8px 10px; }
.hl-recap.big.two li { grid-template-columns: 20px minmax(0, 1fr) 104px minmax(0, 1fr); gap: 8px; padding: 6px 10px; font-size: 13px; }
.hl-recap.big.two .hl-rc b { font-size: calc(14px * var(--display-scale)); }
.hl-recap.big.two .hl-rc em { font-size: calc(14px * var(--display-scale)); }
.hl-recap.big.two .hl-rc i, .hl-recap.big.two .hl-rc-mid small { display: none; }
.hl-recap.big.two .hl-pick { padding: 3px 9px; font-size: 11.5px; }
@media (max-width: 900px) { .hl-recap.big.two { grid-template-columns: 1fr; grid-auto-flow: row; grid-template-rows: none; } }
@media (max-width: 760px) {
  .hl-trail { gap: 8px; } .hl-dots { gap: 4px; padding: 5px 7px; } .hl-dots i { width: 16px; height: 16px; font-size: 9px; }
  .hl-recap.big li, .hl-recap.big.two li { grid-template-columns: minmax(0, 1fr) 96px minmax(0, 1fr); }
}
.hl-end-box:has(.hl-recap.two) { max-width: 1160px; }
.hl-recap.big.two .hl-rc em { white-space: nowrap; overflow: visible; }

/* plus de tentative aujourd'hui : le menu, jaquettes grisées, et un message */
.hl-lock { display: flex; align-items: center; gap: 14px; margin: -6px 0 20px; padding: 12px 16px; border: 1px solid color-mix(in srgb, var(--amber) 35%, var(--line)); border-radius: 12px; background: color-mix(in srgb, var(--amber) 7%, var(--surface)); text-align: left; animation: wtIn .45s both; }
.hl-lock > .i { width: 22px; height: 22px; color: var(--amber); }
.hl-lock > div { display: grid; gap: 2px; }
.hl-lock b { font: var(--display-w) calc(17px * var(--display-scale)) / 1.1 var(--display); }
.hl-lock small { color: var(--muted); font-size: 12.5px; }
.hl-lock .btn { margin-left: 8px; gap: 6px; }
.hl-setup-zone.locked .hl-u { cursor: default; box-shadow: 0 0 0 1px var(--line); transform: none; }
.hl-setup-zone.locked .hl-u-art img { filter: grayscale(1) brightness(.42); transform: none; }
.hl-setup-zone.locked .hl-u-q { filter: grayscale(1) brightness(.6); transform: none; }
.hl-setup-zone.locked .hl-u-txt { opacity: .55; }
.hl-setup-zone.locked .hl-u-txt small { color: var(--muted); }
.hl-setup-zone.locked .hl-u-glare, .hl-setup-zone.locked .hl-u-n, .hl-setup-zone.locked .hl-u-ok { display: none; }
@media (max-width: 640px) { .hl-lock { flex-wrap: wrap; } .hl-lock .btn { margin-left: 0; } }

/* --- Plus ou moins : 5 pastilles, images vivantes, enchaînement sans temps mort (2026-10-07) --- */
.hl-trail { gap: 0; }
.hl-dots { gap: 8px; padding: 7px 12px; min-height: 0; }
.hl-dots i { width: 16px; height: 16px; border-radius: 50%; background: var(--surface-3); box-shadow: inset 0 0 0 1px var(--line-2); transition: background .3s, box-shadow .3s; }
.hl-dots i.ok { background: var(--green); box-shadow: 0 0 10px color-mix(in srgb, var(--green) 55%, transparent); }
.hl-dots i.ko { background: var(--red); box-shadow: 0 0 10px color-mix(in srgb, var(--red) 55%, transparent); }
.hl-dots i.now { background: var(--surface-3); box-shadow: inset 0 0 0 2px var(--accent); border: 0; }
.hl-dots i.new { animation: hlBump .45s cubic-bezier(.2, 1.8, .4, 1); }
.hl-grp.full i { animation: hlFull .8s ease-out; }
.hl-grp.full i:nth-child(2) { animation-delay: .06s; } .hl-grp.full i:nth-child(3) { animation-delay: .12s; }
.hl-grp.full i:nth-child(4) { animation-delay: .18s; } .hl-grp.full i:nth-child(5) { animation-delay: .24s; }
@keyframes hlFull { 40% { transform: scale(1.35); box-shadow: 0 0 18px var(--green); } }

/* images vivantes : léger travelling permanent (zoom + glissement), différent sur chaque carte */
.hl-img img { animation: hlKen 11s ease-in-out infinite alternate; }
.hl-b .hl-img img { animation-duration: 13s; animation-direction: alternate-reverse; }
@keyframes hlKen { from { scale: 1.04; translate: -1.5% 1%; } to { scale: 1.14; translate: 1.5% -2%; } }

/* la valeur qui défile brille un instant */
.hl-v.counting { text-shadow: 0 0 18px color-mix(in srgb, var(--amber) 70%, transparent); }

/* enchaînement : la carte suivante arrive à droite pendant que l'ancienne glisse à gauche */
.hl-duel > .hl-incoming { grid-column: 3; grid-row: 1; pointer-events: none; }
.hl-duel.slide > .hl-incoming { transform: none; animation: hlFlip .46s cubic-bezier(.2, 1, .3, 1) both; }
.hl-duel.slide > .hl-incoming .hl-img img { animation: none; }
.hl-duel.still .hl-ring { animation: hlRingIn .35s cubic-bezier(.2, 1.6, .4, 1) both; }
@media (prefers-reduced-motion: reduce) { .hl-img img, .hl-dots i { animation: none !important; } }

/* dernière manche : la vraie valeur reste affichée avec la comparaison, avant le résumé */
.hl-v.final { font-size: calc(clamp(24px, 2.6vw, 32px) * var(--display-scale)); }
.hl-card.ko .hl-v.final { animation: hlMissVal .6s cubic-bezier(.2, 1.6, .4, 1) both; }
@keyframes hlMissVal { from { transform: scale(.7); } 50% { transform: scale(1.12); } }
.hl-miss { display: grid; justify-items: center; gap: 8px; margin-top: 16px; text-align: center; animation: wtIn .4s cubic-bezier(.2, 1, .3, 1) both; }
.hl-miss .qz-kicker { margin: 0; color: var(--red); }
.hl-miss.good .qz-kicker { color: var(--green); }
.hl-miss p { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; margin: 0; font-size: 15px; }
.hl-miss p b { font-variant-numeric: tabular-nums; }
.hl-miss p b.b { color: var(--red); }
.hl-miss.good p b.b { color: var(--green); }
.hl-miss p b.a { color: var(--amber); }
.hl-miss p i { font: var(--display-w) calc(24px * var(--display-scale)) / 1 var(--display); font-style: normal; color: var(--muted); }
.hl-miss .btn { gap: 8px; margin-top: 4px; }
.hl-miss .btn .i { width: 16px; height: 16px; }

/* Plus ou moins : toute la série (20 pastilles) par groupes de 5, un groupe complet = 1 spin */
.hl-dots { gap: 10px; padding: 6px 8px; }
.hl-grp { display: flex; gap: 5px; padding: 3px; border-radius: 999px; transition: box-shadow .3s, background .3s; }
.hl-grp.won { background: color-mix(in srgb, var(--green) 12%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--green) 45%, transparent); }
.hl-dots i { width: 13px; height: 13px; }
@media (max-width: 560px) { .hl-dots { gap: 5px; padding: 5px 6px; } .hl-grp { gap: 3px; padding: 2px; } .hl-dots i { width: 9px; height: 9px; } }
/* positions fixes dans le duel : la carte qui arrive se superpose à droite, rien ne passe à la ligne */
.hl-duel > .hl-a { grid-column: 1; grid-row: 1; }
.hl-duel > .hl-mid { grid-column: 2; grid-row: 1; }
.hl-duel > .hl-b { grid-column: 3; grid-row: 1; }
.hl-b .hl-img img { animation-duration: 11s; animation-direction: alternate; }
.hl-duel.slide > .hl-b:not(.hl-incoming) { z-index: 2; }
/* cartes avec les stats du databook : image plus courte pour que tout tienne à l'écran */
.hl-duel:has(.hl-stats) .hl-img { height: clamp(130px, calc(100vh - var(--top-h, 64px) - 590px), 230px); }
.hl-duel:has(.hl-stats) .hl-val { gap: 6px; padding-top: 10px; }
.hl-duel:has(.hl-stats) + .hl-miss { margin-top: 10px; }

/* résumé en chaîne : chaque personnage une fois, reliés par la réponse (tout tient sur un écran, sans défilement) */
.hl-end-box:has(.hl-chain) { max-width: 1180px; }
.hl-chain { list-style: none; margin: 20px 0 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 7px; }
.hl-ch-t { display: grid; grid-template-columns: 46px minmax(0, 1fr); align-items: center; gap: 10px; width: 196px; height: 60px; padding: 6px 10px 6px 6px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface);
  animation: hlChIn .4s cubic-bezier(.2, 1.2, .3, 1) both; animation-delay: calc(var(--k) * .035s + .15s); }
.hl-ch-t img { width: 46px; height: 48px; border-radius: 7px; object-fit: cover; object-position: 50% 20%; }
.hl-ch-t > span { display: grid; min-width: 0; }
.hl-ch-t b { font-size: 14px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hl-ch-t i { font-style: normal; font-size: 10.5px; color: var(--faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hl-ch-t em { font-style: normal; font-size: 13.5px; font-weight: 700; color: var(--amber); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hl-ch-t.ko { border-color: var(--red); background: color-mix(in srgb, var(--red) 10%, var(--surface)); box-shadow: 0 0 0 1px var(--red), 0 10px 24px -14px var(--red); }
.hl-ch-t.ko em { color: var(--red); }
.hl-end.live .hl-ch-t.ko { animation: hlChIn .4s cubic-bezier(.2, 1.2, .3, 1) calc(var(--k) * .035s + .15s) both, hlShake .5s ease calc(var(--k) * .035s + .6s); }
.hl-ch-l { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; font-size: 10px; animation: hlChIn .35s cubic-bezier(.2, 1.6, .4, 1) both; animation-delay: calc(var(--k) * .035s + .15s); }
.hl-ch-l b { line-height: 1; }
.hl-ch-l.ok { background: color-mix(in srgb, var(--green) 18%, transparent); color: var(--green); }
.hl-ch-l.ko { background: color-mix(in srgb, var(--red) 20%, transparent); color: var(--red); }
.hl-ch-cut { flex-basis: 100%; height: 0; overflow: visible; text-align: center; font: 700 10px var(--font); letter-spacing: .14em; text-transform: uppercase; color: var(--faint); }
@keyframes hlChIn { from { opacity: 0; transform: translateY(10px) scale(.92); } }
.hl-detail .hl-chain { max-height: min(62vh, 560px); overflow-y: auto; }

@media (prefers-reduced-motion: reduce) { .hl-ch-t, .hl-ch-l { animation: none !important; } }

/* résumé en chaîne, v2 : photos plus grandes, cadrées sur le visage, collées au bord de la tuile ;
   taille selon la longueur de la série (sz-l ≤ 6 cartes, sz-m ≤ 12, sz-s au-delà) */
.hl-chain { gap: 10px 8px; }
.hl-ch-t { position: relative; overflow: hidden; padding: 0; gap: 0; }
.hl-ch-t img { display: block; border-radius: 0; object-fit: cover; object-position: 50% 12%; background: var(--bg-2); }
.hl-ch-t > span { gap: 1px; }
/* longues séries : tuiles horizontales, photo pleine hauteur à gauche */
.hl-chain.sz-s .hl-ch-t { grid-template-columns: 54px minmax(0, 1fr); width: 190px; height: 64px; }
.hl-chain.sz-s .hl-ch-t img { width: 54px; height: 64px; }
.hl-chain.sz-s .hl-ch-t > span { padding: 0 10px 0 11px; }
/* séries courtes et moyennes : cartes portrait, grande photo en haut */
.hl-chain.sz-m .hl-ch-t, .hl-chain.sz-l .hl-ch-t { display: flex; flex-direction: column; align-items: stretch; height: auto; }
.hl-chain.sz-m .hl-ch-t { width: 122px; }
.hl-chain.sz-m .hl-ch-t img { width: 100%; height: 96px; }
.hl-chain.sz-l .hl-ch-t { width: 150px; }
.hl-chain.sz-l .hl-ch-t img { width: 100%; height: 176px; }
.hl-chain.sz-m .hl-ch-t > span, .hl-chain.sz-l .hl-ch-t > span { padding: 8px 10px 10px; }
.hl-chain.sz-l .hl-ch-t b { font-size: 15px; }
.hl-chain.sz-l .hl-ch-t em { font-size: 15px; }
.hl-chain.sz-m .hl-ch-l, .hl-chain.sz-l .hl-ch-l { width: 28px; height: 28px; font-size: 11px; }
/* l'erreur : bordure rouge à l'intérieur (plus de débordement de la photo) */
.hl-ch-t.ko { box-shadow: inset 0 0 0 2px var(--red), 0 12px 26px -14px var(--red); border-color: transparent; }
.hl-ch-t.ko img { opacity: .92; }
@media (max-width: 640px) {
  .hl-chain.sz-s .hl-ch-t { width: calc(50% - 22px); }
  .hl-chain.sz-m .hl-ch-t, .hl-chain.sz-l .hl-ch-t { width: calc(33% - 24px); }
  .hl-chain.sz-m .hl-ch-t img, .hl-chain.sz-l .hl-ch-t img { height: 110px; }
}
.hl-chain.sz-l, .hl-chain.sz-m { gap: 8px 6px; }
.hl-chain.sz-s { gap: 8px 5px; }
.hl-chain.sz-s .hl-ch-l { width: 22px; height: 22px; }
.hl-chain.sz-s .hl-ch-t b { font-size: 13.5px; }
.hl-chain.sz-s .hl-ch-t em { font-size: 13px; }

/* --- La roue, version « cadran » : 7 cases d'encre, filets papier, graduations, moyeu en sceau vermillon */
.wheel-page.wp3 { display: block; min-height: 0; }
.wp3 .wp-main { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 380px); gap: clamp(28px, 5vw, 80px); align-items: center; min-height: calc(100vh - var(--top-h) - 80px); }
.wp3 .wheel { width: min(100%, calc(100vh - var(--top-h) - 110px), 660px); }
.wheel-v3 { filter: none; }
.wheel-v3 .w3-face { fill: var(--bg-2); stroke: var(--line); stroke-width: .8; }
.wheel-v3 .w3-ticks line { stroke: var(--line-2); stroke-width: .6; }
.wheel-v3 .w3-ticks line.big { stroke: var(--muted); stroke-width: .9; }
.wheel.spinning .w3-ticks line.big { stroke: var(--accent); }
.wheel-v3 .w3-ring { fill: none; stroke: var(--line-2); stroke-width: .8; }
.wheel-v3 .ws path { stroke: none; transition: fill .35s; }
.wheel-v3 .ws-badge path { fill: #1d1b17; }
.wheel-v3 .ws-chibi path { fill: #171613; }
.wheel-v3 .ws-badge2 path { fill: #24211b; }
.wheel-v3 .ws-chibi2 path { fill: #1f1d18; }
.wheel-v3 .ws-miss path { fill: #100f0d; }
.wheel-v3 .ws-label { font: 600 5px var(--font); letter-spacing: .16em; fill: var(--muted); }
.wheel-v3 .ws-miss .ws-label { fill: var(--faint); }
.wheel-v3 .ws-badge2 .ws-label, .wheel-v3 .ws-chibi2 .ws-label { fill: var(--text); }
.wheel-v3 .ws-x { stroke: var(--faint); stroke-width: 1.6; stroke-linecap: round; fill: none; }
.wheel-v3 .ws-coin circle { fill: none; stroke: var(--line-2); stroke-width: .8; }
.wheel-v3 .ws image { filter: none; }
.wheel-v3 .wheel-seps line { stroke: var(--line-2); stroke-width: .6; }
.wheel-v3 .w3-inner { fill: var(--bg); stroke: var(--line-2); stroke-width: .8; }
.wheel-v3 .ws.hit path { animation: none; fill: color-mix(in srgb, var(--accent) 16%, #171613); }
.wheel-v3 .ws.hit .ws-label { fill: var(--accent); }
.wheel-v3 .ws.hit .ws-coin circle { stroke: var(--accent); }
.wheel-v3 .wheel-hub { cursor: pointer; fill: none; stroke: none; }
.wheel-v3 .w3-seal { fill: var(--accent); transition: fill .15s; }
.wheel-v3 .wheel-hub:hover .w3-seal { fill: #ff7350; }
.wheel-v3 .wheel-hub-t { font: 700 17px var(--jp); fill: var(--accent-ink); stroke: none; pointer-events: none; }
/* aiguille : une lame vermillon fine, posée sur le cadran */
.wp3 .wheel-pin { top: -1.2%; width: 4.2%; margin-left: -2.1%; aspect-ratio: 1 / 2; transform-origin: 50% 12%; clip-path: polygon(50% 100%, 0 18%, 50% 0, 100% 18%); filter: none; }
/* colonne : titre, compteur, bouton, chances en liste fine */
.wp3 .wheel-side { display: flex; flex-direction: column; gap: 0; }
.wp3 .back-games { align-self: flex-start; margin-bottom: 10px; }
.w3-title { margin: 0 0 26px; font: var(--display-w) calc(clamp(34px, 3.6vw, 48px) * var(--display-scale)) / 1 var(--display); letter-spacing: var(--display-ls); display: flex; align-items: baseline; }
.w3-title .jp { font-size: 13px; margin-left: 12px; }
.w3-spin { display: flex; flex-direction: column; gap: 14px; padding: 0 0 26px; border-bottom: 1px solid var(--line); }
.w3-count { display: flex; align-items: baseline; gap: 10px; }
.wp3 .spin-n { font: var(--display-w) calc(64px * var(--display-scale)) / .9 var(--display); letter-spacing: var(--display-ls); color: var(--text); font-variant-numeric: tabular-nums; }
.w3-count span { color: var(--muted); font-size: 14px; }
.wp3 .spin-btn { height: 52px; font-size: 16px; }
.wp3 .spin-result:empty { display: none; }
.wp3 .won-head { margin: 4px 0 10px; }
.w3-odds { padding-top: 22px; }
.w3-odds ul { list-style: none; margin: 8px 0 22px; padding: 0; }
.w3-odds ul:last-child { margin-bottom: 0; }
.w3-odd { display: grid; grid-template-columns: 8px 128px 1fr 64px; align-items: center; gap: 12px; padding: 7px 0; border-top: 1px solid var(--line); font-size: 13.5px; color: var(--muted); }
.w3-odd:last-child { border-bottom: 1px solid var(--line); }
.w3-odd i { width: 8px; height: 8px; border-radius: 2px; background: var(--line-2); }
.w3-odd.odd-badge i, .w3-odd.odd-badge2 i { background: var(--muted); }
.w3-odd.odd-chibi i, .w3-odd.odd-chibi2 i { background: var(--faint); }
.w3-odd.odd-miss i { background: transparent; box-shadow: inset 0 0 0 1px var(--faint); }
.w3-odd em { height: 2px; background: var(--line); position: relative; }
.w3-odd em::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--w); background: var(--muted); }
.w3-odd b { font-weight: 500; color: var(--text); text-align: right; font-variant-numeric: tabular-nums; font-family: var(--mono); }
.w3-odd.odd-tier i { background: var(--rt, var(--muted)); }
.w3-odd.odd-tier span { color: var(--rt, var(--muted)); }
.w3-odd.odd-tier em::after { background: var(--rt, var(--muted)); }
.w3-odd.odd-tier.r-signe em { height: 5px; border-radius: 3px; background: rgba(242, 196, 106, .2); }
.w3-odd.odd-tier.r-signe em::after { min-width: 16px; border-radius: 3px; background: #f2c46a; box-shadow: 0 0 9px rgba(242, 196, 106, .8); }
@media (max-width: 900px) {
  .wp3 .wp-main { grid-template-columns: 1fr; min-height: 0; }
  .wp3 .wheel-stage { order: 2; }
  .wp3 .wheel { width: min(100%, 520px); }
}

/* --- Réglages : sommaire collant à gauche, sections en lignes « libellé · réglage » séparées de filets */
.settings .page-head { margin-bottom: 36px; }
.st-layout { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.st-nav { position: sticky; top: calc(var(--top-h) + 28px); display: flex; flex-direction: column; border-left: 1px solid var(--line); }
.st-nav a { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 9px 0 9px 16px; margin-left: -1px; border-left: 1px solid transparent; color: var(--muted); font-size: 14px; transition: color .15s, border-color .15s; }
.st-nav a small { font: 11px var(--jp); color: var(--faint); }
.st-nav a:hover { color: var(--text); }
.st-nav a.on { color: var(--text); border-left-color: var(--accent); }
.st-nav a.on small { color: var(--accent); }
.st-body { max-width: 980px; }
.st-sec { scroll-margin-top: calc(var(--top-h) + 24px); margin-bottom: 48px; }
.st-sec h2 { margin: 0 0 4px; font: 600 11px var(--font); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.st-row { display: grid; grid-template-columns: minmax(200px, 300px) minmax(0, 1fr); gap: 16px 40px; align-items: center; padding: 22px 0; border-top: 1px solid var(--line); }
.st-row:last-child { border-bottom: 1px solid var(--line); }
.st-label b { display: block; font-size: 15px; font-weight: 600; color: var(--text); }
.st-label p { margin: 4px 0 0; font-size: 13px; line-height: 1.5; color: var(--muted); }
.st-ctl { display: flex; justify-content: flex-end; min-width: 0; }
.st-row.st-wide { grid-template-columns: 1fr; }
.st-row.st-wide .st-ctl { justify-content: stretch; }
.st-row.st-wide .font-picks { width: 100%; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; }
.settings .font-pick { padding: 14px 14px 12px; }
.settings .font-pick b { font-size: 22px; }
.settings .font-pick.on { background: transparent; box-shadow: inset 0 0 0 1px var(--accent); border-color: var(--accent); }
.st-form { display: flex; gap: 8px; width: 100%; max-width: 380px; }
.st-form .input { flex: 1; min-width: 0; }
.settings .btn-row { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.st-user { display: inline; font-size: 13px; color: var(--text); font-weight: 600; }
/* interrupteur : piste fine, pastille qui glisse, vermillon quand c'est activé */
.st-switch { position: relative; width: 44px; height: 24px; padding: 0; border-radius: 999px; border: 1px solid var(--line-2); background: var(--surface-2); cursor: pointer; transition: background .2s, border-color .2s; }
.st-switch i { position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--muted); transition: transform .2s cubic-bezier(.3, 1.4, .5, 1), background .2s; }
.st-switch[aria-checked="true"] { background: var(--accent); border-color: var(--accent); }
.st-switch[aria-checked="true"] i { transform: translateX(20px); background: var(--accent-ink); }
.st-switch:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.st-vol { display: flex; align-items: center; gap: 12px; width: min(260px, 100%); }
.st-vol output { min-width: 3.5em; text-align: right; color: var(--muted); font: 500 13px var(--mono); }
.settings .credit { margin-top: 0; }
@media (max-width: 820px) {
  .st-layout { grid-template-columns: 1fr; gap: 8px; }
  .st-nav { position: sticky; top: var(--top-h); z-index: 3; flex-direction: row; overflow-x: auto; border-left: 0; border-bottom: 1px solid var(--line); background: var(--bg); margin: 0 -16px; padding: 0 16px; }
  .st-nav a { padding: 12px 14px 11px; margin: 0 0 -1px; border-left: 0; border-bottom: 1px solid transparent; white-space: nowrap; }
  .st-nav a.on { border-bottom-color: var(--accent); }
  .st-nav a small { display: none; }
  .st-row { grid-template-columns: 1fr; gap: 12px; }
  .st-ctl { justify-content: flex-start; }
  .settings .btn-row { justify-content: flex-start; }
  .st-sec { margin-bottom: 32px; }
}
.st-nav { scrollbar-width: none; }
.st-nav::-webkit-scrollbar { display: none; }
@media (max-width: 820px) {
  .st-row.st-wide .font-picks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .settings .font-pick { padding: 12px; }
  .settings .font-pick b { font-size: 18px; }
}
/* roue sur mobile : titre, roue, puis compteur et bouton, chances en dessous */
@media (max-width: 900px) {
  .wp3 .wp-main { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
  .wp3 .wheel-side { display: contents; }
  .wp3 .back-games { order: 0; }
  .wp3 .w3-title { order: 1; margin-bottom: 18px; }
  .wp3 .wheel-stage { order: 2; margin-bottom: 22px; }
  .wp3 .w3-spin { order: 3; }
  .wp3 .w3-odds { order: 4; }
  .wp3 .spin-n { font-size: calc(48px * var(--display-scale)); }
}
/* espace sous la dernière section : chaque section peut monter en haut de l'écran (sommaire juste) */
.st-body { padding-bottom: 45vh; }
.st-select { width: auto; min-width: 220px; max-width: 100%; }

/* --- Tutoriel guidé : projecteur, caches qui bloquent le reste, flèche et carte d'étape --- */
.tour-layer { position: fixed; inset: 0; z-index: 300; pointer-events: none; isolation: isolate; }
.tour-block {
  position: fixed; z-index: 0; pointer-events: auto; cursor: not-allowed;
  background: rgba(7, 7, 6, .82); touch-action: none;
}
.tour-block:nth-child(5) { z-index: 2; background: transparent; }
.tour-spotlight {
  position: fixed; z-index: 1; border: 2px solid var(--accent); border-radius: 12px;
  background: linear-gradient(135deg, rgba(255,255,255,.035), transparent 48%);
  box-shadow: 0 0 0 4px rgba(255, 90, 54, .15), 0 0 28px rgba(255, 90, 54, .42), inset 0 0 18px rgba(255, 90, 54, .06);
  opacity: 1; transition: opacity .16s ease, border-color .3s, box-shadow .3s;
}
.tour-layer.is-action .tour-spotlight { animation: tourPulse 1.6s ease-in-out infinite; }
.tour-layer.is-done .tour-spotlight { border-color: #93c98a; box-shadow: 0 0 0 5px rgba(147, 201, 138, .2), 0 0 34px rgba(147, 201, 138, .55); animation: none; }
.tour-layer.is-target-away .tour-spotlight, .tour-layer.is-target-away .tour-pointer { opacity: 0; }
@keyframes tourPulse { 50% { box-shadow: 0 0 0 9px rgba(255, 90, 54, .11), 0 0 38px rgba(255, 90, 54, .6), inset 0 0 20px rgba(255, 90, 54, .1); } }
.tour-pointer {
  position: fixed; z-index: 3; display: grid; place-items: center; width: 30px; height: 30px; margin-left: -15px;
  color: var(--accent); filter: drop-shadow(0 4px 6px rgba(0,0,0,.65)); transform: rotate(-90deg);
  opacity: 1; transition: opacity .16s ease; animation: tourPointUp .8s ease-in-out infinite alternate;
}
.tour-pointer[hidden] { display: none; }
.tour-pointer[data-dir="above"] { transform: rotate(90deg); animation-name: tourPointDown; }
.tour-pointer[data-dir="right"] { transform: rotate(180deg); animation-name: tourPointLeft; }
.tour-pointer[data-dir="left"] { transform: none; animation-name: tourPointRight; }
.tour-pointer .i { width: 28px; height: 28px; stroke-width: 2.5; }
@keyframes tourPointUp { to { translate: 0 -6px; } }
@keyframes tourPointDown { to { translate: 0 6px; } }
@keyframes tourPointLeft { to { translate: -6px 0; } }
@keyframes tourPointRight { to { translate: 6px 0; } }
.tour-card {
  position: fixed; z-index: 4; box-sizing: border-box; max-width: calc(100vw - 12px); pointer-events: auto; padding: 20px; border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--line-2)); border-radius: 16px;
  background: linear-gradient(145deg, color-mix(in srgb, var(--bg-2) 97%, #fff 3%), color-mix(in srgb, var(--bg) 96%, transparent));
  box-shadow: 0 28px 80px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.025), 0 12px 35px rgba(255,90,54,.08);
  backdrop-filter: blur(18px); animation: tourCardIn .25s cubic-bezier(.2,.8,.2,1);
  overscroll-behavior: contain; scrollbar-width: thin;
  transition: opacity .16s ease, transform .16s ease;
}
.tour-card::before { content: ''; position: absolute; inset: 0 18px auto; height: 2px; border-radius: 0 0 99px 99px; background: linear-gradient(90deg, transparent, var(--accent), transparent); opacity: .75; }
.tour-card.nudge { animation: tourNudge .4s ease; }
@keyframes tourCardIn { from { opacity: 0; transform: translateY(8px) scale(.98); } }
@keyframes tourNudge { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
.tour-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.tour-kicker { display: inline-flex; align-items: center; min-height: 22px; padding: 0 8px; border: 1px solid rgba(255,90,54,.3); border-radius: 99px; background: rgba(255,90,54,.08); color: var(--accent); font: 700 10px var(--font); letter-spacing: .14em; text-transform: uppercase; }
.tour-skip, .tour-pass { border: 0; padding: 4px 0; background: transparent; color: var(--muted); font: 500 13px var(--font); cursor: pointer; }
.tour-skip:hover, .tour-pass:hover { color: var(--text); }
.tour-pass { text-decoration: underline; text-underline-offset: 3px; }
.tour-progress { display: grid; gap: 4px; margin: 14px 0 10px; }
.tour-progress i { height: 3px; border-radius: 99px; background: var(--line-2); }
.tour-progress i.on { background: var(--accent); }
.tour-progress i.now { background: linear-gradient(90deg, var(--accent) 50%, var(--line-2) 50%); background-size: 200% 100%; animation: tourNow 1.4s ease-in-out infinite alternate; }
@keyframes tourNow { from { background-position: 100% 0; } to { background-position: 0 0; } }
.tour-count { display: block; margin-bottom: 4px; color: var(--faint); font: 600 11px var(--mono); font-variant-numeric: tabular-nums; }
.tour-card h2 { margin: 0 0 8px; font: var(--display-w) calc(24px * var(--display-scale))/1.15 var(--display); letter-spacing: var(--display-ls); }
.tour-card p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.55; }
.tour-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 18px; min-height: 38px; }
.tour-actions .btn { min-width: 102px; }
.tour-go { display: flex; gap: 8px; }
.tour-go .tour-more { min-width: 0; }
.tour-wait { display: flex; align-items: center; gap: 4px; margin-top: 16px; color: var(--accent); font: 500 13px var(--font); }
.tour-wait > span { margin-left: 6px; }
.tour-wait i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: tourDot 1s ease-in-out infinite; }
.tour-wait i:nth-child(2) { animation-delay: .15s; }
.tour-wait i:nth-child(3) { animation-delay: .3s; }
@keyframes tourDot { 0%, 100% { opacity: .25; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-3px); } }
.tour-bravo { display: inline-flex; align-items: center; gap: 8px; color: #93c98a; font: 700 16px var(--font); animation: tourBravo .45s cubic-bezier(.2,1.6,.4,1); }
.tour-bravo .i { width: 22px; height: 22px; stroke-width: 3; }
@keyframes tourBravo { from { opacity: 0; transform: scale(.6); } }
.tour-focus.card-btn { opacity: 1; transform: none; }
body.tour-open { overscroll-behavior: none; }
@media (max-width: 640px) {
  .tour-card { padding: 14px; }
  .tour-spotlight { border-radius: 9px; }
  .tour-progress { gap: 3px; }
}
@media (max-height: 520px) {
  .tour-card { padding: 12px 14px; }
  .tour-progress { margin: 7px 0 6px; }
  .tour-card h2 { font-size: calc(20px * var(--display-scale)); margin-bottom: 5px; }
  .tour-card p { font-size: 12.5px; line-height: 1.38; }
  .tour-wait { margin-top: 8px; }
  .tour-actions { position: sticky; bottom: -12px; margin: 9px -2px -12px; padding: 8px 2px 12px; background: linear-gradient(transparent, var(--bg-2) 18%); }
}
@media (prefers-reduced-motion: reduce) {
  .tour-pointer, .tour-card, .tour-layer.is-action .tour-spotlight, .tour-progress i.now, .tour-wait i { animation: none; }
  .tour-spotlight, .tour-card { transition: none; }
}

/* --- Fiche : grandes cartes d'épisodes, façon plateforme de streaming */
.ep-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 10px; }
.ep-head h3 { margin: 0; }
.ep-heading { display: flex; align-items: baseline; gap: 12px; }
.ep-count { font: 500 13px var(--mono); color: var(--muted); font-variant-numeric: tabular-nums; }
.ep-pages { margin-left: auto; }
.ep-pages button { font-variant-numeric: tabular-nums; }
.ep-progress { height: 4px; overflow: hidden; border-radius: 99px; background: var(--surface-2); margin-bottom: 13px; }
.ep-progress i { display: block; height: 100%; border-radius: inherit; background: var(--accent); transition: width .3s ease; }
.ep-toolbar { display: flex; align-items: end; justify-content: space-between; gap: 12px; padding-bottom: 14px; }
.ep-season { display: grid; gap: 5px; color: var(--muted); font: 600 10px var(--font); letter-spacing: .09em; text-transform: uppercase; }
.ep-season select { min-width: 145px; height: 36px; padding: 5px 34px 5px 11px; font-size: 12px; }
.ep-nav { display: flex; gap: 7px; }
.ep-nav button { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 1px solid var(--line-2); border-radius: 50%; background: var(--surface); color: var(--text); cursor: pointer; }
.ep-nav button:hover { border-color: var(--text); }
.ep-nav .i { width: 15px; height: 15px; }
.ep-grid { display: flex; gap: 14px; overflow-x: auto; overflow-y: hidden; padding: 2px 2px 12px; scroll-snap-type: x mandatory; scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; }
.ep-card { position: relative; display: flex; flex: 0 0 clamp(250px, 23.5vw, 350px); flex-direction: column; min-width: 0; scroll-snap-align: start; transition: transform .2s; }
.ep-card:hover { transform: translateY(-2px); }
.ep-thumb { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; padding: 0; border: 0; border-radius: var(--radius-sm); overflow: hidden; background: var(--surface-2); cursor: pointer; }
.ep-thumb img, .ep-fb { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease, opacity .2s, filter .2s; }
.ep-fb { background: center / cover no-repeat; filter: blur(2px) brightness(.45) saturate(.8); transform: scale(1.08); }
.ep-big { position: absolute; inset: 0; display: grid; place-items: center; font: var(--display-w) calc(40px * var(--display-scale)) / 1 var(--display); color: var(--text); opacity: .85; }
.ep-thumb:hover img { transform: scale(1.04); }
.ep-thumb:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ep-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--accent); }
.ep-up { position: absolute; top: 8px; left: 8px; padding: 2px 8px; border-radius: 999px; background: var(--text); color: var(--bg); font: 600 10.5px var(--font); letter-spacing: .08em; text-transform: uppercase; }
.ep-card.seen .ep-thumb img, .ep-card.seen .ep-fb { opacity: .55; }
/* anti-spoil : vignettes des épisodes non vus (et à venir) floutées, même au survol */
:root[data-nospoil] .ep-card:not(.seen):not(.ns-off) .ep-thumb img { filter: blur(14px) brightness(.55) saturate(.8); transform: scale(1.15); }
:root[data-nospoil] .ep-card.soon:not(.ns-off) .ep-thumb img { filter: blur(14px) grayscale(1) brightness(.45); }
/* pastille hors de la vignette (bouton désactivé pour un épisode à venir), posée par-dessus */
.ep-ns-zone { display: none; position: absolute; z-index: 2; top: 0; left: 0; right: 0; aspect-ratio: 16 / 9; place-items: center; pointer-events: none; }
.ep-ns { max-width: 88%; padding: 4px 10px; border-radius: 12px; background: rgba(14, 13, 11, .7); color: var(--text); font: 600 10.5px / 1.3 var(--font); letter-spacing: .08em; text-transform: uppercase; text-align: center; cursor: pointer; pointer-events: auto; transition: background .15s; }
.ep-ns > span + span, .ep-ns:hover > span:first-child { display: none; }
.ep-ns:hover > span + span { display: inline; }
.ep-ns:hover { background: var(--text); color: var(--bg); }
:root[data-nospoil] .ep-card:not(.seen):not(.ns-off) .ep-ns-zone { display: grid; }
:root[data-nospoil] .ep-card:has(.ep-fb) .ep-ns-zone { display: none; }
.ep-card.next .ep-thumb { box-shadow: 0 0 0 2px var(--text); }
.ep-card.soon .ep-thumb { cursor: default; }
.ep-card.soon .ep-thumb img, .ep-card.soon .ep-fb { opacity: .35; filter: grayscale(1) brightness(.5); }
/* survol d'une vignette : l'action qu'un clic va faire */
.ep-thumb:not(:disabled)::after { content: ""; position: absolute; inset: 0; background: rgba(14, 13, 11, 0.35); opacity: 0; transition: opacity .2s; }
.ep-thumb:not(:disabled):hover::after { opacity: 1; }
.ep-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; padding: 10px 2px 0; }
.ep-k { display: flex; align-items: center; gap: 6px; font: 600 11px var(--font); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.ep-k em { font-style: normal; padding: 0 5px; border-radius: 3px; border: 1px solid var(--line-2); color: var(--faint); letter-spacing: .06em; font-size: 10px; }
.ep-title { font-size: 14px; font-weight: 650; line-height: 1.35; color: var(--text); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ep-card.seen .ep-title { color: var(--muted); }
.ep-date { font-size: 12px; color: var(--faint); }
.ep-summary { margin: 4px 0 0; color: var(--muted); font-size: 12px; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; cursor: help; }
.ep-summary:focus-visible { outline: 1px solid var(--accent); outline-offset: 3px; border-radius: 3px; }
.ep-summary-popover { position: fixed; z-index: 1000; width: min(360px, calc(100vw - 24px)); max-height: min(240px, calc(100vh - 24px)); overflow: auto; padding: 12px 14px; border: 1px solid var(--line-2); border-radius: 9px; background: color-mix(in srgb, var(--surface) 96%, transparent); color: var(--text); box-shadow: 0 16px 42px rgba(0,0,0,.45); backdrop-filter: blur(12px); font-size: 13px; line-height: 1.55; }
.ep-actions { position: absolute; z-index: 3; top: 8px; right: 8px; display: flex; flex-direction: column; gap: 6px; }
.ep-watch, .ep-toggle { width: 30px; height: 30px; display: grid; place-items: center; padding: 0; border-radius: 50%; border: 1px solid rgba(255,255,255,.18); background: rgba(14, 13, 11, .78); color: var(--text); cursor: pointer; transition: color .2s, border-color .2s, background .2s; backdrop-filter: blur(5px); }
.ep-watch:hover, .ep-toggle:hover { border-color: var(--text); background: rgba(14, 13, 11, .95); }
.ep-toggle .i, .ep-watch .i { width: 14px; height: 14px; }
.ep-card.seen .ep-toggle { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.ep-card.soon .ep-up { background: rgba(14, 13, 11, .82); color: var(--muted); }
.ep-card.sk .ep-thumb { background: linear-gradient(100deg, var(--surface) 30%, var(--surface-2) 50%, var(--surface) 70%); background-size: 300% 100%; animation: shimmer 1.4s infinite linear; }
.ep-source { display: block; margin-top: 12px; color: var(--faint); text-align: right; }
.ep-source a { color: var(--muted); }
@media (max-width: 640px) {
  .ep-heading { width: 100%; justify-content: space-between; }
  .ep-pages { margin-left: 0; width: 100%; overflow-x: auto; flex-wrap: nowrap; }
  .ep-card { flex-basis: min(82vw, 320px); }
  .ep-summary { -webkit-line-clamp: 3; }
}

/* compte d'exemple : invitation sur l'écran de connexion, bandeau fixe une fois dedans */
.demo-try { display: grid; gap: 6px; justify-items: center; padding-top: 12px; border-top: 1px solid var(--line); font-size: 14px; }
.demo-try .btn { border-color: var(--line-2); }
.demo-bar {
  position: fixed; left: 50%; bottom: 16px; z-index: 90; transform: translateX(-50%);
  display: flex; align-items: center; gap: 14px; width: max-content; max-width: calc(100vw - 32px);
  padding: 8px 8px 8px 16px; border: 1px solid var(--line-2); border-radius: 999px; background: var(--surface-2); box-shadow: 0 10px 30px #0008;
}
.demo-bar p { margin: 0; font-size: 13px; color: var(--muted); }
.demo-bar b { color: var(--text); margin-right: 6px; }
.demo-bar .btn { flex: none; padding: 7px 14px; font-size: 13px; }
@media (max-width: 640px) {
  .demo-bar { bottom: calc(76px + env(safe-area-inset-bottom)); left: 12px; right: 76px; transform: none; width: auto; justify-content: space-between; border-radius: 14px; }
  .demo-bar span { display: none; }
}