/* Komacal — direction « encre & papier » : fond encre chaude, texte papier, un seul accent vermillon (sceau hanko). */
/* polices servies par le site (public/fonts, licence OFL), mêmes fichiers et plages que Google Fonts : rien ne bloque le premier affichage */
@font-face {font-family: 'Bricolage Grotesque'; font-style: normal; font-weight: 500 800; font-stretch: 100%; font-display: swap; src: url(/fonts/bricolage-grotesque-vietnamese.woff2?v=1) format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;}
@font-face {font-family: 'Bricolage Grotesque'; font-style: normal; font-weight: 500 800; font-stretch: 100%; font-display: swap; src: url(/fonts/bricolage-grotesque-latin-ext.woff2?v=1) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face {font-family: 'Bricolage Grotesque'; font-style: normal; font-weight: 500 800; font-stretch: 100%; font-display: swap; src: url(/fonts/bricolage-grotesque-latin.woff2?v=1) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face {font-family: 'Onest'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(/fonts/onest-cyrillic-ext.woff2?v=1) format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;}
@font-face {font-family: 'Onest'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(/fonts/onest-cyrillic.woff2?v=1) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;}
@font-face {font-family: 'Onest'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(/fonts/onest-math.woff2?v=1) format('woff2'); unicode-range: U+0302-0303, U+0305, U+0307-0308, U+0310, U+0312, U+0315, U+031A, U+0326-0327, U+032C, U+032F-0330, U+0332-0333, U+0338, U+033A, U+0346, U+034D, U+0391-03A1, U+03A3-03A9, U+03B1-03C9, U+03D1, U+03D5-03D6, U+03F0-03F1, U+03F4-03F5, U+2016-2017, U+2034-2038, U+203C, U+2040, U+2043, U+2047, U+2050, U+2057, U+205F, U+2070-2071, U+2074-209F, U+20D0-20DC, U+20E1, U+20E5-20EF, U+2100-2112, U+2114-2115, U+2117-2121, U+2123-214F, U+2190, U+2192, U+2194-21AE, U+21B0-21E5, U+21F1-21F2, U+21F4-2211, U+2213-2214, U+2216-22FF, U+2308-230B, U+2310, U+2319, U+231C-2321, U+2336-237A, U+237C, U+2395, U+239B-23B7, U+23D0, U+23DC-23E1, U+2474-2475, U+25AF, U+25B3, U+25B7, U+25BD, U+25C1, U+25CA, U+25CC, U+25FB, U+266D-266F, U+27C0-27FF, U+2900-2AFF, U+2B0E-2B11, U+2B30-2B4C, U+2BFE, U+3030, U+FF5B, U+FF5D, U+1D400-1D7FF, U+1EE00-1EEFF;}
@font-face {font-family: 'Onest'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(/fonts/onest-symbols.woff2?v=1) format('woff2'); unicode-range: U+0001-000C, U+000E-001F, U+007F-009F, U+20DD-20E0, U+20E2-20E4, U+2150-218F, U+2190, U+2192, U+2194-2199, U+21AF, U+21E6-21F0, U+21F3, U+2218-2219, U+2299, U+22C4-22C6, U+2300-243F, U+2440-244A, U+2460-24FF, U+25A0-27BF, U+2800-28FF, U+2921-2922, U+2981, U+29BF, U+29EB, U+2B00-2BFF, U+4DC0-4DFF, U+FFF9-FFFB, U+10140-1018E, U+10190-1019C, U+101A0, U+101D0-101FD, U+102E0-102FB, U+10E60-10E7E, U+1D2C0-1D2D3, U+1D2E0-1D37F, U+1F000-1F0FF, U+1F100-1F1AE, U+1F1E6-1F1FF, U+1F30D-1F30F, U+1F315, U+1F31C, U+1F31E, U+1F320-1F32C, U+1F336, U+1F378, U+1F37D, U+1F382, U+1F393-1F39F, U+1F3A7-1F3A8, U+1F3AC-1F3AF, U+1F3C2, U+1F3C4-1F3C6, U+1F3CA-1F3CE, U+1F3D4-1F3E0, U+1F3ED, U+1F3F1-1F3F3, U+1F3F5-1F3F7, U+1F408, U+1F415, U+1F41F, U+1F426, U+1F43F, U+1F441-1F442, U+1F444, U+1F446-1F449, U+1F44C-1F44E, U+1F453, U+1F46A, U+1F47D, U+1F4A3, U+1F4B0, U+1F4B3, U+1F4B9, U+1F4BB, U+1F4BF, U+1F4C8-1F4CB, U+1F4D6, U+1F4DA, U+1F4DF, U+1F4E3-1F4E6, U+1F4EA-1F4ED, U+1F4F7, U+1F4F9-1F4FB, U+1F4FD-1F4FE, U+1F503, U+1F507-1F50B, U+1F50D, U+1F512-1F513, U+1F53E-1F54A, U+1F54F-1F5FA, U+1F610, U+1F650-1F67F, U+1F687, U+1F68D, U+1F691, U+1F694, U+1F698, U+1F6AD, U+1F6B2, U+1F6B9-1F6BA, U+1F6BC, U+1F6C6-1F6CF, U+1F6D3-1F6D7, U+1F6E0-1F6EA, U+1F6F0-1F6F3, U+1F6F7-1F6FC, U+1F700-1F80B, U+1F810-1F847, U+1F850-1F859, U+1F860-1F887, U+1F890-1F8AD, U+1F8B0-1F8BB, U+1F8C0-1F8C1, U+1F8D0-1F8D8, U+1F900-1F90B, U+1F93B, U+1F946, U+1F984, U+1F996, U+1F9E9, U+1FA00-1FA6F, U+1FA70-1FA7C, U+1FA80-1FAC6, U+1FAC8, U+1FACC-1FADD, U+1FADF-1FAEB, U+1FAEF-1FAFA, U+1FB00-1FBFF;}
@font-face {font-family: 'Onest'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(/fonts/onest-vietnamese.woff2?v=1) format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;}
@font-face {font-family: 'Onest'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(/fonts/onest-latin-ext.woff2?v=1) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face {font-family: 'Onest'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(/fonts/onest-latin.woff2?v=1) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}

/* échelle de l'interface : le serveur sert chaque taille en px (sauf 1 px et media queries) en calc(Npx * var(--ui)) */
:root { --ui: 1; }
@media (min-width: 1100px) and (hover: hover) and (pointer: fine) { :root { --ui: .85; } }
:root {
  --bg: #0e0d0b;
  --bg-2: #141310;
  --surface: #161512;
  --surface-2: #1d1c18;
  --surface-3: #282620;
  --line: #2a2823;
  --line-2: #3b3830;
  --text: #eeeae1;
  --muted: #9b968a;
  --faint: #837e74; /* contraste 4,5:1 sur le fond et les cartes (était #67635a, 3,2:1) */
  --accent: #ff5a36;
  --accent-ink: #140a06;
  --green: #93c98a;
  --blue: #8fb3e3;
  --amber: #e2b95e;
  --red: #ec6f5d;
  --gray: #a39e93;
  --violet: #c2b2e0;
  --star: #e2b95e;
  --radius: calc(10px * var(--ui));
  --radius-sm: calc(6px * var(--ui));
  /* 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: calc(64px * var(--ui));
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: calc(15px * var(--ui))/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="roue"]::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; }
/* focus posé par le script (titre de la nouvelle page, fenêtre ouverte) : annoncé, sans cadre */
#view:focus, #view h1[tabindex="-1"]:focus, .modal:focus { outline: none; }
/* lien d'évitement : invisible tant qu'il n'a pas le focus clavier */
.skip-link { position: fixed; z-index: 1300; top: calc(10px * var(--ui)); left: calc(10px * var(--ui)); padding: calc(10px * var(--ui)) calc(16px * var(--ui)); border: 0; border-radius: var(--radius-sm); background: var(--accent); color: var(--accent-ink); font: 600 calc(14px * var(--ui)) var(--font); cursor: pointer; transform: translateY(-160%); }
.skip-link:focus-visible { transform: none; outline-color: var(--text); }

.container { width: 100%; margin: 0; padding: 0 clamp(calc(16px * var(--ui)), 3.2vw, calc(56px * var(--ui))); }
.page { padding-top: calc(var(--top-h) + calc(40px * var(--ui))); padding-bottom: calc(90px * var(--ui)); }
.page.narrow { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, calc(440px * var(--ui))), 1fr)); column-gap: calc(56px * var(--ui)); align-content: start; }
.page.narrow > .page-head, .page.narrow > .credit { grid-column: 1 / -1; }
.page-head { margin-bottom: calc(28px * var(--ui)); }
.page-head h1 { font-size: calc(clamp(calc(36px * var(--ui)), 5.2vw, calc(60px * var(--ui))) * var(--display-scale)); line-height: 1; display: flex; align-items: baseline; flex-wrap: wrap; }
.page-head h1 .jp { font-size: calc(14px * var(--ui)); margin-left: calc(16px * var(--ui)); }
.page-head p { margin: calc(10px * var(--ui)) 0 0; }
.eyebrow { font: 500 calc(12px * var(--ui)) var(--mono); text-transform: uppercase; letter-spacing: .14em; color: var(--muted); margin-bottom: calc(14px * var(--ui)); }
.eyebrow::before { content: ""; display: inline-block; width: calc(8px * var(--ui)); height: calc(8px * var(--ui)); background: var(--accent); margin-right: calc(10px * var(--ui)); 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: calc(36px * var(--ui)); padding: 0 clamp(calc(16px * var(--ui)), 3.2vw, calc(56px * var(--ui)));
  background: rgba(14, 13, 11, 0.95); border-bottom: 1px solid var(--line);
}
.logo { display: flex; align-items: center; gap: calc(12px * var(--ui)); }
.logo-text { font-size: calc(calc(22px * var(--ui)) * var(--display-scale)); line-height: 1; }
.logo-text em { color: var(--accent); }
.seal {
  width: calc(30px * var(--ui)); height: calc(30px * var(--ui)); display: grid; place-items: center; border-radius: calc(6px * var(--ui)); background: var(--accent); color: var(--accent-ink);
  font: 700 calc(17px * var(--ui))/1 var(--jp); transform: rotate(-4deg); flex: none;
}
.seal.big { width: calc(64px * var(--ui)); height: calc(64px * var(--ui)); font-size: calc(36px * var(--ui)); border-radius: calc(12px * var(--ui)); margin: 0 auto calc(18px * var(--ui)); }
.nav { display: flex; gap: calc(2px * var(--ui)); height: 100%; }
.nav a { position: relative; display: flex; align-items: center; gap: calc(8px * var(--ui)); padding: 0 calc(14px * var(--ui)); color: var(--muted); font-weight: 500; font-size: calc(14px * var(--ui)); transition: color .15s; }
.nav a .i { width: calc(16px * var(--ui)); height: calc(16px * var(--ui)); }
.nav a:hover, .nav a.on { color: var(--text); }
.nav a.on::after { content: ""; position: absolute; left: calc(14px * var(--ui)); right: calc(14px * var(--ui)); bottom: -1px; height: calc(2px * var(--ui)); background: var(--accent); }
.top-search { position: relative; margin-left: auto; width: min(calc(360px * var(--ui)), 30vw); display: flex; align-items: center; }
.top-search > .i { position: absolute; left: calc(12px * var(--ui)); width: calc(16px * var(--ui)); height: calc(16px * var(--ui)); color: var(--faint); pointer-events: none; }
.top-search input {
  width: 100%; height: calc(38px * var(--ui)); padding: 0 calc(14px * var(--ui)) 0 calc(36px * var(--ui)); border-radius: calc(8px * var(--ui)); border: 1px solid var(--line);
  background: var(--surface); color: var(--text); font: inherit; font-size: calc(14px * var(--ui)); 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% + calc(6px * var(--ui))); left: 0; right: 0; max-height: 70vh; overflow: auto;
  background: var(--bg-2); border: 1px solid var(--line-2); border-radius: var(--radius); padding: calc(6px * var(--ui)); box-shadow: 0 calc(24px * var(--ui)) calc(60px * var(--ui)) calc(-20px * var(--ui)) rgba(0, 0, 0, 0.8);
}
.sg { display: flex; align-items: center; gap: calc(12px * var(--ui)); padding: calc(7px * var(--ui)); border-radius: calc(8px * var(--ui)); }
.sg:hover { background: var(--surface-2); }
.sg img { width: calc(36px * var(--ui)); height: calc(52px * var(--ui)); object-fit: cover; border-radius: calc(4px * var(--ui)); }
.sg div { flex: 1; min-width: 0; }
.sg b { display: block; font-weight: 600; font-size: calc(14px * var(--ui)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sg small { color: var(--muted); font-size: calc(12px * var(--ui)); }
.sg-all { display: block; text-align: center; padding: calc(10px * var(--ui)); color: var(--accent); font-size: calc(13px * var(--ui)); font-weight: 600; border-top: 1px solid var(--line); margin-top: calc(4px * var(--ui)); }
.sg-empty { padding: calc(16px * var(--ui)); text-align: center; color: var(--muted); }
.sg-kind { padding: calc(9px * var(--ui)) calc(9px * var(--ui)) calc(4px * var(--ui)); color: var(--faint); font-size: calc(10px * var(--ui)); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.sg-kind:not(:first-child) { margin-top: calc(4px * var(--ui)); border-top: 1px solid var(--line); }
.sg-user-avatar { flex: none; width: calc(38px * var(--ui)); height: calc(38px * var(--ui)); 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: calc(18px * var(--ui)); height: calc(18px * var(--ui)); }
.bottom-nav { display: none; }

/* ---------- Boutons & champs ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: calc(8px * var(--ui)); height: calc(40px * var(--ui)); padding: 0 calc(16px * var(--ui));
  border-radius: calc(8px * var(--ui)); border: 1px solid var(--line-2); background: transparent; color: var(--text);
  font-weight: 500; font-size: calc(14px * var(--ui)); white-space: nowrap; transition: background .15s, border-color .15s, transform .1s;
}
.btn .i { width: calc(16px * var(--ui)); height: calc(16px * var(--ui)); }
.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: calc(32px * var(--ui)); padding: 0 calc(12px * var(--ui)); font-size: calc(13px * var(--ui)); }
.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: calc(10px * var(--ui)); }
.btn-col { display: grid; gap: calc(8px * var(--ui)); margin-top: calc(14px * var(--ui)); }
.icon-btn {
  display: inline-grid; place-items: center; width: calc(36px * var(--ui)); height: calc(36px * var(--ui)); border-radius: calc(8px * var(--ui)); border: 1px solid var(--line);
  background: transparent; color: var(--text); flex: none; transition: background .15s, border-color .15s;
}
.icon-btn .i { width: calc(16px * var(--ui)); height: calc(16px * var(--ui)); }
.icon-btn:hover { background: var(--surface-2); border-color: var(--line-2); }
.icon-btn.sm { width: calc(28px * var(--ui)); height: calc(28px * var(--ui)); border-radius: calc(6px * var(--ui)); }
.icon-btn.sm .i { width: calc(14px * var(--ui)); height: calc(14px * var(--ui)); }
.link { display: inline-flex; align-items: center; gap: calc(4px * var(--ui)); color: var(--muted); font: 500 calc(12px * var(--ui)) var(--mono); text-transform: uppercase; letter-spacing: .08em; background: none; border: 0; padding: 0; transition: color .15s; }
.link[hidden], #settings-tutorial-restart[hidden] { display: none; } /* sinon bouton vide atteignable au clavier */
.link:hover { color: var(--accent); }
.link .i { width: calc(14px * var(--ui)); height: calc(14px * var(--ui)); }
.input {
  height: calc(40px * var(--ui)); padding: 0 calc(12px * var(--ui)); border-radius: calc(8px * var(--ui)); border: 1px solid var(--line); background: var(--surface);
  color: var(--text); font: inherit; font-size: calc(14px * var(--ui)); outline: none; transition: border-color .15s; min-width: 0;
}
.input:focus { border-color: var(--faint); }
select.input { appearance: none; padding-right: calc(32px * var(--ui)); 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 calc(11px * var(--ui)) center; }
select.input option { background: var(--bg-2); }
textarea.input { height: auto; padding: calc(10px * var(--ui)) calc(12px * var(--ui)); 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: calc(12px * var(--ui)); width: calc(16px * var(--ui)); height: calc(16px * var(--ui)); color: var(--faint); pointer-events: none; }
.input-icon .input { padding-left: calc(36px * var(--ui)); width: 100%; }
.grow { flex: 1 1 calc(260px * var(--ui)); }

/* étiquettes de statut : texte mono + point */
.pill {
  display: inline-flex; align-items: center; gap: calc(6px * var(--ui)); height: calc(22px * var(--ui)); padding: 0 calc(8px * var(--ui)); border-radius: calc(4px * var(--ui));
  font: 500 calc(11px * var(--ui)) 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: calc(20px * var(--ui)); padding: 0 calc(6px * var(--ui)); font-size: calc(10px * var(--ui)); }
.pill .dot { width: calc(6px * var(--ui)); height: calc(6px * var(--ui)); border-radius: 50%; background: currentColor; }
.pill .i { width: calc(11px * var(--ui)); height: calc(11px * var(--ui)); }
.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: calc(6px * var(--ui)); font: 500 calc(11px * var(--ui)) var(--mono); text-transform: uppercase; letter-spacing: .06em; white-space: nowrap; color: var(--st); }
.ltag::before { content: ""; width: calc(6px * var(--ui)); height: calc(6px * var(--ui)); background: var(--st); }
.badge-new { display: inline-flex; align-items: center; height: calc(18px * var(--ui)); padding: 0 calc(6px * var(--ui)); border-radius: calc(3px * var(--ui)); background: var(--accent); color: var(--accent-ink); font: 600 calc(11px * var(--ui)) var(--mono); margin-left: calc(6px * var(--ui)); }

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

/* ---------- 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: calc(6px * var(--ui)); left: calc(6px * var(--ui)); right: calc(6px * var(--ui)); display: flex; justify-content: space-between; gap: calc(4px * var(--ui)); z-index: 2; }
.card-air { position: absolute; left: calc(8px * var(--ui)); right: calc(8px * var(--ui)); bottom: calc(8px * var(--ui)); z-index: 2; display: flex; align-items: center; gap: calc(5px * var(--ui)); font: 500 calc(11px * var(--ui)) var(--mono); color: var(--text); }
.card-air .i { width: calc(12px * var(--ui)); height: calc(12px * var(--ui)); color: var(--accent); }
.card-air span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card-mine { position: absolute; left: 0; bottom: calc(30px * var(--ui)); z-index: 2; font: 600 calc(10.5px * var(--ui)) var(--mono); text-transform: uppercase; letter-spacing: .04em; padding: calc(3px * var(--ui)) calc(7px * var(--ui)) calc(3px * var(--ui)) calc(8px * var(--ui)); color: var(--accent-ink); background: var(--st); border-radius: 0 calc(3px * var(--ui)) calc(3px * var(--ui)) 0; }
.card-cover:not(:has(.card-air)) .card-mine { bottom: calc(10px * var(--ui)); }
.card-cover .pbar { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; height: calc(3px * var(--ui)); border-radius: 0; background: rgba(0, 0, 0, 0.55); }
.card-btn {
  position: absolute; right: calc(6px * var(--ui)); bottom: calc(6px * var(--ui)); z-index: 4; width: calc(30px * var(--ui)); height: calc(30px * var(--ui)); border-radius: calc(6px * var(--ui)); display: grid; place-items: center;
  border: 0; background: var(--text); color: var(--bg); opacity: 0; transform: translateY(calc(4px * var(--ui))); transition: opacity .15s, transform .15s, background .15s;
}
.card-btn .i { width: calc(15px * var(--ui)); height: calc(15px * var(--ui)); }
.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: calc(42px * var(--ui)); }
.card-title { margin-top: calc(10px * var(--ui)); font-weight: 500; font-size: calc(14px * var(--ui)); line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; transition: color .15s; }
.card-meta { margin-top: calc(4px * var(--ui)); font: 400 calc(11.5px * var(--ui)) 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: calc(3px * var(--ui)); border-radius: calc(2px * var(--ui)); 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: calc(10px * var(--ui)); border-radius: calc(3px * var(--ui)); margin-top: calc(12px * var(--ui)); }
.sk-line.short { width: 60%; margin-top: calc(8px * var(--ui)); }
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }
.loader { display: flex; justify-content: center; gap: calc(6px * var(--ui)); padding: calc(80px * var(--ui)) 0; }
.loader span { width: calc(8px * var(--ui)); height: calc(8px * var(--ui)); 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: calc(30px * var(--ui)); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.stat { padding: calc(16px * var(--ui)) calc(18px * var(--ui)) calc(14px * var(--ui)); 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(calc(28px * var(--ui)) * var(--display-scale)); line-height: 1.1; }
.stat span { font-size: calc(12px * var(--ui)); color: var(--muted); }
.wgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(calc(340px * var(--ui)), 1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.wcard { display: flex; gap: calc(14px * var(--ui)); padding: calc(14px * var(--ui)); position: relative; box-shadow: inset -1px -1px 0 var(--line); transition: background .15s; }
.wcard:hover { background: var(--surface); }
.wcard-cover img { width: calc(72px * var(--ui)); aspect-ratio: 2 / 3; object-fit: cover; border-radius: calc(4px * var(--ui)); }
.wcard-body { position: relative; flex: 1; min-width: 0; display: flex; flex-direction: column; gap: calc(6px * var(--ui)); }
.wcard-title { font-weight: 600; font-size: calc(15px * var(--ui)); 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 calc(12px * var(--ui)) var(--mono); color: var(--muted); }
.wcard-meta b { color: var(--text); font-weight: 600; }
.wcard-next { display: flex; align-items: center; gap: calc(6px * var(--ui)); font: 400 calc(11.5px * var(--ui)) var(--mono); color: var(--muted); }
.wcard-next .i { width: calc(13px * var(--ui)); height: calc(13px * var(--ui)); }
.wcard-actions { display: flex; gap: calc(6px * var(--ui)); margin-top: auto; padding-top: calc(4px * var(--ui)); }
.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: calc(30px * var(--ui)); padding: calc(56px * var(--ui)) calc(24px * var(--ui)); border: 1px dashed var(--line-2); border-radius: var(--radius); }
.empty-hero h3 { font-size: calc(calc(28px * var(--ui)) * var(--display-scale)); margin: calc(4px * var(--ui)) 0 calc(10px * var(--ui)); }
.empty-hero p { color: var(--muted); max-width: calc(540px * var(--ui)); margin: 0 auto calc(24px * var(--ui)); }
.empty-hero .btn-row { justify-content: center; }
.genre-cloud { display: flex; flex-wrap: wrap; gap: calc(8px * var(--ui)); }
.genre-cloud a { padding: calc(9px * var(--ui)) calc(16px * var(--ui)); border-radius: calc(8px * var(--ui)); border: 1px solid var(--line); font-weight: 500; font-size: calc(14px * var(--ui)); 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: calc(4px * var(--ui)); overflow-x: auto; scrollbar-width: none; margin-bottom: calc(24px * var(--ui)); border-bottom: 1px solid var(--line); }
.tab { display: inline-flex; align-items: center; gap: calc(8px * var(--ui)); padding: calc(10px * var(--ui)) calc(14px * var(--ui)); color: var(--muted); font-weight: 500; font-size: calc(14px * var(--ui)); white-space: nowrap; border-bottom: calc(2px * var(--ui)) 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 calc(11px * var(--ui)) var(--mono); color: var(--faint); }
.tab .i { width: calc(15px * var(--ui)); height: calc(15px * var(--ui)); }
.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: calc(10px * var(--ui)); margin-bottom: calc(24px * var(--ui)); }
.toolbar .input-icon { flex: 1 1 calc(240px * var(--ui)); }
.toolbar .input-icon:has(.smart-hint) .input { padding-right: calc(100px * var(--ui)); }
.smart-hint { position: absolute; right: calc(9px * var(--ui)); max-width: calc(88px * var(--ui)); padding: calc(3px * var(--ui)) calc(7px * var(--ui)); border-radius: calc(999px * var(--ui)); color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--surface)); font: 600 calc(10px * var(--ui)) var(--mono); pointer-events: none; white-space: nowrap; }
.lib-filters { position: relative; }
.lib-filters > summary { list-style: none; cursor: pointer; user-select: none; }
.lib-filters > summary::-webkit-details-marker { display: none; }
.lib-filters > summary b { display: grid; place-items: center; min-width: calc(18px * var(--ui)); height: calc(18px * var(--ui)); padding: 0 calc(5px * var(--ui)); border-radius: calc(999px * var(--ui)); color: var(--accent-ink); background: var(--accent); font: 700 calc(10px * var(--ui)) var(--mono); }
.lib-filters[open] > summary { color: var(--text); border-color: var(--accent); background: var(--surface-2); }
.lib-filter-menu { position: absolute; z-index: 25; top: calc(100% + calc(8px * var(--ui))); right: 0; width: min(calc(560px * var(--ui)), calc(100vw - calc(28px * var(--ui)))); max-height: min(calc(620px * var(--ui)), calc(100vh - calc(150px * var(--ui)))); overflow: auto; padding: calc(16px * var(--ui)); border: 1px solid var(--line-2); border-radius: calc(12px * var(--ui)); background: color-mix(in srgb, var(--surface) 97%, transparent); box-shadow: 0 calc(18px * var(--ui)) calc(48px * var(--ui)) rgba(0, 0, 0, .38); backdrop-filter: blur(calc(16px * var(--ui))); }
.lib-filter-head { display: flex; align-items: center; justify-content: space-between; gap: calc(16px * var(--ui)); margin-bottom: calc(14px * var(--ui)); }
.lib-filter-head strong { font-size: calc(15px * var(--ui)); }
.lib-filter-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(11px * var(--ui)); }
.lib-filter-fields label, .lib-filter-sort { display: grid; gap: calc(5px * var(--ui)); min-width: 0; }
.lib-filter-fields label > span, .lib-filter-sort > span { color: var(--muted); font: 600 calc(10px * var(--ui)) var(--mono); letter-spacing: .05em; text-transform: uppercase; }
.lib-filter-fields .input, .lib-filter-sort .input { width: 100%; }
.lib-filter-sort { margin-top: calc(14px * var(--ui)); padding-top: calc(14px * var(--ui)); border-top: 1px solid var(--line); }
@media (max-width: 560px) {
  .lib-filters { position: static; }
  .toolbar { position: relative; }
  .lib-filter-menu { top: 100%; right: 0; left: 0; width: 100%; }
  .lib-filter-fields { grid-template-columns: 1fr; }
}
.seg { display: inline-flex; padding: calc(3px * var(--ui)); gap: calc(2px * var(--ui)); border-radius: calc(8px * var(--ui)); border: 1px solid var(--line); flex-wrap: wrap; }
.seg button, .seg a { border: 0; background: none; height: calc(32px * var(--ui)); padding: 0 calc(12px * var(--ui)); border-radius: calc(6px * var(--ui)); color: var(--muted); font-weight: 500; font-size: calc(13px * var(--ui)); display: inline-flex; align-items: center; gap: calc(6px * var(--ui)); 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: calc(15px * var(--ui)); height: calc(15px * var(--ui)); }
.filters { display: flex; flex-wrap: wrap; gap: calc(8px * var(--ui)); margin-bottom: calc(8px * var(--ui)); }

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

/* ---------- Sorties ---------- */
.week-nav { display: flex; align-items: center; gap: calc(12px * var(--ui)); margin-right: auto; }
.week-label { display: flex; flex-direction: column; align-items: center; min-width: calc(170px * var(--ui)); line-height: 1.2; }
.week-label b { font-size: calc(calc(20px * var(--ui)) * var(--display-scale)); }
.week-label small { color: var(--muted); font: 400 calc(11.5px * var(--ui)) var(--mono); text-transform: uppercase; letter-spacing: .06em; margin-top: calc(2px * var(--ui)); }
.catchup { margin-bottom: calc(36px * var(--ui)); border: 1px solid var(--line); border-left: calc(3px * var(--ui)) solid var(--accent); border-radius: var(--radius); padding: calc(16px * var(--ui)) calc(18px * var(--ui)); }
.catchup h3 { display: flex; align-items: center; gap: calc(8px * var(--ui)); font-size: calc(15px * var(--ui)); margin-bottom: calc(12px * var(--ui)); }
.catchup h3 .i { width: calc(12px * var(--ui)); height: calc(12px * var(--ui)); color: var(--accent); }
.catchup-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(calc(280px * var(--ui)), 1fr)); gap: calc(6px * var(--ui)) calc(20px * var(--ui)); }
.cu-item { display: flex; align-items: center; gap: calc(12px * var(--ui)); padding: calc(6px * var(--ui)) 0; }
.cu-item img { width: calc(32px * var(--ui)); height: calc(46px * var(--ui)); object-fit: cover; border-radius: calc(3px * var(--ui)); }
.cu-item > div { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cu-title { font-weight: 600; font-size: calc(14px * var(--ui)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cu-title:hover { color: var(--accent); }
.cu-item small { color: var(--muted); font: 400 calc(11.5px * var(--ui)) var(--mono); }
.agenda { display: grid; gap: calc(34px * var(--ui)); }
.ag-head { display: flex; align-items: baseline; gap: calc(12px * var(--ui)); padding-bottom: calc(10px * var(--ui)); border-bottom: 1px solid var(--line); }
.ag-head b { font-size: calc(calc(22px * var(--ui)) * var(--display-scale)); }
.ag-head span { color: var(--muted); font-size: calc(14px * var(--ui)); }
.ag-head .ag-count { margin-left: auto; font: 400 calc(11.5px * var(--ui)) 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: calc(64px * var(--ui)) calc(44px * var(--ui)) 1fr auto; align-items: center; gap: calc(16px * var(--ui)); padding: calc(12px * var(--ui)) calc(4px * var(--ui)); border-bottom: 1px solid var(--line); transition: background .15s; }
.ag-item:hover { background: var(--surface); }
.ag-time { font: 500 calc(16px * var(--ui)) var(--mono); color: var(--text); }
.ag-cover img { width: calc(44px * var(--ui)); height: calc(62px * var(--ui)); object-fit: cover; border-radius: calc(4px * var(--ui)); }
.ag-main { min-width: 0; }
.ag-title { font-weight: 600; font-size: calc(15px * var(--ui)); display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ag-title:hover { color: var(--accent); }
.ag-meta { color: var(--muted); font: 400 calc(12px * var(--ui)) var(--mono); margin-top: calc(3px * var(--ui)); }
.ag-final { display: inline-block; padding: 0 calc(5px * var(--ui)); border-radius: calc(3px * var(--ui)); font: 600 calc(10.5px * var(--ui)) var(--mono); text-transform: uppercase; color: var(--accent-ink); background: var(--amber); }
.ag-when { font: 500 calc(12.5px * var(--ui)) var(--mono); color: var(--muted); white-space: nowrap; }
.ag-when.ok { color: var(--green); }
.ag-done { display: inline-flex; align-items: center; gap: calc(4px * var(--ui)); font: 500 calc(12.5px * var(--ui)) var(--mono); color: var(--faint); }
.ag-done .i { width: calc(14px * var(--ui)); height: calc(14px * var(--ui)); color: var(--green); }
.ag-item.seen { opacity: .5; }
.day-tabs { display: grid; grid-template-columns: repeat(7, 1fr); margin-bottom: calc(28px * var(--ui)); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.day-tab { display: flex; flex-direction: column; align-items: center; padding: calc(10px * var(--ui)) calc(4px * var(--ui)); 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 calc(11px * var(--ui)) var(--mono); text-transform: uppercase; letter-spacing: .08em; }
.day-tab span { font-size: calc(calc(24px * var(--ui)) * var(--display-scale)); color: var(--text); line-height: 1.1; }
.day-tab small { font: 400 calc(11px * var(--ui)) 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: calc(360px * var(--ui)); 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: calc(250px * var(--ui)) 1fr; gap: calc(48px * var(--ui)); margin-top: calc(-150px * var(--ui)); padding-bottom: calc(90px * var(--ui)); }
.detail-side { display: flex; flex-direction: column; gap: calc(16px * var(--ui)); position: sticky; top: calc(var(--top-h) + calc(20px * var(--ui))); align-self: start; max-height: calc(100vh - var(--top-h) - calc(40px * var(--ui))); 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 calc(30px * var(--ui)) calc(60px * var(--ui)) calc(-24px * var(--ui)) rgba(0, 0, 0, 0.95); outline: 1px solid rgba(255, 255, 255, 0.08); outline-offset: -1px; }
.manga-detail-cover { height: auto; aspect-ratio: auto; object-fit: contain; }
.my-box, .side-box { padding: calc(16px * var(--ui)); border-radius: var(--radius); border: 1px solid var(--line); background: var(--bg); }
.my-box > .muted { margin: 0; text-align: center; font-size: calc(14px * var(--ui)); }
.my-head { display: flex; justify-content: space-between; align-items: center; gap: calc(8px * var(--ui)); margin-bottom: calc(10px * var(--ui)); }
.my-edit { width: calc(28px * var(--ui)); height: calc(28px * var(--ui)); margin: calc(-4px * var(--ui)) calc(-6px * var(--ui)) calc(-4px * var(--ui)) 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: calc(14px * var(--ui)); height: calc(14px * var(--ui)); }
.my-line { display: flex; justify-content: space-between; align-items: center; font-size: calc(13px * var(--ui)); color: var(--muted); margin: calc(8px * var(--ui)) 0; }
.my-line b { color: var(--text); display: inline-flex; align-items: center; gap: calc(4px * var(--ui)); font: 600 calc(13px * var(--ui)) var(--mono); }
.my-line .i { width: calc(14px * var(--ui)); height: calc(14px * var(--ui)); color: var(--star); }
.my-source { display: flex; align-items: center; gap: calc(6px * var(--ui)); margin-top: calc(12px * var(--ui)); padding: calc(8px * var(--ui)) calc(10px * var(--ui)); border: 1px solid var(--line-2); border-radius: calc(7px * var(--ui)); font-size: calc(13px * var(--ui)); color: var(--muted); text-decoration: none; }
.my-source b { color: var(--accent); font-weight: 600; }
.my-source .i, .my-source svg { width: calc(13px * var(--ui)); height: calc(13px * var(--ui)); margin-left: auto; color: var(--accent); flex: none; }
.my-source:hover { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, transparent); }
.my-notes { font-style: italic; font-size: calc(14px * var(--ui)); color: var(--muted); margin: calc(12px * var(--ui)) 0 0; padding-left: calc(12px * var(--ui)); border-left: calc(2px * var(--ui)) solid var(--line-2); white-space: pre-wrap; }
.side-box h4 { font: 500 calc(11px * var(--ui)) var(--mono); text-transform: uppercase; letter-spacing: .1em; color: var(--muted); margin-bottom: calc(12px * var(--ui)); }
.stream { display: flex; align-items: center; gap: calc(10px * var(--ui)); padding: calc(8px * var(--ui)) 0; font-weight: 500; font-size: calc(14px * var(--ui)); border-top: 1px solid var(--line); transition: color .15s; }
.side-box h4 + .stream { border-top: 0; }
.stream:hover { color: var(--accent); }
.stream img { width: calc(22px * var(--ui)); height: calc(22px * var(--ui)); border-radius: calc(5px * var(--ui)); padding: calc(3px * var(--ui)); background: var(--sc); }
.stream span { flex: 1; }
.stream small { color: var(--muted); font: 400 calc(11px * var(--ui)) var(--mono); }
.stream .i { width: calc(14px * var(--ui)); height: calc(14px * var(--ui)); color: var(--faint); }
.facts { margin: 0; display: grid; gap: calc(9px * var(--ui)); }
.facts div { display: flex; justify-content: space-between; gap: calc(12px * var(--ui)); font-size: calc(13px * var(--ui)); }
.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: calc(3px * var(--ui)); transition: color .15s, text-decoration-color .15s; }
.studio-link:hover { color: var(--accent); text-decoration-color: currentColor; }
.facts .studio-fact { flex-direction: column; gap: calc(7px * var(--ui)); margin-top: calc(3px * var(--ui)); padding-top: calc(11px * var(--ui)); border-top: 1px solid var(--line); }
.studio-links { display: grid; width: 100%; gap: calc(6px * var(--ui)); }
.studio-links a { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: calc(8px * var(--ui)); width: 100%; min-height: calc(34px * var(--ui)); padding: calc(7px * var(--ui)) calc(9px * var(--ui)); border: 1px solid color-mix(in srgb, var(--accent) 32%, transparent); border-radius: calc(7px * var(--ui)); color: var(--accent); text-align: left; line-height: 1.25; text-decoration: none; }
.studio-links a span { min-width: 0; overflow-wrap: anywhere; }
.studio-links a:hover { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); }
.studio-links svg { width: calc(13px * var(--ui)); height: calc(13px * var(--ui)); flex: none; }
.studio-head { margin: calc(8px * var(--ui)) 0 calc(28px * var(--ui)); }
.studio-head .eyebrow { display: block; margin-bottom: calc(7px * var(--ui)); color: var(--accent); font: 600 calc(11px * var(--ui)) var(--mono); letter-spacing: .11em; text-transform: uppercase; }
.studio-head h2 { margin: 0 0 calc(6px * var(--ui)); font-size: clamp(calc(28px * var(--ui)), 4vw, calc(48px * var(--ui))); }
.studio-head p { margin: 0; }
.detail-main { min-width: 0; padding-top: calc(70px * var(--ui)); }
.detail-main .section { margin-top: calc(40px * var(--ui)); }
.detail-main .credit { margin-top: calc(28px * var(--ui)); }
.detail-title { font-size: calc(clamp(calc(34px * var(--ui)), 4.6vw, calc(58px * var(--ui))) * var(--display-scale)); line-height: 1.02; }
.detail-sub { color: var(--muted); margin: calc(10px * var(--ui)) 0 0; font-size: calc(14px * var(--ui)); }
.hero-meta { display: flex; flex-wrap: wrap; align-items: center; gap: calc(10px * var(--ui)) calc(16px * var(--ui)); margin-top: calc(18px * var(--ui)); color: var(--muted); font: 400 calc(13px * var(--ui)) var(--mono); }
.score-big { display: inline-flex; align-items: center; gap: calc(5px * var(--ui)); font-weight: 600; color: var(--star); }
.score-big .i { width: calc(14px * var(--ui)); height: calc(14px * var(--ui)); }
.rank { font: 500 calc(11px * var(--ui)) var(--mono); text-transform: uppercase; letter-spacing: .04em; color: var(--text); padding: calc(3px * var(--ui)) calc(7px * var(--ui)); border: 1px solid var(--line-2); border-radius: calc(4px * var(--ui)); }
.ost { display: flex; align-items: center; gap: calc(12px * var(--ui)); padding: calc(12px * var(--ui)) calc(14px * var(--ui)); border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); }
.ost[hidden] { display: none; }
.ost-play { flex: none; width: calc(36px * var(--ui)); height: calc(36px * var(--ui)); 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: calc(15px * var(--ui)); height: calc(15px * var(--ui)); }
.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: calc(4px * var(--ui)); color: var(--muted); font: 500 calc(10.5px * var(--ui)) var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.ost-txt small .i { width: calc(11px * var(--ui)); height: calc(11px * var(--ui)); }
.ost-txt b, .ost-txt > span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ost-txt b { font-size: calc(14px * var(--ui)); }
.ost-txt > span { color: var(--muted); font-size: calc(12.5px * var(--ui)); }
.ost.on .ost-txt small { color: var(--accent); }
.ost-src { justify-self: start; display: inline-flex; align-items: center; gap: calc(4px * var(--ui)); margin-top: calc(4px * var(--ui)); color: var(--muted); font-size: calc(11.5px * var(--ui)); text-decoration: none; }
.ost-src:hover { color: var(--text); }
.art-box[hidden] { display: none; }
.art-peek { display: flex; align-items: center; gap: calc(12px * var(--ui)); width: 100%; padding: calc(12px * var(--ui)) calc(14px * var(--ui)); 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: calc(15px * var(--ui)); height: calc(15px * var(--ui)); margin-left: auto; color: var(--faint); transition: transform .2s, color .15s; }
.art-peek:hover > .i { color: var(--text); transform: translateX(calc(2px * var(--ui))); }
.art-stack { position: relative; flex: none; width: calc(52px * var(--ui)); height: calc(40px * var(--ui)); }
.art-stack img { position: absolute; top: 0; left: 0; width: calc(40px * var(--ui)); height: calc(40px * var(--ui)); object-fit: cover; border-radius: calc(6px * var(--ui)); background: #f3efe6; border: calc(2px * var(--ui)) solid var(--bg); box-shadow: 0 calc(4px * var(--ui)) calc(10px * var(--ui)) calc(-4px * var(--ui)) 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(calc(7px * var(--ui))) rotate(6deg); }
.art-stack img:nth-child(3) { z-index: 1; transform: translateX(calc(13px * var(--ui))) rotate(12deg); }
.art-peek:hover .art-stack img:nth-child(2) { transform: translateX(calc(9px * var(--ui))) rotate(9deg); }
.art-peek:hover .art-stack img:nth-child(3) { transform: translateX(calc(17px * var(--ui))) rotate(17deg); }
.art-txt { display: grid; min-width: 0; line-height: 1.25; }
.art-txt small { display: inline-flex; align-items: center; gap: calc(4px * var(--ui)); color: var(--muted); font: 500 calc(10.5px * var(--ui)) var(--mono); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.art-txt small .i { width: calc(11px * var(--ui)); height: calc(11px * var(--ui)); }
.art-txt b { font-size: calc(14px * var(--ui)); }
.art-txt > span { color: var(--muted); font-size: calc(12px * var(--ui)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.modal.wide.art-modal { width: min(calc(1100px * var(--ui)), 100%); padding: calc(22px * var(--ui)) calc(22px * var(--ui)) calc(18px * var(--ui)); }
.art-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: calc(12px * var(--ui)) calc(20px * var(--ui)); margin: 0 calc(44px * var(--ui)) calc(14px * var(--ui)) 0; }
.art-head small { display: block; color: var(--muted); font: 500 calc(10.5px * var(--ui)) var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.art-head b { font-size: calc(18px * var(--ui)); }
.art-filters { display: flex; flex-wrap: wrap; gap: calc(6px * var(--ui)); }
.art-filters button { padding: calc(5px * var(--ui)) calc(10px * var(--ui)); border: 1px solid var(--line-2); border-radius: calc(999px * var(--ui)); background: none; color: var(--muted); font: 500 calc(12px * var(--ui)) var(--font); cursor: pointer; }
.art-filters button i { font: 400 calc(11px * var(--ui)) 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: calc(40px * var(--ui)) 1fr calc(40px * var(--ui)); align-items: center; gap: calc(8px * var(--ui)); }
.art-view { display: flex; align-items: center; justify-content: center; height: min(64vh, calc(620px * var(--ui))); border-radius: calc(10px * var(--ui)); 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: calc(40px * var(--ui)); height: calc(40px * var(--ui)); 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: calc(18px * var(--ui)); height: calc(18px * var(--ui)); }
.art-bar { display: flex; flex-wrap: wrap; align-items: center; gap: calc(6px * var(--ui)) calc(14px * var(--ui)); margin: calc(10px * var(--ui)) calc(2px * var(--ui)); color: var(--muted); font: 400 calc(12px * var(--ui)) var(--mono); }
.art-kind { color: var(--text); }
.art-links { display: flex; gap: calc(12px * var(--ui)); margin-left: auto; }
.art-links a { display: inline-flex; align-items: center; gap: calc(4px * var(--ui)); color: var(--muted); }
.art-links a:hover { color: var(--text); }
.art-links .i { width: calc(12px * var(--ui)); height: calc(12px * var(--ui)); }
.art-strip { display: flex; gap: calc(6px * var(--ui)); overflow-x: auto; padding: calc(4px * var(--ui)) calc(2px * var(--ui)) calc(8px * var(--ui)); scroll-snap-type: x proximity; scrollbar-width: thin; }
.art-strip button { flex: none; width: calc(84px * var(--ui)); height: calc(60px * var(--ui)); padding: 0; border: calc(2px * var(--ui)) solid transparent; border-radius: calc(6px * var(--ui)); 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: calc(16px * var(--ui)) calc(12px * var(--ui)) calc(12px * var(--ui)); }
  .art-stage { grid-template-columns: 1fr; }
  .art-nav { display: none; }
  .art-view { height: min(58vh, calc(460px * var(--ui))); }
  .art-strip button { width: calc(68px * var(--ui)); height: calc(50px * var(--ui)); }
}
.ost-src .i { width: calc(12px * var(--ui)); height: calc(12px * var(--ui)); }
.anime-viewers { display: flex; align-items: center; min-height: calc(34px * var(--ui)); gap: calc(10px * var(--ui)); margin-top: calc(12px * var(--ui)); }
.anime-viewers-label { color: var(--muted); font: 500 calc(10px * var(--ui)) var(--mono); text-transform: uppercase; letter-spacing: .08em; }
.anime-viewer-list { display: flex; align-items: center; padding-left: calc(6px * var(--ui)); }
.anime-viewer { position: relative; width: calc(30px * var(--ui)); height: calc(30px * var(--ui)); margin-left: calc(-6px * var(--ui)); display: grid; place-items: center; border: calc(2px * var(--ui)) 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(calc(-3px * var(--ui))); border-color: var(--accent); outline: none; }
.anime-viewer::after { content: attr(data-name); position: absolute; left: 50%; bottom: calc(100% + calc(7px * var(--ui))); z-index: 3; padding: calc(4px * var(--ui)) calc(7px * var(--ui)); border: 1px solid var(--line-2); border-radius: calc(4px * var(--ui)); color: var(--text); background: var(--surface-3); box-shadow: 0 calc(8px * var(--ui)) calc(20px * var(--ui)) rgba(0, 0, 0, .35); font: 500 calc(10px * var(--ui)) var(--mono); white-space: nowrap; pointer-events: none; opacity: 0; transform: translate(-50%, calc(3px * var(--ui))); 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: calc(14px * var(--ui)); height: calc(14px * var(--ui)); }
.anime-viewers-more { color: var(--muted); font: 500 calc(11px * var(--ui)) var(--mono); }
.continuation-card { --tone: var(--muted); position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: calc(10px * var(--ui)); min-height: calc(68px * var(--ui)); margin-top: calc(18px * var(--ui)); padding: calc(10px * var(--ui)) calc(12px * var(--ui)); overflow: hidden; border: 1px solid color-mix(in srgb, var(--tone) 32%, var(--line)); border-left: calc(2px * var(--ui)) solid var(--tone); border-radius: calc(8px * var(--ui)); 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: calc(34px * var(--ui)); height: calc(34px * var(--ui)); display: grid; place-items: center; border-radius: 50%; background: color-mix(in srgb, var(--tone) 12%, transparent); color: var(--tone); }
.continuation-icon .i { width: calc(17px * var(--ui)); height: calc(17px * var(--ui)); }
.continuation-copy { min-width: 0; }
.continuation-copy .qz-kicker { color: var(--tone); font-size: calc(9px * var(--ui)); }
.continuation-copy h3 { margin-top: 1px; font-size: calc(16px * var(--ui)); }
.continuation-copy p { margin: calc(2px * var(--ui)) 0 0; color: var(--muted); font-size: calc(11.5px * var(--ui)); }
.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: calc(36px * var(--ui)); height: calc(50px * var(--ui)); border-radius: calc(4px * var(--ui)); overflow: hidden; }
.continuation-cover img { width: 100%; height: 100%; object-fit: cover; }
.verdict { margin-top: calc(30px * var(--ui)); padding: calc(20px * var(--ui)) calc(22px * var(--ui)); border: 1px solid var(--line); border-left: calc(3px * var(--ui)) solid currentColor; border-radius: var(--radius); background: var(--bg); }
.verdict-head { display: flex; align-items: center; gap: calc(12px * var(--ui)); }
.verdict-dot { width: calc(10px * var(--ui)); height: calc(10px * var(--ui)); background: currentColor; flex: none; }
.verdict-head small { display: block; font: 500 calc(11px * var(--ui)) var(--mono); text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }
.verdict-head b { font-size: calc(calc(24px * var(--ui)) * var(--display-scale)); line-height: 1.1; }
.verdict p { color: var(--text); margin: calc(10px * var(--ui)) 0 calc(16px * var(--ui)); }
.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: calc(12px * var(--ui)) calc(14px * var(--ui)) calc(2px * var(--ui)) 0; }
.verdict-rows div + div { padding-left: calc(14px * var(--ui)); border-left: 1px solid var(--line); }
.verdict-rows dt { font: 500 calc(10.5px * var(--ui)) var(--mono); text-transform: uppercase; letter-spacing: .1em; color: var(--muted); margin-bottom: calc(6px * var(--ui)); }
.verdict-rows dd { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: calc(6px * var(--ui)); font-size: calc(14px * var(--ui)); font-weight: 500; }
.verdict-rows a:hover { color: var(--accent); }
.next-eps { display: grid; grid-template-columns: repeat(auto-fill, minmax(calc(200px * var(--ui)), 1fr)); gap: 0 calc(24px * var(--ui)); border-top: 1px solid var(--line); }
.next-ep { padding: calc(12px * var(--ui)) 0; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; }
.next-ep b { font: 600 calc(13px * var(--ui)) var(--mono); }
.next-ep span { font-size: calc(13px * var(--ui)); }
.next-ep small { color: var(--muted); font: 400 calc(11.5px * var(--ui)) var(--mono); }
.desc { color: #d8d3c8; line-height: 1.75; font-size: calc(15.5px * var(--ui)); max-width: calc(980px * var(--ui)); }
.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: calc(14px * var(--ui)); margin-top: calc(12px * var(--ui)); }
.side-synopsis .desc { font-size: calc(13px * var(--ui)); line-height: 1.6; }
.side-synopsis .desc.clamp { -webkit-line-clamp: 5; }
.side-synopsis .desc-tools { gap: calc(10px * var(--ui)); flex-wrap: wrap; margin-top: calc(8px * var(--ui)); }
.side-trailer .trailer { border-radius: var(--radius-sm); }
.side-disclosure { padding: 0; overflow: hidden; }
.side-disclosure summary { display: flex; align-items: center; justify-content: space-between; gap: calc(10px * var(--ui)); padding: calc(16px * var(--ui)); color: var(--muted); cursor: pointer; list-style: none; font: 500 calc(11px * var(--ui)) var(--mono); text-transform: uppercase; letter-spacing: .1em; transition: color .15s, background .15s; }
.side-disclosure summary::-webkit-details-marker { display: none; }
.side-disclosure summary:hover { color: var(--text); background: var(--surface); }
.side-disclosure summary:focus-visible { outline: calc(2px * var(--ui)) solid var(--accent); outline-offset: calc(-2px * var(--ui)); }
.side-disclosure summary .i { width: calc(14px * var(--ui)); height: calc(14px * var(--ui)); flex: none; transition: transform .2s ease; }
.side-disclosure[open] summary .i { transform: rotate(180deg); }
.side-disclosure-content { padding: 0 calc(16px * var(--ui)) calc(16px * var(--ui)); }
.translated-label { padding: calc(3px * var(--ui)) calc(7px * var(--ui)); border-radius: calc(999px * var(--ui)); background: color-mix(in srgb, var(--green) 14%, transparent); color: var(--green); font: 600 calc(10px * var(--ui)) var(--mono); text-transform: uppercase; letter-spacing: .05em; }
.spoiler { background: var(--surface-3); color: transparent; border-radius: calc(3px * var(--ui)); cursor: pointer; transition: color .2s; }
.spoiler.shown { color: inherit; background: transparent; }
.trailer { display: grid; place-items: center; width: 100%; max-width: calc(640px * var(--ui)); 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: calc(64px * var(--ui)); height: calc(64px * var(--ui)); border-radius: 50%; display: grid; place-items: center; background: var(--accent); transition: transform .15s; }
.trailer:hover span { transform: scale(1.06); }
.trailer .i { width: calc(24px * var(--ui)); height: calc(24px * var(--ui)); color: var(--accent-ink); margin-left: calc(4px * var(--ui)); }
.chars { display: grid; grid-template-columns: repeat(auto-fill, minmax(calc(260px * var(--ui)), 1fr)); gap: 0 calc(24px * var(--ui)); border-top: 1px solid var(--line); }
.char-card { display: flex; align-items: center; gap: calc(12px * var(--ui)); padding: calc(8px * var(--ui)) 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: calc(44px * var(--ui)); height: calc(60px * var(--ui)); object-fit: cover; border-radius: calc(4px * var(--ui)); }
.char-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.char-txt b { font-size: calc(14px * var(--ui)); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color .15s; }
.char-txt small { font: 400 calc(11.5px * var(--ui)) var(--mono); color: var(--muted); }
.char-txt .va { color: var(--faint); font-family: var(--font); font-size: calc(12px * var(--ui)); }
.va-img { width: calc(36px * var(--ui)); height: calc(36px * var(--ui)); object-fit: cover; border-radius: 50%; opacity: .8; filter: grayscale(.5); }
.src-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(calc(280px * var(--ui)), 1fr)); gap: 0 calc(24px * var(--ui)); border-top: 1px solid var(--line); }
.src { display: flex; gap: calc(12px * var(--ui)); padding: calc(10px * var(--ui)) 0; border-bottom: 1px solid var(--line); }
.src img { width: calc(44px * var(--ui)); height: calc(62px * var(--ui)); object-fit: cover; border-radius: calc(4px * var(--ui)); }
.src div { display: flex; flex-direction: column; align-items: flex-start; gap: calc(4px * var(--ui)); min-width: 0; }
.src b { font-size: calc(14px * var(--ui)); font-weight: 600; }
.src small { color: var(--muted); font: 400 calc(11.5px * var(--ui)) var(--mono); }
.anime-seen { display: inline-flex; align-items: center; gap: calc(4px * var(--ui)); color: var(--muted); font: 500 calc(10px * var(--ui)) var(--mono); text-transform: uppercase; letter-spacing: .06em; }
.anime-seen .i { width: calc(11px * var(--ui)); height: calc(11px * var(--ui)); color: color-mix(in srgb, var(--green) 65%, var(--muted)); stroke-width: 2.5; }
.staff { display: grid; grid-template-columns: repeat(auto-fill, minmax(calc(220px * var(--ui)), 1fr)); gap: calc(12px * var(--ui)) calc(24px * var(--ui)); }
.staff-item { display: flex; align-items: center; gap: calc(10px * var(--ui)); }
.staff-item img { width: calc(38px * var(--ui)); height: calc(38px * var(--ui)); border-radius: 50%; object-fit: cover; filter: grayscale(.4); }
.staff-item b { display: block; font-size: calc(14px * var(--ui)); font-weight: 600; }
.staff-item small { color: var(--muted); font-size: calc(12px * var(--ui)); }
.credit { margin-top: calc(56px * var(--ui)); color: var(--faint); font: 400 calc(11.5px * var(--ui)) var(--mono); text-transform: uppercase; letter-spacing: .06em; }
.credit a { color: var(--muted); text-decoration: underline; text-underline-offset: calc(3px * var(--ui)); }

/* ---------- Modales ---------- */
.modal-wrap { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: calc(20px * var(--ui)); 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(calc(560px * var(--ui)), 100%); background: var(--bg-2); border: 1px solid var(--line-2); border-radius: calc(14px * var(--ui)); box-shadow: 0 calc(40px * var(--ui)) calc(100px * var(--ui)) calc(-20px * var(--ui)) rgba(0, 0, 0, 0.9); overflow: hidden; transform: translateY(calc(10px * var(--ui))); transition: transform .2s cubic-bezier(.2, .8, .2, 1); margin: auto; }
.modal.wide { width: min(calc(900px * var(--ui)), 100%); padding: calc(26px * var(--ui)); }
.modal-wrap.in .modal { transform: none; }
.modal-close { position: absolute; top: calc(12px * var(--ui)); right: calc(12px * var(--ui)); z-index: 5; background: rgba(14, 13, 11, 0.8); }
.ed-head { position: relative; display: flex; align-items: flex-end; gap: calc(16px * var(--ui)); padding: calc(64px * var(--ui)) calc(22px * var(--ui)) calc(16px * var(--ui)); }
.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: calc(76px * var(--ui)); aspect-ratio: 2 / 3; object-fit: cover; border-radius: calc(4px * var(--ui)); box-shadow: 0 calc(10px * var(--ui)) calc(30px * var(--ui)) rgba(0, 0, 0, 0.6); }
.ed-title { position: relative; min-width: 0; }
.ed-title h3 { font-size: calc(calc(22px * var(--ui)) * var(--display-scale)); line-height: 1.05; }
.ed-title p { margin: calc(8px * var(--ui)) 0 0; color: var(--muted); font: 400 calc(12px * var(--ui)) var(--mono); display: flex; flex-wrap: wrap; gap: calc(8px * var(--ui)); align-items: center; }
.ed-body { padding: calc(4px * var(--ui)) calc(22px * var(--ui)) calc(4px * var(--ui)); }
.field-label { display: flex; justify-content: space-between; font: 500 calc(11px * var(--ui)) var(--mono); text-transform: uppercase; letter-spacing: .1em; color: var(--muted); margin: calc(18px * var(--ui)) 0 calc(8px * var(--ui)); }
.field-label .muted { text-transform: none; letter-spacing: 0; color: var(--star); font-size: calc(12px * var(--ui)); }
.chips { display: flex; flex-wrap: wrap; gap: calc(6px * var(--ui)); }
.chip { height: calc(32px * var(--ui)); padding: 0 calc(12px * var(--ui)); border-radius: calc(6px * var(--ui)); border: 1px solid var(--line-2); background: transparent; color: var(--muted); font-weight: 500; font-size: calc(13px * var(--ui)); 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 calc(20px * var(--ui)); }
.stepper { display: flex; align-items: center; gap: calc(8px * var(--ui)); }
.stepper input { width: calc(64px * var(--ui)); height: calc(36px * var(--ui)); text-align: center; border-radius: calc(6px * var(--ui)); border: 1px solid var(--line); background: var(--surface); color: var(--text); font: 600 calc(16px * var(--ui)) var(--mono); outline: none; -moz-appearance: textfield; }
.stepper input::-webkit-inner-spin-button { -webkit-appearance: none; }
.stepper .muted { font-family: var(--mono); font-size: calc(13px * var(--ui)); }
.stars { display: flex; gap: 1px; }
.stars button { padding: 0; border: 0; background: none; color: var(--surface-3); width: calc(22px * var(--ui)); height: calc(22px * var(--ui)); position: relative; }
.stars .i { width: calc(22px * var(--ui)); height: calc(22px * var(--ui)); 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: calc(10px * var(--ui)); margin-top: calc(8px * var(--ui)); }
input[type="range"] { flex: 1; accent-color: var(--accent); }
.toggle { display: inline-flex; align-items: center; gap: calc(10px * var(--ui)); margin-top: calc(18px * var(--ui)); font-weight: 500; font-size: calc(14px * var(--ui)); cursor: pointer; user-select: none; }
.toggle input { display: none; }
.toggle-ui { width: calc(36px * var(--ui)); height: calc(20px * var(--ui)); border-radius: calc(99px * var(--ui)); background: var(--surface-3); position: relative; transition: background .15s; }
.toggle-ui::after { content: ""; position: absolute; top: calc(3px * var(--ui)); left: calc(3px * var(--ui)); width: calc(14px * var(--ui)); height: calc(14px * var(--ui)); 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(calc(16px * var(--ui))); background: var(--accent-ink); }
.toggle .i { width: calc(16px * var(--ui)); height: calc(16px * var(--ui)); color: var(--accent); }
.ed-foot { display: flex; justify-content: space-between; align-items: center; gap: calc(10px * var(--ui)); padding: calc(16px * var(--ui)) calc(22px * var(--ui)) calc(20px * var(--ui)); margin-top: calc(12px * var(--ui)); border-top: 1px solid var(--line); }
.ed-foot-r { display: flex; gap: calc(8px * var(--ui)); }
.char { display: grid; grid-template-columns: calc(200px * var(--ui)) 1fr; gap: calc(26px * var(--ui)); }
.char-img { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; border-radius: var(--radius-sm); }
.char-info h3 { font-size: calc(calc(32px * var(--ui)) * var(--display-scale)); line-height: 1; padding-right: calc(40px * var(--ui)); }
.char-info > .muted { margin: calc(6px * var(--ui)) 0 calc(16px * var(--ui)); font-size: calc(14px * var(--ui)); }
.char-info .facts { grid-template-columns: repeat(auto-fill, minmax(calc(140px * var(--ui)), 1fr)); gap: 0 calc(16px * var(--ui)); margin-bottom: calc(16px * var(--ui)); border-top: 1px solid var(--line); }
.char-info .facts div { flex-direction: column; gap: 0; padding: calc(8px * var(--ui)) 0; border-bottom: 1px solid var(--line); }
.char-info .facts dt { font: 500 calc(10.5px * var(--ui)) var(--mono); text-transform: uppercase; letter-spacing: .08em; }
.char-info .facts dd { text-align: left; }
.char-info .desc { font-size: calc(14.5px * var(--ui)); margin-bottom: calc(10px * var(--ui)); }
.char-info .desc-facts { margin-bottom: calc(14px * var(--ui)); line-height: 1.45; }
.va-line { display: flex; align-items: center; gap: calc(10px * var(--ui)); margin-bottom: calc(16px * var(--ui)); }
.va-line img { width: calc(38px * var(--ui)); height: calc(38px * var(--ui)); border-radius: 50%; object-fit: cover; }
.va-line small { display: block; font: 400 calc(10.5px * var(--ui)) var(--mono); text-transform: uppercase; letter-spacing: .08em; }
.sub-h { margin: calc(26px * var(--ui)) 0 calc(12px * var(--ui)); font-size: calc(15px * var(--ui)); }
.mini-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(calc(108px * var(--ui)), 1fr)); gap: calc(16px * var(--ui)); }
.mini img { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; border-radius: calc(4px * var(--ui)); }
.mini:hover span { color: var(--accent); }
.mini span { font-size: calc(13px * var(--ui)); font-weight: 500; margin-top: calc(6px * var(--ui)); line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mini small { color: var(--muted); font: 400 calc(11px * var(--ui)) 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 - calc(40px * var(--ui))); }
  .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: calc(90px * var(--ui)); 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% - calc(36px * var(--ui))), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - calc(36px * var(--ui))), transparent); }
  .char-modal .translation-tools { flex: none; }
  .char-modal .sub-h { flex: none; margin: calc(18px * var(--ui)) 0 calc(10px * var(--ui)); }
  .char-modal .mini-grid { flex: none; display: flex; gap: calc(14px * var(--ui)); overflow-x: auto; scrollbar-width: none; }
  .char-modal .mini-grid::-webkit-scrollbar { display: none; }
  .char-modal .mini { flex: 0 0 calc(100px * var(--ui)); }
}
.video { aspect-ratio: 16 / 9; border-radius: calc(8px * var(--ui)); overflow: hidden; background: #000; }
.video iframe { width: 100%; height: 100%; border: 0; }

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

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

/* ---------- Connexion ---------- */
.login { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: calc(20px * var(--ui)); }
.login-bg { display: none; }
.login-card { width: min(calc(420px * var(--ui)), 100%); text-align: center; display: grid; gap: calc(12px * var(--ui)); padding: calc(28px * var(--ui)); border: 1px solid var(--line); border-radius: calc(24px * var(--ui)); background: color-mix(in srgb, var(--surface) 94%, transparent); box-shadow: 0 calc(24px * var(--ui)) calc(80px * var(--ui)) #0006; }
.login-card h1 { font-size: calc(calc(52px * var(--ui)) * var(--display-scale)); line-height: 1; }
.login-card h1 em { color: var(--accent); }
.login-card p.muted { margin: 0; }
.login-intro { margin-bottom: calc(8px * var(--ui)) !important; }
.auth-tabs { display: grid; grid-template-columns: 1fr 1fr; padding: calc(4px * var(--ui)); margin: calc(8px * var(--ui)) 0; border-radius: calc(12px * var(--ui)); background: var(--surface-2); }
.auth-tabs[hidden] { display: none; }
.auth-tabs button { min-height: calc(38px * var(--ui)); border: 0; border-radius: calc(9px * var(--ui)); background: transparent; color: var(--muted); font: 600 calc(13px * var(--ui)) var(--font); cursor: pointer; }
.auth-tabs button.on { background: var(--surface-3); color: var(--text); box-shadow: 0 calc(2px * var(--ui)) calc(10px * var(--ui)) #0003; }
.google-login { display: grid; gap: calc(9px * var(--ui)); }
.google-login[hidden] { display: none; }
.google-btn { display: flex; align-items: center; justify-content: center; gap: calc(11px * var(--ui)); border-color: #747775; background: #fff; color: #1f1f1f; font-weight: 600; }
.google-btn:hover { border-color: #a8c7fa; background: #f8faff; color: #1f1f1f; }
.google-btn svg { width: calc(18px * var(--ui)); height: calc(18px * var(--ui)); flex: none; }
.auth-or { display: flex; align-items: center; gap: calc(12px * var(--ui)); color: var(--faint); font-size: calc(11px * var(--ui)); text-transform: uppercase; letter-spacing: .12em; }
.auth-or::before, .auth-or::after { content: ""; height: 1px; flex: 1; background: var(--line); }
.auth-form { display: grid; gap: calc(12px * var(--ui)); text-align: left; }
.auth-form[hidden] { display: none; }
.auth-form label { display: grid; gap: calc(6px * var(--ui)); color: var(--muted); font-size: calc(12px * var(--ui)); font-weight: 600; }
.login-card .input { height: calc(46px * var(--ui)); font-size: calc(15px * var(--ui)); }
.pw-field { position: relative; display: grid; }
.pw-field .input { padding-right: calc(46px * var(--ui)); }
.pw-eye { position: absolute; top: 50%; right: calc(6px * var(--ui)); transform: translateY(-50%); width: calc(36px * var(--ui)); height: calc(36px * var(--ui)); display: grid; place-items: center; border: 0; border-radius: calc(6px * var(--ui)); 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: calc(2px * var(--ui)) solid var(--accent); outline-offset: calc(-2px * var(--ui)); }
.pw-eye .i { width: calc(18px * var(--ui)); height: calc(18px * var(--ui)); }
.pw-field input::-ms-reveal { display: none; }
.login-card .verify-code { text-align: center; font: 700 calc(24px * var(--ui)) var(--mono); letter-spacing: .28em; }
.login-card .btn { height: calc(46px * var(--ui)); }
.auth-form > .btn { margin-top: calc(3px * var(--ui)); }
.auth-form .link { justify-self: center; }
.auth-form small { line-height: 1.45; text-align: center; }
.verify-mark { width: calc(48px * var(--ui)); height: calc(48px * var(--ui)); 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: calc(22px * var(--ui)); }
.auth-form > b, .auth-form > p { text-align: center; }
.login-err { color: var(--red); min-height: 1.2em; margin: 0; font-size: calc(14px * var(--ui)); }
.auth-pair { display: grid; grid-template-columns: 1fr 1fr; gap: calc(10px * var(--ui)); }
/* inscription : la carte tient dans l'écran sans défiler (pas de grand sceau, d'intro ni de compte d'exemple) */
.login-card[data-mode="register"] { gap: calc(10px * var(--ui)); padding: calc(24px * var(--ui)) calc(28px * var(--ui)); }
.login-card[data-mode="register"] .seal.big,
.login-card[data-mode="register"] .login-intro,
.login-card[data-mode="register"] .demo-try { display: none; }
.login-card[data-mode="register"] h1 { font-size: calc(calc(40px * var(--ui)) * var(--display-scale)); }
.login-card[data-mode="register"] .auth-tabs { margin: calc(4px * var(--ui)) 0; }
.login-card[data-mode="register"] .auth-form { gap: calc(10px * var(--ui)); }
.login-card[data-mode="register"] .auth-form label { gap: calc(5px * var(--ui)); }
.login-card[data-mode="register"] .input,
.login-card[data-mode="register"] .btn { height: calc(42px * var(--ui)); }
.login-card[data-mode="register"] .login-err:empty { min-height: 0; }
.auth-pair label { grid-template-rows: 1fr auto; }
.auth-pair label > span { align-self: end; }
@media (max-width: 480px) {
  .login:has([data-mode="register"]) { padding: calc(12px * var(--ui)); }
  .login-card[data-mode="register"] { padding: calc(18px * var(--ui)) calc(16px * var(--ui)); }
}

/* ---------- 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); }
}
/* libellés du menu gardés tant qu'ils tiennent ; en dessous, l'icône seule (le nom reste en aria-label et en infobulle) */
@media (max-width: 1000px) {
  .nav a span { display: none; }
  .nav a { padding: 0 calc(12px * var(--ui)); }
  .nav a.on::after { left: calc(8px * var(--ui)); right: calc(8px * var(--ui)); }
}
@media (max-width: 900px) {
  :root { --top-h: calc(56px * var(--ui)); }
  .container { padding: 0 calc(16px * var(--ui)); }
  .page { padding-top: calc(var(--top-h) + calc(26px * var(--ui))); }
  .topbar { padding: 0 calc(16px * var(--ui)); gap: calc(12px * var(--ui)); }
  .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: calc(4px * var(--ui)) calc(4px * var(--ui)) calc(calc(4px * var(--ui)) + 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: calc(3px * var(--ui)); padding: calc(7px * var(--ui)) calc(4px * var(--ui)); font-size: calc(10.5px * var(--ui)); color: var(--muted); flex: 1; position: relative; }
  .bottom-nav a.on { color: var(--text); }
  .bottom-nav a.on::before { content: ""; position: absolute; top: calc(-4px * var(--ui)); left: 30%; right: 30%; height: calc(2px * var(--ui)); background: var(--accent); }
  .bottom-nav .i { width: calc(20px * var(--ui)); height: calc(20px * var(--ui)); }
  body { padding-bottom: calc(66px * var(--ui)); }
  body.is-login { padding-bottom: 0; }
  #toasts { bottom: calc(82px * var(--ui)); }
  .page-head h1 .jp { display: none; }
  .stat { padding: calc(12px * var(--ui)) calc(10px * var(--ui)); }
  .stat b { font-size: calc(21px * var(--ui)); }
  .row-scroll { grid-auto-columns: calc(128px * var(--ui)); gap: calc(12px * var(--ui)); }
  .grid { grid-template-columns: repeat(auto-fill, minmax(calc(124px * var(--ui)), 1fr)); gap: calc(22px * var(--ui)) calc(12px * var(--ui)); }
  .card-btn { opacity: 1; transform: none; width: calc(28px * var(--ui)); height: calc(28px * var(--ui)); }
  .wgrid { grid-template-columns: 1fr; }
  .detail-banner { height: calc(220px * var(--ui)); }
  .detail { grid-template-columns: 1fr; margin-top: calc(-120px * var(--ui)); gap: calc(20px * var(--ui)); }
  .detail-side { display: grid; grid-template-columns: calc(120px * var(--ui)) 1fr; align-items: start; gap: calc(14px * var(--ui)); 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: calc(6px * var(--ui)); padding: calc(6px * var(--ui)); }
  .sim-link span { display: none; }
  .detail-main { padding-top: 0; }
  .continuation-card { grid-template-columns: auto minmax(0, 1fr); padding: calc(10px * var(--ui)); }
  .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: calc(40px * var(--ui)) 1fr auto; gap: calc(12px * var(--ui)); }
  .lrow-cover img { width: calc(40px * var(--ui)); height: calc(58px * var(--ui)); }
  .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: calc(50px * var(--ui)) calc(38px * var(--ui)) 1fr; gap: calc(10px * var(--ui)); }
  .ag-cover img { width: calc(38px * var(--ui)); height: calc(54px * var(--ui)); }
  .ag-time { font-size: calc(14px * var(--ui)); }
  .ag-side { grid-column: 3; }
  .day-tab { padding: calc(8px * var(--ui)) calc(2px * var(--ui)); }
  .day-tab span { font-size: calc(22px * var(--ui)); }
  .char { grid-template-columns: 1fr; }
  .char-img { width: calc(140px * var(--ui)); }
  .ed-grid { grid-template-columns: 1fr; }
  .modal-wrap { padding: 0; align-items: end; }
  .modal { border-radius: calc(14px * var(--ui)) calc(14px * var(--ui)) 0 0; max-height: 92vh; overflow-y: auto; }
  .modal.wide { padding: calc(18px * var(--ui)); }
  .filters select { flex: 1 1 calc(140px * var(--ui)); }
  .section { margin-top: calc(42px * var(--ui)); }
}
@media (max-width: 480px) {
  .stats { grid-template-columns: repeat(2, 1fr); }
  .stat:nth-child(n) { border-left: 1px solid var(--line); padding-left: calc(10px * var(--ui)); 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(calc(200px * var(--ui)), 1fr)); gap: calc(10px * var(--ui)); }
.font-pick { text-align: left; padding: calc(14px * var(--ui)) calc(16px * var(--ui)); 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: calc(26px * var(--ui)); line-height: 1.1; letter-spacing: -0.02em; }
.font-pick span { display: block; margin-top: calc(6px * var(--ui)); font-size: calc(13px * var(--ui)); color: var(--muted); }
.font-pick small { display: block; font-size: calc(11px * var(--ui)); color: var(--faint); margin-top: calc(2px * var(--ui)); }

/* ---------- Mon planning (pleine largeur, 2 colonnes) ---------- */
.plan { display: grid; grid-template-columns: minmax(0, 1fr) minmax(calc(320px * var(--ui)), calc(440px * var(--ui))); gap: calc(56px * var(--ui)); align-items: start; }
.plan-main { display: grid; gap: calc(30px * var(--ui)); min-width: 0; }
.plan-side { position: sticky; top: calc(var(--top-h) + calc(20px * var(--ui))); display: grid; gap: calc(18px * var(--ui)); max-height: calc(100vh - var(--top-h) - calc(40px * var(--ui))); overflow-y: auto; padding-right: calc(4px * var(--ui)); }
.ag-week { font: 600 calc(11px * var(--ui)) var(--mono); text-transform: uppercase; letter-spacing: .14em; color: var(--accent); margin-bottom: calc(-14px * var(--ui)); }
.ag-week::before { content: ''; display: inline-block; width: calc(8px * var(--ui)); height: calc(8px * var(--ui)); background: var(--accent); margin-right: calc(10px * var(--ui)); vertical-align: 1px; }
.ag-tag { display: inline-block; padding: 0 calc(6px * var(--ui)); border-radius: calc(3px * var(--ui)); font: 600 calc(10.5px * var(--ui)) 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: calc(10px * var(--ui)); justify-content: flex-end; }
.side-block { border: 1px solid var(--line); border-radius: var(--radius); padding: calc(14px * var(--ui)) calc(16px * var(--ui)); }
.side-block.accent { border-left: calc(3px * var(--ui)) solid var(--accent); }
.side-block h3 { display: flex; align-items: center; gap: calc(8px * var(--ui)); font-size: calc(15px * var(--ui)); margin-bottom: calc(8px * var(--ui)); }
.side-block h3 .i { width: calc(14px * var(--ui)); height: calc(14px * var(--ui)); 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: calc(8px * var(--ui)); }
.side-block[open] summary h3::after { content: '−'; }
.small { font-size: calc(13px * var(--ui)); margin: calc(4px * var(--ui)) 0 calc(8px * var(--ui)); }
@media (max-width: 1100px) {
  .plan { grid-template-columns: 1fr; gap: calc(32px * var(--ui)); }
  .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: calc(6px * var(--ui)); left: calc(6px * var(--ui)); z-index: 2; font: 600 calc(10px * var(--ui)) var(--mono); text-transform: uppercase; letter-spacing: .04em; padding: calc(3px * var(--ui)) calc(6px * var(--ui)); border-radius: calc(3px * var(--ui)); color: var(--accent-ink); background: var(--st); }
.st-COMPLETED.card-tag { background: rgba(238, 234, 225, 0.92); }
.card-new { position: absolute; top: calc(6px * var(--ui)); right: calc(6px * var(--ui)); z-index: 2; min-width: calc(26px * var(--ui)); height: calc(22px * var(--ui)); padding: 0 calc(6px * var(--ui)); display: grid; place-items: center; border-radius: calc(4px * var(--ui)); background: var(--accent); color: var(--accent-ink); font: 700 calc(12px * var(--ui)) 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 calc(12px * var(--ui)) var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--text); padding: calc(6px * var(--ui)) calc(4px * var(--ui)); background: rgba(14, 13, 11, 0.7); }
.ed-hint { margin: calc(8px * var(--ui)) 0 0; font: 400 calc(12px * var(--ui)) var(--mono); color: var(--muted); }

/* ---------- Bibliothèque : séries regroupées ---------- */
.fgroups { display: flex; flex-wrap: wrap; gap: calc(40px * var(--ui)) calc(48px * var(--ui)); align-items: flex-start; }
.fg { min-width: 0; max-width: 100%; }
.fg-head { display: flex; align-items: baseline; gap: calc(12px * var(--ui)); flex-wrap: wrap; padding-bottom: calc(10px * var(--ui)); margin-bottom: calc(14px * var(--ui)); 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: calc(20px * var(--ui)); }
.fg-head span { font: 400 calc(12px * var(--ui)) var(--mono); color: var(--muted); }
.fg-row { display: flex; flex-wrap: wrap; gap: calc(18px * var(--ui)) calc(14px * var(--ui)); }
.fg-row .card { width: calc(128px * var(--ui)); }
.fg-row .card-title { font-size: calc(13px * var(--ui)); }
@media (max-width: 900px) {
  .fgroups { gap: calc(32px * var(--ui)); }
  .fg-row .card { width: calc((100vw - calc(32px * var(--ui)) - calc(28px * var(--ui))) / 3); }
}

/* ---------- Étiquette qui dépasse du haut de la jaquette + jaquettes terminées estompées ---------- */
.card { margin-top: calc(10px * var(--ui)); }
.card-ribbon {
  position: absolute; z-index: 5; top: calc(-10px * var(--ui)); left: calc(8px * var(--ui)); height: calc(20px * var(--ui)); padding: 0 calc(8px * var(--ui)) 0 calc(7px * var(--ui));
  display: inline-flex; align-items: center; gap: calc(5px * var(--ui)); border-radius: calc(4px * var(--ui)) calc(4px * var(--ui)) calc(4px * var(--ui)) 0;
  font: 700 calc(10.5px * var(--ui)) var(--mono); text-transform: uppercase; letter-spacing: .05em;
  color: var(--accent-ink); background: var(--st); box-shadow: 0 calc(4px * var(--ui)) calc(10px * var(--ui)) calc(-4px * var(--ui)) rgba(0, 0, 0, 0.8);
}
.card-ribbon::before { content: ""; width: calc(5px * var(--ui)); height: calc(5px * var(--ui)); 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: calc(4px * var(--ui)); }

/* étiquettes : plus sur l'image, sans point, plus discrètes ; Terminé en vert, En cours en vermillon */
.card { margin-top: calc(4px * var(--ui)); }
.card-ribbon { top: calc(-4px * var(--ui)); left: calc(6px * var(--ui)); height: calc(17px * var(--ui)); padding: 0 calc(6px * var(--ui)); gap: 0; border-radius: calc(3px * var(--ui)); font-size: calc(9.5px * var(--ui)); letter-spacing: .06em; opacity: .82; box-shadow: 0 calc(2px * var(--ui)) calc(6px * var(--ui)) calc(-2px * var(--ui)) 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: calc(7px * var(--ui)); left: calc(7px * var(--ui)); height: calc(20px * var(--ui)); padding: 0 calc(9px * var(--ui)) 0 calc(8px * var(--ui)); gap: calc(5px * var(--ui)); border-radius: calc(999px * var(--ui));
  font: 600 calc(11px * var(--ui)) var(--font); text-transform: none; letter-spacing: 0; opacity: .92;
  box-shadow: 0 calc(2px * var(--ui)) calc(8px * var(--ui)) calc(-2px * var(--ui)) rgba(0, 0, 0, 0.6);
}
.card-ribbon.st-WATCHING { --st: var(--green); }
.card-ribbon.st-WATCHING::before { display: block; width: calc(6px * var(--ui)); height: calc(6px * var(--ui)); 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: calc(4px * var(--ui)); background: rgba(0, 0, 0, 0.6); }
.ed-total { width: calc(120px * var(--ui)); }

/* 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: calc(6px * var(--ui)); border: 0; background: none; color: var(--accent); font: 700 calc(13px * var(--ui)) var(--font); text-transform: uppercase; letter-spacing: .04em; cursor: pointer; padding: calc(2px * var(--ui)) calc(4px * var(--ui)); }
.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: calc(18px * var(--ui)); z-index: 3; }
.back-link { display: inline-flex; align-items: center; gap: calc(6px * var(--ui)); height: calc(32px * var(--ui)); padding: 0 calc(12px * var(--ui)) 0 calc(8px * var(--ui)); border-radius: calc(8px * var(--ui)); background: rgba(14, 13, 11, 0.72); border: 1px solid var(--line-2); color: var(--text); font-size: calc(13px * var(--ui)); font-weight: 500; transition: background .15s, border-color .15s; }
.back-link .i { width: calc(16px * var(--ui)); height: calc(16px * var(--ui)); }
.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: calc(8px * var(--ui)); right: calc(8px * var(--ui)); min-width: 0; width: calc(10px * var(--ui)); height: calc(10px * var(--ui)); padding: 0; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 calc(2px * var(--ui)) 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 calc(28px * var(--ui)); grid-template-columns: repeat(7, 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: calc(2px * var(--ui)); 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: calc(18px * var(--ui)); }
@media (max-width: 900px) {
  .stats.strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .stats.strip .stat.info { display: none; }
  .stats.strip .stat { padding: calc(12px * var(--ui)) calc(10px * var(--ui)); }
  .stats.strip .stat:first-child { padding-left: calc(10px * var(--ui)); }
  .stats.strip .stat:nth-child(3n + 1) { border-left: 0; }
  .stats.strip .stat:nth-child(n + 4) { border-top: 1px solid var(--line); }
}
@media (max-width: 1200px) {
  .stats.strip .stat { border-top: 0; border-left: 1px solid var(--line); padding-left: calc(18px * var(--ui)); }
  .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: calc(30px * var(--ui)); }
.detail-series .fg-head h3 { font-size: calc(17px * var(--ui)); }
.detail-series .card.current .card-cover { outline: calc(2px * var(--ui)) solid var(--accent); outline-offset: calc(2px * var(--ui)); }
.detail-series .card.current .card-title { color: var(--accent); }
.episode-feedback-wait { color: var(--muted); font-size: calc(13px * var(--ui)); }
.episode-comments-box { position: relative; border: 1px solid var(--line); border-radius: calc(10px * var(--ui)); background: var(--surface); }
.episode-feedback-tools { position: absolute; z-index: 1; top: calc(12px * var(--ui)); right: calc(14px * var(--ui)); display: flex; align-items: center; justify-content: flex-end; gap: calc(9px * var(--ui)); flex-wrap: wrap; }
.episode-feedback-tools .input { width: auto; min-width: calc(154px * var(--ui)); padding: calc(7px * var(--ui)) calc(30px * var(--ui)) calc(7px * var(--ui)) calc(10px * var(--ui)); }
.episode-feedback-tools .icon-btn { width: calc(32px * var(--ui)); height: calc(32px * var(--ui)); }
.episode-feedback-tools .i { width: calc(15px * var(--ui)); height: calc(15px * var(--ui)); }
.anilist-thread-head { display: flex; align-items: center; justify-content: space-between; gap: calc(16px * var(--ui)); margin-bottom: calc(10px * var(--ui)); color: var(--muted); font-size: calc(13px * var(--ui)); }
.anilist-thread-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(10px * var(--ui)); }
.anilist-thread-wrap { position: relative; min-width: 0; }
.anilist-thread { display: grid; grid-template-columns: 1fr auto; align-items: start; gap: calc(8px * var(--ui)) calc(14px * var(--ui)); min-height: calc(150px * var(--ui)); padding: calc(15px * var(--ui)) calc(16px * var(--ui)); color: inherit; border: 1px solid var(--line); border-radius: calc(14px * var(--ui)); text-decoration: none; transition: border-color .2s, background .2s; }
.anilist-thread:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); background: color-mix(in srgb, var(--accent) 5%, transparent); }
.anilist-thread-author { display: flex; grid-column: 1; grid-row: 1; align-items: center; gap: calc(9px * var(--ui)); min-width: 0; }
.anilist-thread-author img, .anilist-thread-author > i { width: calc(34px * var(--ui)); height: calc(34px * var(--ui)); flex: 0 0 calc(34px * var(--ui)); border-radius: 50%; object-fit: cover; }
.anilist-thread-author > i { display: grid; place-items: center; background: var(--surface-2); color: var(--muted); font-style: normal; font-weight: 700; }
.anilist-thread-author span { display: grid; min-width: 0; }
.anilist-thread-author b { overflow: hidden; text-overflow: ellipsis; }
.anilist-thread-author small, .anilist-thread-meta { color: var(--muted); font-size: calc(12px * var(--ui)); }
.anilist-thread > strong { grid-column: 1 / 3; min-width: 0; }
.anilist-thread > p { grid-column: 1 / 3; display: -webkit-box; overflow: hidden; margin: 0; color: var(--muted); font-size: calc(13px * var(--ui)); line-height: 1.5; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.anilist-thread-meta { grid-column: 2; grid-row: 1; white-space: nowrap; }
.anilist-thread-meta .i { width: calc(13px * var(--ui)); height: calc(13px * var(--ui)); vertical-align: calc(-2px * var(--ui)); }
.is-spoiler:not(.show-spoiler) > p, .anilist-thread-wrap.is-spoiler:not(.show-spoiler) .anilist-thread > p { filter: blur(calc(7px * var(--ui))); opacity: .65; user-select: none; pointer-events: none; }
.spoiler-card-toggle { display: inline-flex; align-items: center; gap: calc(5px * var(--ui)); }
.spoiler-card-toggle .i { width: calc(14px * var(--ui)); height: calc(14px * var(--ui)); }
.anilist-thread-wrap > .spoiler-card-toggle { position: absolute; right: calc(14px * var(--ui)); bottom: calc(12px * var(--ui)); z-index: 1; padding: calc(4px * var(--ui)) calc(7px * var(--ui)); border: 1px solid var(--line-2); border-radius: var(--radius-sm); background: var(--surface-2); color: var(--text); font-size: calc(11px * var(--ui)); }
.anilist-thread-wrap.is-spoiler .anilist-thread { padding-bottom: calc(44px * var(--ui)); }
.episode-comment-counter { min-width: calc(38px * var(--ui)); text-align: center; font: 500 calc(11px * var(--ui)) var(--mono); color: var(--faint) !important; }
.episode-comments { display: block; }
.episode-comment { position: relative; min-width: 0; min-height: calc(150px * var(--ui)); padding: calc(15px * var(--ui)) calc(16px * var(--ui)) calc(13px * var(--ui)); animation: fadeUp .22s ease both; }
.episode-comment header { display: flex; align-items: center; gap: calc(9px * var(--ui)); padding-right: calc(130px * var(--ui)); }
.episode-comment header img, .episode-comment-avatar { width: calc(34px * var(--ui)); height: calc(34px * var(--ui)); 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: calc(13px * var(--ui)); }
.episode-comment header small { color: var(--faint); font-size: calc(11px * var(--ui)); }
.episode-comment p { margin: calc(12px * var(--ui)) 0 0; color: #d5d0c6; font-size: calc(13.5px * var(--ui)); line-height: 1.55; white-space: pre-line; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.episode-comment-actions { display: flex; align-items: center; flex-wrap: wrap; gap: calc(10px * var(--ui)); margin-top: calc(12px * var(--ui)); }
.episode-comment-actions .link { display: inline-flex; align-items: center; gap: calc(5px * var(--ui)); padding: 0; border: 0; background: none; font-size: calc(12px * var(--ui)); white-space: nowrap; }
.episode-comment-actions .i { width: calc(13px * var(--ui)); height: calc(13px * var(--ui)); }
.episode-comment-translated { padding: calc(3px * var(--ui)) calc(7px * var(--ui)); border-radius: calc(999px * var(--ui)); background: color-mix(in srgb, var(--green) 14%, transparent); color: var(--green) !important; font: 600 calc(10px * var(--ui)) var(--mono); text-transform: uppercase; letter-spacing: .05em; }
@media (max-width: 760px) { .episode-feedback-tools { position: static; justify-content: flex-start; padding: calc(12px * var(--ui)) calc(16px * var(--ui)) 0; } .episode-comment header { padding-right: 0; } .anilist-thread-head { align-items: flex-start; } .anilist-thread-list { grid-template-columns: 1fr; } }

/* bandeau : les états de la bibliothèque et l'onglet transversal Importés */
.stats.strip { grid-template-columns: repeat(7, minmax(0, 1fr)); }
@media (max-width: 480px) {
  .stats.strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats.strip .stat span { font-size: calc(10.5px * var(--ui)); }
  .stats.strip .stat:nth-child(3n + 1) { border-left: 1px solid var(--line); }
  .stats.strip .stat:nth-child(odd) { border-left: 0; }
  .stats.strip .stat:nth-child(n + 3) { border-top: 1px solid var(--line); }
}

/* ================= 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: calc(2px * var(--ui)); 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(calc(-4px * var(--ui))); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(calc(10px * var(--ui))); } }

/* entrée en cascade des jaquettes et des séries */
@keyframes cardIn { from { opacity: 0; transform: translateY(calc(16px * var(--ui))) scale(.97); } }
@keyframes blockIn { from { opacity: 0; transform: translateY(calc(12px * var(--ui))); } }
: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(calc(800px * var(--ui))) 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: calc(-5px * var(--ui)); transition: transform .1s linear, box-shadow .35s; box-shadow: 0 calc(22px * var(--ui)) calc(40px * var(--ui)) calc(-18px * var(--ui)) 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(calc(800px * var(--ui))) scale(.97); transition-duration: .1s; }

/* tampon « 済 » quand on marque terminé */
.stamp {
  position: absolute; z-index: 6; left: 50%; top: 50%; width: calc(64px * var(--ui)); height: calc(64px * var(--ui)); margin: calc(-32px * var(--ui)) 0 0 calc(-32px * var(--ui));
  display: grid; place-items: center; border: calc(3px * var(--ui)) solid var(--accent); border-radius: calc(10px * var(--ui)); color: var(--accent);
  font: 800 calc(34px * var(--ui))/1 var(--jp); background: rgba(14, 13, 11, 0.55); box-shadow: 0 0 0 calc(4px * var(--ui)) 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(calc(800px * var(--ui))) 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 calc(2px * var(--ui)) rgba(14, 13, 11, 0.75), 0 0 0 0 rgba(255, 90, 54, 0.6); } 50% { box-shadow: 0 0 0 calc(2px * var(--ui)) rgba(14, 13, 11, 0.75), 0 0 0 calc(6px * var(--ui)) 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: calc(14px * var(--ui)); right: calc(14px * var(--ui)); bottom: -1px; height: calc(2px * var(--ui)); 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: calc(14px * var(--ui)) calc(20px * var(--ui)); font-size: calc(15px * var(--ui)); }
.toast-seal { display: grid; place-items: center; width: calc(26px * var(--ui)); height: calc(26px * var(--ui)); border-radius: calc(6px * var(--ui)); background: var(--accent); color: var(--accent-ink); font: 800 calc(15px * var(--ui))/1 var(--jp); transform: rotate(-8deg); }
.toast.big .i { display: none; }

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

/* ---------- Chargement : bol de ramen ---------- */
.loader { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(10px * var(--ui)); padding: calc(70px * var(--ui)) 0; }
.loader span:not(.loader-txt) { display: none; }
.loader-txt { font: 500 calc(12px * var(--ui)) var(--mono); color: var(--muted); letter-spacing: .08em; animation: txt 1.8s ease-in-out infinite; }
@keyframes txt { 50% { opacity: .45; } }
.ramen { width: calc(124px * var(--ui)); height: calc(108px * var(--ui)); 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(calc(8px * var(--ui))); } 35% { opacity: .55; } 100% { opacity: 0; transform: translateY(calc(-12px * var(--ui))); } }
.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(calc(9px * var(--ui))); } 50% { transform: translateY(calc(-7px * var(--ui))); } }
.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 calc(4px * var(--ui)) rgba(147, 201, 138, 0.18), 0 0 calc(24px * var(--ui)) calc(-4px * var(--ui)) rgba(147, 201, 138, 0.5); }
.stamp.undo { border-color: var(--red); color: var(--red); box-shadow: 0 0 0 calc(4px * var(--ui)) rgba(236, 111, 93, 0.18), 0 0 calc(24px * var(--ui)) calc(-4px * var(--ui)) rgba(236, 111, 93, 0.5); }

/* notifications avec tampon */
.toast b { font-weight: 700; }
.toast-seal { display: grid; place-items: center; flex: none; width: calc(26px * var(--ui)); height: calc(26px * var(--ui)); border-radius: calc(6px * var(--ui)); font: 800 calc(15px * var(--ui))/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(calc(16px * var(--ui)), 3.2vw, calc(56px * var(--ui))); bottom: calc(175px * var(--ui)); width: calc(38px * var(--ui)); height: calc(38px * var(--ui)); 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: calc(140px * var(--ui)); } }
.banner-video iframe { width: max(100%, calc(640px * var(--ui))); 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: calc(14px * var(--ui)); max-width: 46ch; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.toast-body small { font-size: calc(13px * var(--ui)); font-weight: 500; opacity: .75; }
.toast.sealed { padding: calc(11px * var(--ui)) calc(14px * var(--ui)) calc(11px * var(--ui)) calc(12px * var(--ui)); gap: calc(12px * var(--ui)); }
.toast-seal { width: calc(30px * var(--ui)); height: calc(30px * var(--ui)); font-size: calc(17px * var(--ui)); }

/* fiche : bannière plus haute quand une bande-annonce joue, vidéo moins recadrée */
.detail-banner:has(.banner-video) { --bh: clamp(calc(440px * var(--ui)), 70vh, calc(760px * var(--ui))); height: var(--bh); }
.banner-video iframe { width: max(100%, calc(var(--bh, calc(360px * var(--ui))) * 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: calc(190px * var(--ui)); }
@media (max-width: 900px) {
  .detail-banner:has(.banner-video) { --bh: calc(300px * var(--ui)); }
  .detail-banner:has(.banner-video) .sound-btn { bottom: calc(150px * var(--ui)); }
}

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

/* ---------- Mon planning : grille semaine ---------- */
.plan { gap: calc(40px * var(--ui)); }
.plan-main { gap: calc(26px * var(--ui)); }
.wk-head { display: flex; align-items: baseline; gap: calc(12px * var(--ui)); margin-bottom: calc(10px * var(--ui)); }
.wk-head b { font: 700 calc(calc(17px * var(--ui)) * var(--display-scale)) var(--display); }
.wk-head span { color: var(--muted); font-size: calc(13px * var(--ui)); }
.wk-head small { margin-left: auto; font: 400 calc(11px * var(--ui)) var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--faint); }
.wk.idle .wk-head { margin: 0; padding: calc(10px * var(--ui)) 0; border-top: 1px solid var(--line); }
.wk.idle .wk-head b { font-size: calc(calc(14px * var(--ui)) * var(--display-scale)); color: var(--muted); }
.wk-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: calc(6px * var(--ui)); }
.wk-day { display: flex; flex-direction: column; gap: calc(4px * var(--ui)); min-height: calc(92px * var(--ui)); padding: calc(8px * var(--ui)) calc(6px * var(--ui)); border-radius: calc(8px * var(--ui)); 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: calc(6px * var(--ui)); padding: 0 calc(4px * var(--ui)) calc(4px * var(--ui)); font-size: calc(12px * var(--ui)); 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: calc(34px * var(--ui)) minmax(0, 1fr); gap: calc(8px * var(--ui)); align-items: center; padding: calc(4px * var(--ui)); border-radius: calc(6px * var(--ui)); 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: calc(34px * var(--ui)); height: calc(48px * var(--ui)); object-fit: cover; border-radius: calc(3px * var(--ui)); }
.wk-txt { min-width: 0; }
.wk-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: calc(12.5px * var(--ui)); font-weight: 600; line-height: 1.25; }
.wk-title:hover { color: var(--accent); }
.wk-txt small { display: block; margin-top: calc(2px * var(--ui)); font: 400 calc(11px * var(--ui)) var(--mono); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wk-ep.new::after { content: ''; position: absolute; top: calc(5px * var(--ui)); right: calc(5px * var(--ui)); width: calc(7px * var(--ui)); height: calc(7px * var(--ui)); border-radius: 50%; background: var(--accent); }
.wk-mark { position: absolute; top: 50%; right: calc(4px * var(--ui)); transform: translateY(-50%); width: calc(26px * var(--ui)); height: calc(26px * var(--ui)); 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: calc(14px * var(--ui)); height: calc(14px * var(--ui)); }
.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: calc(4px * var(--ui)); }
  .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 calc(260px * var(--ui)); }
}

/* infobulles au survol, en haut à droite de la jaquette */
.card-tips { position: absolute; z-index: 4; top: calc(7px * var(--ui)); right: calc(7px * var(--ui)); display: flex; flex-direction: column; align-items: flex-end; gap: calc(4px * var(--ui)); pointer-events: none; }
.card-tips span { display: inline-flex; align-items: center; gap: calc(6px * var(--ui)); height: calc(20px * var(--ui)); padding: 0 calc(8px * var(--ui)); border-radius: calc(4px * var(--ui)); background: rgba(14, 13, 11, 0.86); color: var(--text); font: 600 calc(10.5px * var(--ui)) var(--font); white-space: nowrap; box-shadow: 0 calc(2px * var(--ui)) calc(8px * var(--ui)) calc(-2px * var(--ui)) rgba(0, 0, 0, 0.6); opacity: 0; transform: translateY(calc(-3px * var(--ui))); transition: opacity .18s ease, transform .18s ease; }
.card-tips span::before { content: ''; width: calc(6px * var(--ui)); height: calc(6px * var(--ui)); 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: calc(270px * var(--ui)); padding: calc(14px * var(--ui)) calc(16px * var(--ui)) calc(12px * var(--ui)); border-radius: calc(10px * var(--ui)); background: #1a1916; border: 1px solid var(--line-2, var(--line)); border-top: calc(3px * var(--ui)) solid var(--tone); box-shadow: 0 calc(18px * var(--ui)) calc(40px * var(--ui)) calc(-12px * var(--ui)) rgba(0, 0, 0, 0.75); pointer-events: none; opacity: 0; transform: translateX(calc(-6px * var(--ui))); transition: opacity .16s ease, transform .2s cubic-bezier(.2, .8, .2, 1); }
#idcard.left { transform: translateX(calc(6px * var(--ui))); }
#idcard.on { opacity: 1; transform: none; }
.idc-head { display: flex; flex-direction: column; gap: calc(2px * var(--ui)); }
.idc-jp { font: 500 calc(11px * var(--ui)) var(--jp); color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.idc-head b { font-size: calc(14.5px * var(--ui)); line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.idc-head small { margin-top: calc(2px * var(--ui)); font: 400 calc(11.5px * var(--ui)) var(--mono); color: var(--muted); }
.idc-score { display: grid; grid-template-columns: auto auto 1fr; align-items: baseline; gap: calc(2px * var(--ui)) calc(4px * var(--ui)); margin-top: calc(12px * var(--ui)); }
.idc-score b { font: 700 calc(24px * var(--ui))/1 var(--display); letter-spacing: -0.02em; }
.idc-score span { font: 400 calc(11px * var(--ui)) var(--mono); color: var(--faint); }
.idc-score i { align-self: center; margin-left: calc(10px * var(--ui)); height: calc(4px * var(--ui)); border-radius: calc(2px * var(--ui)); background: linear-gradient(90deg, var(--accent) var(--v), var(--line) var(--v)); }
#idcard dl { margin: calc(12px * var(--ui)) 0 0; display: grid; gap: calc(5px * var(--ui)); }
.idc-row { display: grid; grid-template-columns: calc(74px * var(--ui)) minmax(0, 1fr); gap: calc(8px * var(--ui)); font-size: calc(12.5px * var(--ui)); }
.idc-row dt { color: var(--faint); }
.idc-row dd { margin: 0; color: var(--text); min-width: 0; }
.idc-dot { display: inline-block; width: calc(6px * var(--ui)); height: calc(6px * var(--ui)); border-radius: 50%; margin-right: calc(6px * var(--ui)); 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: calc(12px * var(--ui)); padding: calc(10px * var(--ui)) calc(12px * var(--ui)); border-radius: calc(8px * var(--ui)); background: rgba(255, 255, 255, 0.04); display: grid; gap: calc(3px * var(--ui)); }
.idc-ep > div { display: flex; align-items: baseline; justify-content: space-between; gap: calc(8px * var(--ui)); }
.idc-ep b { font: 700 calc(15px * var(--ui)) var(--display); }
.idc-ep b span { font: 400 calc(12px * var(--ui)) var(--mono); color: var(--faint); }
.idc-ep em { font-style: normal; font-size: calc(11.5px * var(--ui)); color: var(--muted); white-space: nowrap; }
.idc-ep small { font-size: calc(12px * var(--ui)); color: var(--muted); }
.idc-when { font: 600 calc(12px * var(--ui)) 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: calc(2px * var(--ui)) 0 1px; font-size: calc(12.5px * var(--ui)); font-style: italic; line-height: 1.35; color: var(--text); animation: fadeUp .25s ease both; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(calc(3px * var(--ui))); } to { opacity: 1; transform: none; } }

/* ---------- Aperçu au survol : bande-annonce + résumé ---------- */
#peek { position: fixed; z-index: 60; width: calc(380px * var(--ui)); border-radius: calc(12px * var(--ui)); background: #1a1916; border: 1px solid var(--line-2); box-shadow: 0 calc(24px * var(--ui)) calc(60px * var(--ui)) calc(-16px * var(--ui)) rgba(0, 0, 0, 0.8); pointer-events: none;
  opacity: 0; transform: translateX(calc(-10px * var(--ui))) 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(calc(10px * var(--ui))) 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: calc(4px * var(--ui)) calc(18px * var(--ui)) calc(16px * var(--ui)); display: grid; gap: calc(4px * var(--ui)); transition: opacity .2s ease; border-top: 0; }
.peek-body b { font: var(--display-w) calc(calc(17px * var(--ui)) * var(--display-scale)) / 1.25 var(--display); letter-spacing: var(--display-ls); }
.peek-body small { font: 400 calc(11.5px * var(--ui)) 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: calc(4px * var(--ui)); width: fit-content; margin-top: calc(2px * var(--ui)); padding: calc(3px * var(--ui)) calc(7px * var(--ui)); border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); border-radius: calc(6px * var(--ui)); color: var(--accent); font: 600 calc(11px * var(--ui)) var(--mono); }
.peek-studio:hover { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); }
.peek-studio svg { width: calc(12px * var(--ui)); height: calc(12px * var(--ui)); }
.peek-body p { margin: calc(6px * var(--ui)) 0 0; font-size: calc(13px * var(--ui)); 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 calc(4px * var(--ui)) / 100% calc(9px * var(--ui)) no-repeat, linear-gradient(90deg, var(--line) 0 90%, transparent 90%) 0 calc(24px * var(--ui)) / 100% calc(9px * var(--ui)) no-repeat, linear-gradient(90deg, var(--line) 0 45%, transparent 45%) 0 calc(44px * var(--ui)) / 100% calc(9px * var(--ui)) no-repeat; min-height: calc(56px * var(--ui)); opacity: .6; }
.peek-media, .peek-body { border-left: 0; }
#peek::before { content: ''; position: absolute; z-index: 2; top: 0; left: 0; right: 0; height: calc(3px * var(--ui)); 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: calc(12px * var(--ui)) calc(18px * var(--ui)); margin-bottom: calc(20px * var(--ui)); }
.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: calc(14px * var(--ui)); }
/* 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: calc(-18px * var(--ui)); width: calc(18px * var(--ui)); }
#peek.left::after { left: auto; right: calc(-18px * var(--ui)); }
#peek::before { border-radius: calc(12px * var(--ui)) calc(12px * var(--ui)) 0 0; }
.peek-media { border-radius: calc(11px * var(--ui)) calc(11px * var(--ui)) 0 0; }
.peek-snd { position: absolute; z-index: 3; right: calc(10px * var(--ui)); bottom: calc(10px * var(--ui)); width: calc(34px * var(--ui)); height: calc(34px * var(--ui)); 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: calc(16px * var(--ui)); height: calc(16px * var(--ui)); }
.peek-delay { position: absolute; z-index: 4; left: calc(12px * var(--ui)); top: calc(12px * var(--ui)); padding: calc(5px * var(--ui)) calc(9px * var(--ui)); border: 1px solid rgba(255, 137, 113, 0.7); border-radius: calc(999px * var(--ui)); background: rgba(91, 25, 18, 0.92); color: #ffd1c8; font: 700 calc(11px * var(--ui)) var(--mono); letter-spacing: .04em; text-transform: uppercase; box-shadow: 0 calc(5px * var(--ui)) calc(18px * var(--ui)) rgba(0, 0, 0, .35); }
a.peek-body { color: inherit; padding-top: calc(12px * var(--ui)); }
a.peek-body:hover b { color: var(--accent); }
.peek-body b { transition: color .15s; }
.peek-auto-translated { width: fit-content; margin-top: calc(3px * var(--ui)); padding: calc(2px * var(--ui)) calc(6px * var(--ui)); border-radius: calc(999px * var(--ui)); background: color-mix(in srgb, var(--green) 14%, transparent); color: var(--green) !important; font: 600 calc(9px * var(--ui)) 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 calc(12px * var(--ui)); }
.wk-day.out { opacity: .45; }
.wk-grid.quiet .wk-day { min-height: calc(44px * var(--ui)); }
.month-nav { position: fixed; z-index: 40; right: clamp(calc(16px * var(--ui)), 3vw, calc(40px * var(--ui))); bottom: calc(22px * var(--ui)); display: flex; align-items: center; gap: calc(6px * var(--ui)); padding: calc(6px * var(--ui)); border-radius: calc(999px * var(--ui)); background: rgba(26, 25, 22, 0.94); border: 1px solid var(--line-2); box-shadow: 0 calc(14px * var(--ui)) calc(34px * var(--ui)) calc(-12px * var(--ui)) 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: calc(128px * var(--ui)); padding: 0 calc(4px * var(--ui)); line-height: 1.2; }
.month-label b { font: var(--display-w) calc(calc(15px * var(--ui)) * var(--display-scale)) var(--display); letter-spacing: var(--display-ls); }
.month-label a { font-size: calc(11px * var(--ui)); color: var(--accent); }
#rel:has(.month-nav) { padding-bottom: calc(70px * var(--ui)); }
@media (max-width: 900px) { .month-nav { bottom: calc(80px * var(--ui)); right: calc(12px * var(--ui)); } .rel-head .plan-bar { margin-top: calc(6px * var(--ui)); } }

/* 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(calc(760px * var(--ui)), calc(100vw - calc(24px * var(--ui)))); box-shadow: 0 calc(40px * var(--ui)) calc(100px * var(--ui)) calc(-24px * var(--ui)) 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: calc(16px * var(--ui)) calc(24px * var(--ui)) calc(22px * var(--ui)); }
#peek.big .peek-body b { font-size: calc(calc(24px * var(--ui)) * var(--display-scale)); }
#peek.big .peek-body small { font-size: calc(12.5px * var(--ui)); }
#peek.big .peek-body p { font-size: calc(14.5px * var(--ui)); -webkit-line-clamp: 9; }
#peek.big .peek-snd { width: calc(40px * var(--ui)); height: calc(40px * var(--ui)); right: calc(14px * var(--ui)); bottom: calc(14px * var(--ui)); }

/* ---------- Sorties : tout sur un écran ---------- */
.page.fit { padding-top: calc(var(--top-h) + calc(22px * var(--ui))); padding-bottom: 0; }
.page.fit .rel-head { margin-bottom: calc(12px * var(--ui)); }
.page.fit .rel-head h1 { padding-bottom: calc(8px * var(--ui)); }
.page.fit .rel-head .plan-bar { margin-bottom: calc(8px * var(--ui)); }
.cal { display: flex; flex-direction: column; gap: calc(6px * var(--ui)); }
.cal-foot { display: flex; justify-content: flex-end; margin-top: calc(8px * var(--ui)); }
.month-nav { position: static; box-shadow: none; padding: calc(4px * var(--ui)); }
#rel:has(.month-nav) { padding-bottom: 0; }
.wk-ep { grid-template-columns: calc(16px * var(--ui)) minmax(0, 1fr); gap: calc(6px * var(--ui)); padding: calc(2px * var(--ui)) calc(4px * var(--ui)); border-radius: calc(4px * var(--ui)); }
.wk-cover img { width: calc(16px * var(--ui)); height: calc(22px * var(--ui)); border-radius: calc(2px * var(--ui)); }
.wk-line { display: flex; align-items: baseline; gap: calc(6px * var(--ui)); min-width: 0; font-size: calc(12px * var(--ui)); line-height: calc(22px * var(--ui)); }
.wk-t { flex: none; font: 400 calc(10.5px * var(--ui)) 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 calc(10px * var(--ui)) var(--mono); color: var(--faint); }
.wk-line:hover .wk-n { color: var(--accent); }
.wk-ep.new::after { top: 50%; right: calc(3px * var(--ui)); width: calc(6px * var(--ui)); height: calc(6px * var(--ui)); transform: translateY(-50%); }
.wk-ep.new .wk-e { margin-right: calc(9px * var(--ui)); }
.wk-dh em { margin-left: auto; font: normal 500 calc(10px * var(--ui)) 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 * calc(26px * var(--ui))); }
@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: calc(6px * var(--ui)) calc(5px * var(--ui)) calc(4px * var(--ui)); gap: calc(2px * var(--ui)); }
  .cal .wk-dh { padding: 0 calc(3px * var(--ui)) calc(2px * var(--ui)); }
}
/* lignes plus serrées : ~5 épisodes par case sur un écran 1080p */
.wk-ep { padding: 1px calc(4px * var(--ui)); }
.wk-cover img { width: calc(14px * var(--ui)); height: calc(19px * var(--ui)); }
.wk-ep { grid-template-columns: calc(14px * var(--ui)) minmax(0, 1fr); }
.wk-line { line-height: calc(19px * var(--ui)); }
.wk-list { gap: 1px; }
.cal.all .wk-list { max-height: calc(5 * calc(22px * var(--ui))); }
.page.fit .rel-head h1 { font-size: calc(clamp(calc(26px * var(--ui)), 2.6vw, calc(32px * var(--ui))) * var(--display-scale)); }
@media (min-width: 1101px) { .cal .wk-day { padding: calc(4px * var(--ui)) calc(4px * var(--ui)) calc(3px * var(--ui)); gap: 1px; } .cal .wk-dh { padding: 0 calc(3px * var(--ui)) 1px; font-size: calc(11.5px * var(--ui)); } }
/* aperçu agrandi : bien plus grand, centré, le reste de la page s'assombrit */
#peek.big { width: min(calc(1180px * var(--ui)), calc(100vw - calc(48px * var(--ui))), calc((100vh - calc(230px * var(--ui))) * 16 / 9)); box-shadow: 0 calc(40px * var(--ui)) calc(120px * var(--ui)) calc(-20px * var(--ui)) rgba(0, 0, 0, 0.95), 0 0 0 100vmax rgba(8, 7, 6, 0.6); }
#peek.big .peek-body { padding: calc(18px * var(--ui)) calc(28px * var(--ui)) calc(24px * var(--ui)); }
#peek.big .peek-body b { font-size: calc(calc(28px * var(--ui)) * var(--display-scale)); }
#peek.big .peek-body p { font-size: calc(15px * var(--ui)); -webkit-line-clamp: 4; max-width: 90ch; }
#peek.big .peek-snd { width: calc(46px * var(--ui)); height: calc(46px * var(--ui)); right: calc(18px * var(--ui)); bottom: calc(18px * var(--ui)); }
#peek.big .peek-snd .i { width: calc(20px * var(--ui)); height: calc(20px * var(--ui)); }
#peek.big { width: min(calc(1180px * var(--ui)), calc(100vw - calc(48px * var(--ui))), calc((100vh - calc(300px * var(--ui))) * 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: calc(4px * var(--ui)) calc(10px * var(--ui)); margin-top: calc(8px * var(--ui)); padding: calc(8px * var(--ui)) calc(10px * var(--ui)); border-radius: calc(7px * var(--ui)); background: rgba(255, 255, 255, 0.04); font-size: calc(12.5px * var(--ui)); 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: calc(4px * var(--ui)) 0 0; font-size: calc(13px * var(--ui)); font-style: italic; color: var(--text); animation: fadeUp .25s ease both; }
.peek-feedback { width: fit-content; margin-top: calc(5px * var(--ui)); color: var(--accent); font-size: calc(12.5px * var(--ui)); font-weight: 650; cursor: pointer; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: calc(3px * var(--ui)); animation: fadeUp .25s ease both; }
.peek-feedback:hover { text-decoration-color: currentColor; }
#peek.big .peek-ep { font-size: calc(14px * var(--ui)); }
#peek.big .peek-eptitle { font-size: calc(15px * var(--ui)); }
#peek.big .peek-feedback { font-size: calc(14px * var(--ui)); }
.cal.all .wk-ep { cursor: pointer; }
.peek-from { flex-basis: 100%; font-size: calc(12px * var(--ui)); 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: calc(16px * var(--ui)); }
.cal-wrap.with-side { grid-template-columns: minmax(0, 1fr) minmax(calc(250px * var(--ui)), calc(300px * var(--ui))); }
.soon { display: flex; flex-direction: column; min-height: 0; border: 1px solid var(--line); border-radius: calc(8px * var(--ui)); padding: calc(12px * var(--ui)) calc(10px * var(--ui)) calc(8px * var(--ui)) calc(14px * var(--ui)); }
.soon h3 { display: flex; align-items: center; gap: calc(8px * var(--ui)); font-size: calc(14px * var(--ui)); margin: 0 0 calc(8px * var(--ui)); }
.soon h3 .i { width: calc(14px * var(--ui)); height: calc(14px * var(--ui)); color: var(--accent); }
.soon h3 sup { font: 400 calc(11px * var(--ui)) 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: calc(2px * var(--ui)); padding-right: calc(4px * var(--ui)); }
.soon-item { display: grid; grid-template-columns: calc(30px * var(--ui)) minmax(0, 1fr); gap: calc(10px * var(--ui)); align-items: center; padding: calc(5px * var(--ui)) calc(6px * var(--ui)); border-radius: calc(6px * var(--ui)); transition: background .15s; }
.soon-item:hover { background: var(--surface); }
.soon-item img { width: calc(30px * var(--ui)); height: calc(42px * var(--ui)); object-fit: cover; border-radius: calc(3px * var(--ui)); }
.soon-item b { display: block; font-size: calc(12.5px * var(--ui)); font-weight: 600; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.soon-item small { display: block; font: 400 calc(11px * var(--ui)) 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: calc(420px * var(--ui)); } }
/* 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(calc(250px * var(--ui)), calc(300px * var(--ui))); gap: calc(16px * var(--ui)); 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(calc(70px * var(--ui))); } to { opacity: 1; transform: none; } }
@keyframes relSlideR { from { opacity: 0; transform: translateX(calc(-70px * var(--ui))); } 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; }
/* à droite, il laisse la place au bouton flottant « Discussion » (.social-dock) */
.cal-foot:not(.with-side) { padding-right: calc(190px * var(--ui)); }
@media (max-width: 900px) { .cal-foot:not(.with-side) { padding-right: calc(62px * var(--ui)); } }
#rel.slide-l > .cal-foot, #rel.slide-r > .cal-foot { animation: none; }

/* ---------- Profil (en haut à droite) ---------- */
.profile { position: relative; flex: none; margin-left: calc(-18px * var(--ui)); }
.avatar { width: calc(38px * var(--ui)); height: calc(38px * var(--ui)); 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: calc(18px * var(--ui)); height: calc(18px * var(--ui)); }
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% + calc(10px * var(--ui))); z-index: 70; width: calc(250px * var(--ui)); padding: calc(6px * var(--ui)); border-radius: calc(10px * var(--ui)); background: #1a1916; border: 1px solid var(--line-2); box-shadow: 0 calc(18px * var(--ui)) calc(40px * var(--ui)) calc(-12px * var(--ui)) 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(calc(-4px * var(--ui))) scale(.98); } to { opacity: 1; transform: none; } }
.pm-head { display: flex; align-items: center; gap: calc(10px * var(--ui)); padding: calc(8px * var(--ui)) calc(8px * var(--ui)) calc(10px * var(--ui)); margin-bottom: calc(4px * var(--ui)); border-bottom: 1px solid var(--line); }
.pm-head .avatar { cursor: default; color: var(--accent); }
.pm-head b { display: block; font-size: calc(14px * var(--ui)); }
.pm-head small { display: block; font-size: calc(12px * var(--ui)); color: var(--muted); }
.pm-item { display: flex; align-items: center; gap: calc(10px * var(--ui)); width: 100%; padding: calc(9px * var(--ui)) calc(10px * var(--ui)); border: 0; border-radius: calc(6px * var(--ui)); background: none; color: var(--text); font: 500 calc(13.5px * var(--ui)) var(--font); text-align: left; cursor: pointer; }
.pm-item .i { width: calc(16px * var(--ui)); height: calc(16px * var(--ui)); 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: calc(34px * var(--ui)); height: calc(34px * var(--ui)); } }

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

/* ---------- Profil ---------- */
a.pm-head { color: inherit; border-radius: calc(6px * var(--ui)); }
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: calc(44px * var(--ui)); border: 1px solid var(--line); border-radius: calc(10px * var(--ui)); overflow: hidden; background: var(--line); }
.pf-stats > div { display: flex; flex-direction: column; gap: calc(4px * var(--ui)); padding: calc(18px * var(--ui)) calc(22px * var(--ui)); background: var(--bg); }
.pf-stats b { font: var(--display-w) calc(calc(30px * var(--ui)) * var(--display-scale)) / 1 var(--display); letter-spacing: var(--display-ls); }
.pf-stats span { font-size: calc(13px * var(--ui)); 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: calc(18px * var(--ui)); flex-wrap: wrap; margin-bottom: calc(22px * var(--ui)); }
.museum-head h2 { font: var(--display-w) calc(calc(26px * var(--ui)) * var(--display-scale)) var(--display); letter-spacing: var(--display-ls); margin: 0; }
.museum-head h2 .jp { font-size: calc(13px * var(--ui)); margin-left: calc(10px * var(--ui)); }
.museum-head p { margin: 0; font-size: calc(13.5px * var(--ui)); }
.hall { position: relative; padding: calc(18px * var(--ui)) 0 calc(26px * var(--ui)); border-top: 1px solid var(--line); }
.hall-plaque { display: inline-flex; align-items: baseline; gap: calc(10px * var(--ui)); margin-bottom: calc(16px * var(--ui)); padding: calc(5px * var(--ui)) calc(12px * var(--ui)); border-radius: calc(4px * var(--ui)); background: #1b1813; border: 1px solid #3a3226; }
.hall-plaque b { font: 600 calc(13px * var(--ui)) var(--font); letter-spacing: .06em; text-transform: uppercase; color: #e6d3b0; }
.hall-plaque small { font: 400 calc(11.5px * var(--ui)) var(--mono); color: #9c8a6c; }
.hall-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(calc(118px * var(--ui)), 1fr)); gap: calc(22px * var(--ui)) calc(18px * var(--ui)); }
.medal { display: flex; flex-direction: column; align-items: center; gap: calc(10px * var(--ui)); padding: 0; border: 0; background: none; color: inherit; cursor: pointer; }
.medal-coin { position: relative; width: 100%; max-width: calc(128px * var(--ui)); aspect-ratio: 1; border-radius: 50%; padding: calc(5px * var(--ui)); background: #b9802a; box-shadow: inset 0 0 0 1px rgba(255, 220, 160, 0.35), 0 calc(12px * var(--ui)) calc(22px * var(--ui)) calc(-12px * var(--ui)) 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: calc(12.5px * var(--ui)); font-weight: 600; text-align: center; line-height: 1.25; }
.medal:hover .medal-coin { transform: translateY(calc(-5px * var(--ui))) rotate(-4deg) scale(1.04); box-shadow: inset 0 0 0 1px rgba(255, 220, 160, 0.5), 0 calc(22px * var(--ui)) calc(30px * var(--ui)) calc(-14px * var(--ui)) 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 calc(12px * var(--ui)) calc(22px * var(--ui)) calc(-12px * var(--ui)) 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: calc(32px * var(--ui)); padding: calc(10px * var(--ui)) 0 calc(30px * var(--ui)); border-top: 0; }
.medal.big .medal-coin { width: calc(190px * var(--ui)); max-width: none; padding: calc(7px * var(--ui)); }
.medal.big .medal-cap { display: none; }
.legend-plaque { display: grid; gap: calc(4px * var(--ui)); }
.legend-plaque span { font: 600 calc(11px * var(--ui)) var(--font); letter-spacing: .14em; text-transform: uppercase; color: #9c8a6c; }
.legend-plaque b { font: var(--display-w) calc(calc(28px * var(--ui)) * var(--display-scale)) var(--display); letter-spacing: var(--display-ls); }
.legend-plaque p { margin: 0; font-size: calc(13.5px * var(--ui)); }

/* vitrine 3D */
.modal.b3d-modal { width: min(calc(980px * var(--ui)), 100%); padding: 0; background: #0f0d0b; }
.b3d { display: grid; grid-template-columns: minmax(0, 1fr) calc(280px * var(--ui)); min-height: min(calc(620px * var(--ui)), 80vh); }
.b3d-stage { position: relative; min-height: calc(420px * var(--ui)); 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: calc(12px * var(--ui)); }
.b3d-fallback img { width: min(calc(320px * var(--ui)), 70%); border-radius: 50%; }
.b3d-plaque { display: flex; flex-direction: column; justify-content: flex-end; gap: calc(6px * var(--ui)); padding: calc(28px * var(--ui)) calc(26px * var(--ui)); border-left: 1px solid var(--line); }
.b3d-plaque > span { font: 600 calc(11px * var(--ui)) var(--font); letter-spacing: .14em; text-transform: uppercase; color: #9c8a6c; }
.b3d-plaque b { font: var(--display-w) calc(calc(30px * var(--ui)) * var(--display-scale)) / 1.1 var(--display); letter-spacing: var(--display-ls); }
.b3d-plaque p { display: flex; align-items: center; gap: calc(8px * var(--ui)); margin: calc(8px * var(--ui)) 0 0; font-size: calc(13px * var(--ui)); }
.b3d-plaque p .i { width: calc(15px * var(--ui)); height: calc(15px * var(--ui)); }
.b3d-plaque p.locked { color: var(--muted); }
.b3d-plaque p.won { color: var(--green); }
.b3d-plaque small { margin-top: calc(10px * var(--ui)); font-size: calc(12px * var(--ui)); }
@media (max-width: 760px) { .b3d { grid-template-columns: 1fr; } .b3d-plaque { border-left: 0; border-top: 1px solid var(--line); } .b3d-stage { min-height: calc(340px * var(--ui)); } }

/* ---------- Chibis ---------- */
.lib-head { position: relative; }
.chibi-perch { position: absolute; right: calc(8px * var(--ui)); bottom: calc(-29px * var(--ui)); display: flex; align-items: flex-end; gap: calc(2px * var(--ui)); z-index: 2; }
.chibi-perch img { height: calc(74px * var(--ui)); width: auto; filter: drop-shadow(0 calc(6px * var(--ui)) calc(8px * var(--ui)) 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(calc(-8px * var(--ui))) rotate(-4deg) scale(1.08); }
.chibi-perch img.shadow { filter: brightness(0) drop-shadow(0 calc(6px * var(--ui)) calc(8px * var(--ui)) rgba(0, 0, 0, 0.55)); opacity: .55; }
@keyframes perchIn { from { opacity: 0; transform: translateY(calc(18px * var(--ui))) scale(.8); } to { opacity: 1; transform: none; } }
@media (max-width: 900px) { .chibi-perch img { height: calc(52px * var(--ui)); } .chibi-perch { bottom: calc(-20px * var(--ui)); } .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: calc(48px * var(--ui)); }
.dex-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(calc(132px * var(--ui)), 1fr)); gap: calc(10px * var(--ui)); }
.dex { position: relative; display: flex; flex-direction: column; align-items: center; gap: calc(2px * var(--ui)); padding: calc(26px * var(--ui)) calc(8px * var(--ui)) calc(12px * var(--ui)); border-radius: calc(10px * var(--ui)); 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(calc(-3px * var(--ui))); }
.dex-no { position: absolute; top: calc(8px * var(--ui)); left: calc(10px * var(--ui)); font: 500 calc(10.5px * var(--ui)) var(--mono); color: var(--faint); letter-spacing: .04em; }
.dex img { width: calc(92px * var(--ui)); height: calc(92px * var(--ui)); object-fit: contain; filter: drop-shadow(0 calc(6px * var(--ui)) calc(8px * var(--ui)) 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: calc(8px * var(--ui)); font-size: calc(13px * var(--ui)); text-align: center; line-height: 1.25; }
.dex small { font-size: calc(11px * var(--ui)); 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: calc(88px * var(--ui)); }
.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(calc(160px * var(--ui)), 1fr)); gap: calc(28px * var(--ui)) calc(22px * var(--ui)); }
.medal-coin { max-width: calc(176px * var(--ui)); padding: calc(6px * var(--ui)); }
.medal-cap { font-size: calc(13.5px * var(--ui)); }
.medal.big .medal-coin { width: calc(250px * var(--ui)); padding: calc(9px * var(--ui)); }
.modal.b3d-modal { width: min(calc(1280px * var(--ui)), 96vw); }
.b3d { min-height: min(calc(820px * var(--ui)), 88vh); grid-template-columns: minmax(0, 1fr) calc(300px * var(--ui)); }

/* perchoir : 5 emplacements visibles, les chibis posés sur la ligne des compteurs */
.chibi-perch { --slot: calc(118px * var(--ui)); left: auto; right: calc(8px * var(--ui)); bottom: calc(-28px * var(--ui)); width: calc(var(--slot) * 5); padding-top: calc(14px * var(--ui)); 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: calc(82px * var(--ui)); padding: 0 calc(16px * var(--ui)); object-fit: contain; object-position: 50% 100%; }
@media (max-width: 900px) { .chibi-perch { --slot: calc(78px * var(--ui)); bottom: calc(-28px * var(--ui)); width: calc(var(--slot) * 4); } .perch-track img { height: calc(54px * var(--ui)); padding: 0 calc(10px * var(--ui)); } .chibi-perch img:nth-child(n+5) { display: block; } }
.perch-track img:not(.shadow) { filter: drop-shadow(0 calc(3px * var(--ui)) calc(4px * var(--ui)) 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 calc(12px * var(--ui)) calc(22px * var(--ui)) calc(-12px * var(--ui)) rgba(0, 0, 0, 0.9); }
.medal.locked .medal-coin { background: #3d3934; box-shadow: inset 0 0 0 calc(2px * var(--ui)) color-mix(in srgb, var(--rc) 45%, transparent), 0 calc(12px * var(--ui)) calc(22px * var(--ui)) calc(-12px * var(--ui)) rgba(0, 0, 0, 0.9); }
.medal-cap small { display: block; margin-top: calc(2px * var(--ui)); font: 500 calc(10.5px * var(--ui)) 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 calc(11px * var(--ui)) 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: calc(3px * var(--ui)); }

/* 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: calc(12px * var(--ui)); margin-bottom: calc(12px * var(--ui)); padding: calc(8px * var(--ui)) calc(14px * var(--ui)) calc(8px * var(--ui)) calc(8px * var(--ui)); border-radius: calc(999px * var(--ui)); 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: calc(14px * var(--ui)); }
.wheel-link small { font-size: calc(11.5px * var(--ui)); color: var(--muted); }
.wheel-link .i { width: calc(16px * var(--ui)); height: calc(16px * var(--ui)); color: var(--muted); }
.wl-mini { width: calc(34px * var(--ui)); height: calc(34px * var(--ui)); border-radius: 50%; border: calc(3px * var(--ui)) 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: calc(460px * var(--ui)); }
.qz-head { display: flex; justify-content: space-between; align-items: flex-end; gap: calc(16px * var(--ui)); padding-bottom: calc(14px * var(--ui)); border-bottom: 1px solid var(--line); }
.qz-kicker { display: block; font: 600 calc(11px * var(--ui)) var(--font); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: calc(4px * var(--ui)); }
.qz-head b { font: var(--display-w) calc(calc(24px * var(--ui)) * 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: calc(5px * var(--ui)); }
.qz-tries i { width: calc(10px * var(--ui)); height: calc(10px * var(--ui)); border-radius: 50%; background: var(--accent); }
.qz-tries i.used { background: var(--surface-3); }
.qz-tries small { margin-left: calc(6px * var(--ui)); font-size: calc(12px * var(--ui)); color: var(--muted); }
.qz-rule { margin: calc(16px * var(--ui)) 0 calc(22px * var(--ui)); font-size: calc(14px * var(--ui)); }
.qz-rule b { color: var(--text); font-weight: 600; }
.qz-themes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(calc(14px * var(--ui)), 2vw, calc(28px * var(--ui))); }
.qz-theme { position: relative; display: flex; flex-direction: column; gap: calc(12px * var(--ui)); 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: calc(2px * var(--ui)) solid transparent; outline-offset: calc(4px * var(--ui)); transition: outline-color .2s, transform .3s cubic-bezier(.2, .8, .2, 1), box-shadow .3s; box-shadow: 0 calc(18px * var(--ui)) calc(30px * var(--ui)) calc(-18px * var(--ui)) 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(calc(-4px * var(--ui))); }
.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(calc(-4px * var(--ui))); }
.qz-theme.on .qz-cover::after { content: ""; position: absolute; top: calc(12px * var(--ui)); right: calc(12px * var(--ui)); width: calc(28px * var(--ui)); height: calc(28px * var(--ui)); border-radius: 50%; background: var(--accent); box-shadow: inset 0 0 0 calc(8px * var(--ui)) var(--accent), inset 0 0 0 calc(14px * var(--ui)) var(--accent-ink); }
.qz-theme b { font: var(--display-w) calc(calc(19px * var(--ui)) * 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: calc(16px * var(--ui)); margin-top: calc(26px * var(--ui)); }
.qz-go { height: calc(46px * var(--ui)); padding: 0 calc(22px * var(--ui)); font-size: calc(15px * var(--ui)); }
.qz-done { padding: calc(40px * var(--ui)) 0; }
.qz-done b { font: var(--display-w) calc(calc(26px * var(--ui)) * var(--display-scale)) / 1.15 var(--display); letter-spacing: var(--display-ls); }
.qz-done p { margin: calc(10px * var(--ui)) 0 calc(18px * var(--ui)); }
.qz-q { display: flex; flex-direction: column; gap: calc(16px * var(--ui)); max-width: calc(980px * var(--ui)); }
.qz-top { display: flex; align-items: center; gap: calc(12px * var(--ui)); flex-wrap: wrap; font-size: calc(13px * var(--ui)); color: var(--muted); }
.qz-tag { padding: calc(3px * var(--ui)) calc(8px * var(--ui)); border-radius: calc(4px * var(--ui)); background: var(--surface-2); color: var(--text); font-size: calc(11.5px * var(--ui)); 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: calc(4px * var(--ui)); border-radius: calc(2px * var(--ui)); 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: calc(22px * var(--ui)); min-height: calc(120px * var(--ui)); }
.qz-img { width: calc(110px * var(--ui)); aspect-ratio: 3 / 4; object-fit: cover; border-radius: calc(8px * var(--ui)); flex: none; background: var(--surface-2); }
.qz-body h3 { margin: 0; font: var(--display-w) calc(clamp(calc(22px * var(--ui)), 2.2vw, calc(28px * var(--ui))) * 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: calc(10px * var(--ui)); }
.qz-choice { display: flex; align-items: center; gap: calc(12px * var(--ui)); min-height: calc(54px * var(--ui)); padding: calc(10px * var(--ui)) calc(14px * var(--ui)); border-radius: var(--radius); border: 1px solid var(--line); background: var(--surface); color: var(--text); font: 500 calc(15px * var(--ui)) 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: calc(22px * var(--ui)); height: calc(22px * var(--ui)); border-radius: calc(5px * var(--ui)); border: 1px solid var(--line-2); font: 600 calc(11px * var(--ui)) 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: calc(12px * var(--ui)) calc(14px * var(--ui)); border-left: calc(2px * var(--ui)) solid var(--amber); background: var(--surface); font-size: calc(13.5px * var(--ui)); line-height: 1.5; color: var(--muted); }
.qz-end { padding: calc(30px * var(--ui)) 0; }
.qz-big { display: block; font: var(--display-w) calc(calc(84px * var(--ui)) * var(--display-scale)) / 1 var(--display); letter-spacing: var(--display-ls); }
.qz-big small { font-size: .35em; color: var(--muted); margin-left: calc(6px * var(--ui)); }
.qz-end.win .qz-big { color: var(--accent); }
.qz-end p { margin: calc(14px * var(--ui)) 0 calc(18px * var(--ui)); font-size: calc(15px * var(--ui)); }

/* écran de la roue */
.wheel-page { display: grid; grid-template-columns: minmax(0, 1fr) calc(340px * var(--ui)); gap: clamp(calc(28px * var(--ui)), 4vw, calc(64px * var(--ui))); align-items: center; min-height: calc(100vh - var(--top-h) - calc(40px * var(--ui))); }
.wheel-stage { display: grid; place-items: center; }
.wheel { position: relative; width: min(100%, calc(100vh - var(--top-h) - calc(90px * var(--ui))), calc(700px * var(--ui))); aspect-ratio: 1; }
.wheel-svg { width: 100%; height: 100%; display: block; overflow: visible; filter: drop-shadow(0 calc(30px * var(--ui)) calc(40px * var(--ui)) 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 calc(5.6px * var(--ui)) var(--font); letter-spacing: .08em; fill: var(--text); }
.ws-glyph { font: 600 calc(24px * var(--ui)) 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 calc(15px * var(--ui)) 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 calc(4px * var(--ui)) calc(5px * var(--ui)) rgba(0, 0, 0, 0.6)); }
.wheel-side { display: flex; flex-direction: column; gap: calc(18px * var(--ui)); }
.wheel-title { margin: 0; font: var(--display-w) calc(clamp(calc(32px * var(--ui)), 3.4vw, calc(44px * var(--ui))) * var(--display-scale)) / 1 var(--display); letter-spacing: var(--display-ls); }
.wheel-title .jp { font-size: calc(13px * var(--ui)); margin-left: calc(12px * var(--ui)); }
.spin-box { display: flex; align-items: baseline; gap: calc(10px * var(--ui)); padding: calc(14px * var(--ui)) 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.spin-n { font: var(--display-w) calc(calc(52px * var(--ui)) * var(--display-scale)) / 1 var(--display); letter-spacing: var(--display-ls); color: var(--accent); }
.spin-box span { color: var(--muted); font-size: calc(14px * var(--ui)); }
.spin-btn { height: calc(50px * var(--ui)); font-size: calc(15px * var(--ui)); }
.spin-result { min-height: calc(40px * var(--ui)); }
.won-head { font: var(--display-w) calc(calc(24px * var(--ui)) * var(--display-scale)) / 1.2 var(--display); letter-spacing: var(--display-ls); margin: 0 0 calc(14px * var(--ui)); animation: wonIn .5s cubic-bezier(.2, 1.4, .4, 1) both; }
.won-head.legend { color: #f2c46a; }
.won-row { display: flex; gap: calc(20px * var(--ui)); flex-wrap: wrap; margin-bottom: calc(12px * var(--ui)); }
.won-row figure { margin: 0; display: flex; flex-direction: column; align-items: flex-start; gap: calc(8px * var(--ui)); animation: wonIn .6s cubic-bezier(.2, 1.4, .4, 1) both; animation-delay: .12s; }
.won-row figcaption { font-size: calc(14px * var(--ui)); font-weight: 600; line-height: 1.3; }
.won-row figcaption small { display: block; font-size: calc(10.5px * var(--ui)); font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--rt, var(--muted)); }
.won-badge .medal-coin { display: block; width: calc(110px * var(--ui)); aspect-ratio: 1; border-radius: 50%; padding: calc(5px * var(--ui)); }
.won-badge .medal-coin img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }
.won-chibi img { height: calc(110px * var(--ui)); width: auto; filter: drop-shadow(0 calc(6px * var(--ui)) calc(8px * var(--ui)) rgba(0, 0, 0, 0.5)); }
@keyframes wonIn { from { opacity: 0; transform: translateY(calc(10px * var(--ui))) scale(.9); } }
.odds { display: grid; gap: calc(7px * var(--ui)); padding-top: calc(6px * var(--ui)); }
.odd { display: grid; grid-template-columns: calc(12px * var(--ui)) 1fr auto; align-items: center; gap: calc(10px * var(--ui)); font-size: calc(13px * var(--ui)); color: var(--muted); }
.odd i { width: calc(10px * var(--ui)); height: calc(10px * var(--ui)); border-radius: calc(3px * var(--ui)); 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%, calc(520px * var(--ui))); }
  .qz-themes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .qz-choices { grid-template-columns: 1fr; }
  .qz-img { width: calc(80px * var(--ui)); }
}
@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 calc(12px * var(--ui)) calc(22px * var(--ui)) calc(-12px * var(--ui)) 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(calc(30px * var(--ui)) * var(--display-scale)) / 1 var(--display); letter-spacing: .04em; }
.medal.big .medal-q { font-size: calc(48px * var(--ui)); }
.medal.mystery .medal-cap { color: var(--muted); }
.medal.mystery:hover .medal-coin { transform: translateY(calc(-3px * var(--ui))); }
.medal-n, .dex-n { position: absolute; right: calc(-2px * var(--ui)); bottom: calc(4px * var(--ui)); z-index: 2; min-width: calc(26px * var(--ui)); height: calc(22px * var(--ui)); padding: 0 calc(6px * var(--ui)); display: grid; place-items: center; border-radius: calc(11px * var(--ui)); background: var(--text); color: var(--bg); font: 700 calc(11.5px * var(--ui)) var(--font); box-shadow: 0 calc(3px * var(--ui)) calc(8px * var(--ui)) rgba(0, 0, 0, 0.5); }
.dex-n { top: calc(8px * var(--ui)); right: calc(8px * var(--ui)); bottom: auto; }

/* perchoir : chibis côte à côte, défilement continu */
.chibi-perch { --slot: auto; width: min(calc(380px * var(--ui)), 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: calc(82px * var(--ui)); padding: 0; margin-right: calc(-2px * var(--ui)); object-fit: initial; }
@media (max-width: 900px) { .chibi-perch { width: 60%; } .perch-track img { height: calc(54px * var(--ui)); } }


/* 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(calc(18px * var(--ui)), 3vw, calc(40px * var(--ui))); padding: calc(8px * var(--ui)) 0 calc(26px * var(--ui)); border-bottom: 1px solid var(--line); }
.pf-avatar { position: relative; width: calc(132px * var(--ui)); height: calc(132px * var(--ui)); 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(calc(-2px * var(--ui))); }
.pf-avatar > .i { width: calc(48px * var(--ui)); height: calc(48px * var(--ui)); }
.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 calc(10px * var(--ui)) calc(12px * var(--ui)) rgba(0, 0, 0, 0.5)); }
.pf-edit { position: absolute; right: calc(4px * var(--ui)); bottom: calc(4px * var(--ui)); width: calc(32px * var(--ui)); height: calc(32px * var(--ui)); border-radius: 50%; display: grid; place-items: center; background: var(--text); color: var(--bg); box-shadow: 0 calc(4px * var(--ui)) calc(10px * var(--ui)) rgba(0, 0, 0, 0.5); }
.pf-edit .i { width: calc(15px * var(--ui)); height: calc(15px * var(--ui)); }
.pf-id h1 { margin: calc(2px * var(--ui)) 0 calc(8px * var(--ui)); font: var(--display-w) calc(clamp(calc(32px * var(--ui)), 3.6vw, calc(46px * var(--ui))) * var(--display-scale)) / 1 var(--display); letter-spacing: var(--display-ls); }
.pf-id .qz-kicker .jp { margin-left: calc(10px * var(--ui)); letter-spacing: 0; }
.pf-rings { display: flex; gap: clamp(calc(16px * var(--ui)), 2.5vw, calc(34px * var(--ui))); }
.pf-ring { display: flex; align-items: center; gap: calc(12px * var(--ui)); }
.pf-ring svg { width: calc(74px * var(--ui)); height: calc(74px * var(--ui)); 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(calc(28px * var(--ui)) * 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: calc(13px * var(--ui)); color: var(--muted); }
.pf-board { display: grid; grid-template-columns: 4fr 3fr; gap: calc(22px * var(--ui)); padding: calc(12px * var(--ui)) 0 calc(12px * var(--ui)); }
.pf-friends { padding: 0 0 calc(26px * var(--ui)); }
.pf-friends[hidden] { display: none; }
.pf-friends-head { display: flex; align-items: center; justify-content: space-between; gap: calc(12px * var(--ui)); margin-bottom: calc(12px * var(--ui)); }
.pf-friends-head .qz-kicker small { color: var(--faint); margin-left: calc(4px * var(--ui)); }
.pf-friends-head .link { display: inline-flex; align-items: center; gap: calc(5px * var(--ui)); }
.pf-friends-head .link .i { width: calc(13px * var(--ui)); height: calc(13px * var(--ui)); }
.pf-friends-list { display: flex; flex-wrap: wrap; gap: calc(8px * var(--ui)); }
.pf-friend { display: inline-flex; align-items: center; gap: calc(9px * var(--ui)); padding: calc(5px * var(--ui)) calc(14px * var(--ui)) calc(5px * var(--ui)) calc(5px * var(--ui)); border: 1px solid var(--line); border-radius: calc(999px * var(--ui)); background: var(--surface); color: var(--text); font-size: calc(14px * var(--ui)); transition: border-color .15s, color .15s; }
.pf-friend:hover { border-color: var(--accent); color: var(--accent); }
.pf-friend .social-avatar { width: calc(32px * var(--ui)); height: calc(32px * var(--ui)); }
.pf-group .qz-kicker { margin-bottom: calc(8px * var(--ui)); }
.pf-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(calc(130px * var(--ui)), 1fr)); gap: 1px; border: 1px solid var(--line); border-radius: calc(10px * var(--ui)); overflow: hidden; background: var(--line); }
.pf-tile { display: flex; flex-direction: column; gap: calc(3px * var(--ui)); padding: calc(14px * var(--ui)) calc(16px * var(--ui)); background: var(--bg); min-height: calc(86px * var(--ui)); }
.pf-tile b { font: var(--display-w) calc(calc(26px * var(--ui)) * var(--display-scale)) / 1.05 var(--display); letter-spacing: var(--display-ls); }
.pf-tile span { font-size: calc(12.5px * var(--ui)); color: var(--muted); }
.pf-tile small { font-size: calc(11.5px * var(--ui)); color: var(--faint); }
.pf-tabs { display: flex; gap: calc(26px * var(--ui)); border-bottom: 1px solid var(--line); margin-bottom: calc(16px * var(--ui)); }
.pf-tabs button { position: relative; padding: 0 0 calc(12px * var(--ui)); border: 0; background: none; color: var(--muted); font: var(--display-w) calc(calc(22px * var(--ui)) * var(--display-scale)) / 1.1 var(--display); letter-spacing: var(--display-ls); cursor: pointer; transition: color .15s; }
.pf-tabs button small { font: 500 calc(12px * var(--ui)) var(--font); letter-spacing: 0; color: var(--faint); margin-left: calc(6px * var(--ui)); }
.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: calc(2px * var(--ui)); background: var(--accent); }
.mu-top { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(calc(20px * var(--ui)), 4vw, calc(56px * var(--ui))); align-items: center; margin-bottom: calc(24px * var(--ui)); }
.mu-legend { display: flex; align-items: center; gap: calc(20px * var(--ui)); }
.mu-legend .medal.big .medal-coin { width: calc(132px * var(--ui)); }
.mu-legend b { display: block; font: var(--display-w) calc(calc(24px * var(--ui)) * var(--display-scale)) / 1.1 var(--display); letter-spacing: var(--display-ls); color: #f2c46a; }
.mu-legend p { margin: calc(4px * var(--ui)) 0 0; }
.mu-legend.locked b { color: var(--muted); } /* pas obtenue : visible et cliquable, mais en retrait */
.mu-tiers { display: grid; gap: calc(10px * var(--ui)); max-width: calc(520px * var(--ui)); }
.tier { display: grid; grid-template-columns: calc(74px * var(--ui)) 1fr calc(62px * var(--ui)); align-items: center; gap: calc(12px * var(--ui)); font-size: calc(13px * var(--ui)); }
.tier span { color: var(--rt); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; font-size: calc(11.5px * var(--ui)); }
.tier i { height: calc(6px * var(--ui)); border-radius: calc(3px * var(--ui)); 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: calc(4px * var(--ui)) 0 0; }
.mu-series { display: flex; flex-wrap: wrap; gap: calc(8px * var(--ui)); margin-bottom: calc(22px * var(--ui)); }
.mu-chip { display: inline-flex; align-items: center; gap: calc(8px * var(--ui)); height: calc(34px * var(--ui)); padding: 0 calc(14px * var(--ui)); border-radius: calc(17px * var(--ui)); border: 1px solid var(--line); background: none; color: var(--muted); font: 500 calc(13px * var(--ui)) var(--font); cursor: pointer; transition: color .15s, border-color .15s, background .15s; }
.mu-chip small { font-size: calc(11.5px * var(--ui)); 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(calc(132px * var(--ui)), 1fr)); gap: calc(26px * var(--ui)) calc(20px * var(--ui)); }
/* 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(calc(86px * var(--ui)), 1fr)); gap: calc(16px * var(--ui)) calc(12px * var(--ui)); }
.profile-page .pf-panel .medal { gap: calc(6px * var(--ui)); }
.profile-page .pf-panel .medal-cap { font-size: calc(12px * var(--ui)); }
.profile-page .mu-series { gap: calc(6px * var(--ui)); margin-bottom: calc(16px * var(--ui)); }
.profile-page .mu-chip { height: calc(30px * var(--ui)); padding: 0 calc(11px * var(--ui)); gap: calc(6px * var(--ui)); font-size: calc(12.5px * var(--ui)); }
.pf-panel .dex-grid { grid-template-columns: repeat(auto-fill, minmax(calc(118px * var(--ui)), 1fr)); gap: calc(8px * var(--ui)); }
.pf-panel .dex { padding: calc(22px * var(--ui)) calc(6px * var(--ui)) calc(10px * var(--ui)); }
.pf-panel .dex img { width: calc(76px * var(--ui)); height: calc(76px * var(--ui)); }
.pf-panel .dex b { font-size: calc(12.5px * var(--ui)); }
@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: calc(96px * var(--ui)); height: calc(96px * var(--ui)); } }

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

/* 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 calc(3px * var(--ui)) calc(4px * var(--ui)) 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(calc(380px * var(--ui)), calc(480px * var(--ui))); }
.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 calc(2px * var(--ui)) calc(2px * var(--ui)) rgba(0, 0, 0, 0.6)); }
.ws-label { font: 700 calc(5.2px * var(--ui)) var(--font); letter-spacing: .1em; }
.ws-glyph { font: 500 calc(19px * var(--ui)) 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 calc(13px * var(--ui)) var(--jp); fill: #15120e; }
.wheel-side { gap: calc(22px * var(--ui)); }
.wheel-title { font-size: calc(clamp(calc(40px * var(--ui)), 4vw, calc(56px * var(--ui))) * var(--display-scale)); }
.spin-box { padding: calc(18px * var(--ui)) 0; }
.spin-n { font-size: calc(calc(76px * var(--ui)) * var(--display-scale)); }
.spin-box span { font-size: calc(16px * var(--ui)); }
.spin-btn { height: calc(58px * var(--ui)); font-size: calc(17px * var(--ui)); }
.won-head { font-size: calc(calc(28px * var(--ui)) * var(--display-scale)); }
.won-badge .medal-coin { width: calc(132px * var(--ui)); }
.won-chibi img { height: calc(132px * var(--ui)); }
.won-row figcaption { font-size: calc(15px * var(--ui)); }
.odds { gap: calc(9px * var(--ui)); }
.odds .qz-kicker { margin-bottom: calc(4px * var(--ui)); }
.odd { font-size: calc(15px * var(--ui)); grid-template-columns: calc(14px * var(--ui)) 1fr auto; }
.odd i { width: calc(12px * var(--ui)); height: calc(12px * var(--ui)); }

/* 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 calc(2px * var(--ui)) color-mix(in srgb, var(--rc) 45%, transparent), 0 calc(12px * var(--ui)) calc(22px * var(--ui)) calc(-12px * var(--ui)) rgba(0, 0, 0, 0.9); }
.r-legendaire.medal.mystery .medal-coin { box-shadow: inset 0 0 0 calc(2px * var(--ui)) rgba(242, 196, 106, 0.3), 0 calc(12px * var(--ui)) calc(22px * var(--ui)) calc(-12px * var(--ui)) 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: calc(8px * var(--ui)); }
.chibi-perch { width: min(calc(430px * var(--ui)), 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: calc(48px * var(--ui)); height: calc(48px * var(--ui)); }
.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 calc(14px * var(--ui)) calc(26px * var(--ui)) calc(-14px * var(--ui)) rgba(0, 0, 0, 0.9); }
.pf-avatar.framed .pf-av-in { inset: calc(6px * var(--ui)); }
.avatar img.av-chibi { width: 100%; height: 100%; object-fit: cover; object-position: 50% 6%; transform: none; }
.avatar.framed { border: calc(2px * var(--ui)) 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(calc(1240px * var(--ui)), 96vw); }
.av-pick { padding: calc(18px * var(--ui)) calc(26px * var(--ui)) calc(22px * var(--ui)); }
.av-pick h2 { margin: 0; font-size: calc(calc(22px * var(--ui)) * var(--display-scale)); }
.av-pick > p { margin: calc(2px * var(--ui)) 0 0; font-size: calc(13px * var(--ui)); }
.av-pick h3 { margin: calc(14px * var(--ui)) 0 calc(8px * var(--ui)); }
.av-grid { grid-template-columns: repeat(auto-fill, minmax(calc(96px * var(--ui)), 1fr)); gap: calc(8px * var(--ui)); }
.av-opt { padding: calc(4px * var(--ui)); }

/* profil : tuiles Visionnage et Jeu à la même hauteur, compactes pour que le haut du profil tienne dans l'écran */
.pf-tile { height: calc(78px * var(--ui)); min-height: 0; justify-content: flex-start; padding: calc(10px * var(--ui)) calc(14px * var(--ui)); gap: calc(2px * var(--ui)); }
.pf-tile b { font-size: calc(calc(22px * var(--ui)) * 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: calc(16px * var(--ui)); flex-wrap: wrap; margin: 0 calc(40px * var(--ui)) calc(14px * var(--ui)) 0; }
.av-tabs small { margin-left: calc(4px * var(--ui)); color: var(--faint); }
.av-panel .av-grid { max-height: calc(100vh - calc(230px * var(--ui))); overflow-y: auto; padding: calc(4px * var(--ui)); margin: calc(-4px * var(--ui)); }
.av-reset { margin-top: calc(14px * var(--ui)); }

/* 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 calc(1.5px * var(--ui)) 1px rgba(255, 255, 255, 0.55), inset 0 calc(-2px * var(--ui)) calc(3px * var(--ui)) rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(0, 0, 0, 0.55), 0 calc(16px * var(--ui)) calc(26px * var(--ui)) calc(-14px * var(--ui)) 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 calc(1.5px * var(--ui)) 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(calc(520px * var(--ui))) rotateX(var(--tx, 0deg)) rotateY(var(--ty, 0deg)) translateY(calc(-4px * var(--ui))) 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: calc(-3px * var(--ui)); border-radius: 50%; pointer-events: none; box-shadow: 0 0 calc(22px * var(--ui)) rgba(242, 196, 106, 0.35); }
.av-opt.coin { padding: calc(5px * var(--ui)); }
.pf-avatar.framed .pf-av-in { box-shadow: 0 0 0 calc(1.5px * var(--ui)) rgba(0, 0, 0, 0.55); }
.avatar.framed { border: 0; padding: calc(2.5px * var(--ui)); }

/* 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: calc(26px * var(--ui)); 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(calc(340px * var(--ui)), 70vw); aspect-ratio: 1; display: grid; place-items: center; perspective: calc(1100px * var(--ui)); }
.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(calc(6px * var(--ui))); }
.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 calc(2px * var(--ui)) calc(2px * var(--ui)) rgba(255, 255, 255, 0.35), inset 0 calc(-3px * var(--ui)) calc(4px * var(--ui)) 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 calc(2px * var(--ui)) rgba(216, 150, 46, 0.25), inset 0 0 calc(40px * var(--ui)) rgba(0, 0, 0, 0.8); color: #d8962e; font: 700 clamp(calc(80px * var(--ui)), 16vw, calc(130px * var(--ui))) / 1 var(--jp); text-shadow: 0 calc(2px * var(--ui)) 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 calc(2px * var(--ui)) rgba(255, 255, 255, 0.5)); transition: filter .5s ease-out; }
.reveal.open .rv-chibi img { filter: drop-shadow(0 calc(18px * var(--ui)) calc(24px * var(--ui)) rgba(0, 0, 0, 0.6)); }
.rv-text { position: relative; z-index: 3; text-align: center; opacity: 0; transform: translateY(calc(12px * var(--ui))); 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 calc(12px * var(--ui)) 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: calc(6px * var(--ui)); font: var(--display-w) calc(clamp(calc(30px * var(--ui)), 4vw, calc(46px * var(--ui))) * 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(calc(-6px * var(--ui)), calc(3px * var(--ui))); } 40% { transform: translate(calc(5px * var(--ui)), calc(-4px * var(--ui))); } 60% { transform: translate(calc(-3px * var(--ui)), calc(2px * var(--ui))); } 80% { transform: translate(calc(2px * var(--ui)), -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: calc(44px * var(--ui)); }
.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(calc(560px * var(--ui)), 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: calc(3px * var(--ui)) 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) + calc(16px * var(--ui))); padding-bottom: calc(20px * var(--ui)); }
.privacy-notice { display: flex; align-items: center; gap: calc(10px * var(--ui)); margin: 0 0 calc(18px * var(--ui)); padding: calc(12px * var(--ui)) calc(15px * var(--ui)); border: 1px solid rgba(226, 185, 94, .35); border-radius: calc(10px * var(--ui)); color: #e2b95e; background: rgba(226, 185, 94, .07); font-size: calc(13px * var(--ui)); }
.privacy-notice .i { width: calc(17px * var(--ui)); height: calc(17px * var(--ui)); }
.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%, calc(420px * var(--ui))), 1fr)); gap: calc(22px * var(--ui)); padding: 0 0 calc(10px * var(--ui)); }
.pu-shelf { min-width: 0; }
.pu-shelf-head { display: flex; align-items: center; justify-content: space-between; gap: calc(12px * var(--ui)); margin-bottom: calc(6px * var(--ui)); }
.pu-shelf-head .qz-kicker small { color: var(--faint); margin-left: calc(4px * var(--ui)); }
.pu-shelf-head .link { display: inline-flex; align-items: center; gap: calc(4px * var(--ui)); }
.pu-shelf-head .link .i { width: calc(13px * var(--ui)); height: calc(13px * var(--ui)); }
.pu-shelf-row { display: grid; grid-auto-flow: column; grid-auto-columns: calc(52px * var(--ui)); gap: calc(8px * var(--ui)); overflow-x: auto; padding-bottom: calc(6px * var(--ui)); scrollbar-width: thin; }
.pu-poster { display: flex; flex-direction: column; gap: calc(3px * var(--ui)); min-width: 0; color: inherit; text-decoration: none; }
.pu-poster-cover { position: relative; display: block; aspect-ratio: 2 / 3; overflow: hidden; border-radius: calc(8px * var(--ui)); 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(calc(-3px * var(--ui))); 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: calc(3px * var(--ui)); width: calc(var(--f) * 100%); background: var(--accent); }
.pu-poster b { margin-top: calc(4px * var(--ui)); font-size: calc(12.5px * var(--ui)); 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: calc(11.5px * var(--ui)); color: var(--faint); }
.pu-poster b, .pu-poster small { display: none; }
.public-library-head { display: flex; align-items: center; justify-content: space-between; gap: calc(20px * var(--ui)); margin-bottom: calc(22px * var(--ui)); }
.public-library-filter { flex-wrap: wrap; }
.grid.fit-grid { gap: calc(18px * var(--ui)) calc(16px * var(--ui)); overflow-y: auto; scrollbar-width: none; justify-content: start; }
.grid.fit-grid::-webkit-scrollbar { display: none; }
.public-library-head { margin-bottom: calc(14px * var(--ui)); }
.public-favorite { position: absolute; top: calc(9px * var(--ui)); left: calc(9px * var(--ui)); z-index: 2; display: grid; place-items: center; width: calc(27px * var(--ui)); height: calc(27px * var(--ui)); border-radius: 50%; color: #f4cf64; background: rgba(15, 14, 12, .82); box-shadow: 0 calc(3px * var(--ui)) calc(10px * var(--ui)) 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: calc(12px * var(--ui)); }
.pf-hero .pf-avatar:not(.pf-avatar-mini) { width: calc(96px * var(--ui)); height: calc(96px * var(--ui)); }
.pf-hero .pf-avatar > .i { width: calc(38px * var(--ui)); height: calc(38px * var(--ui)); }
.pf-hero .pf-id h1 { font-size: calc(clamp(calc(28px * var(--ui)), 3vw, calc(38px * var(--ui))) * var(--display-scale)); margin-bottom: calc(6px * var(--ui)); }
.pf-hero .pf-ring svg { width: calc(60px * var(--ui)); height: calc(60px * var(--ui)); }
.pf-hero .pf-ring b { font-size: calc(calc(24px * var(--ui)) * 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(calc(12px * var(--ui)), 2vw, calc(26px * var(--ui))); height: calc(60px * var(--ui)); }
.pf-avatar.pf-avatar-mini { width: calc(40px * var(--ui)); height: calc(40px * var(--ui)); cursor: default; }
.pf-avatar-mini:hover { transform: none; }
.pf-avatar-mini.framed .pf-av-in { inset: calc(3px * var(--ui)); }
.pf-avatar-mini .pf-av-in > .i { width: calc(18px * var(--ui)); height: calc(18px * var(--ui)); }
.pf-mini-title { font: var(--display-w) calc(calc(19px * var(--ui)) * var(--display-scale)) / 1 var(--display); letter-spacing: var(--display-ls); margin-right: calc(6px * var(--ui)); }
.pf-mini-stat { font-size: calc(13px * var(--ui)); color: var(--muted); white-space: nowrap; }
.pf-mini-stat b { color: var(--text); font-weight: 700; margin-right: calc(2px * var(--ui)); }
.pf-mini-tabs { margin-left: auto; display: flex; gap: calc(4px * var(--ui)); }
.pf-mini-tabs button { height: calc(32px * var(--ui)); padding: 0 calc(12px * var(--ui)); border-radius: calc(6px * var(--ui)); border: 0; background: none; color: var(--muted); font: 500 calc(13px * var(--ui)) 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: calc(4px * var(--ui)); margin: 0 0 calc(14px * var(--ui)); }
.won-list span { font-size: calc(16px * var(--ui)); }
.won-list small { font-size: calc(11.5px * var(--ui)); letter-spacing: .1em; text-transform: uppercase; color: var(--rt, var(--muted)); margin-left: calc(4px * var(--ui)); }
/* 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(calc(520px * var(--ui))) rotateX(var(--tx, 0deg)) rotateY(var(--ty, 0deg)) translateY(calc(-3px * var(--ui))); }
.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 calc(3px * var(--ui)) calc(4px * var(--ui)) 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(calc(620px * var(--ui)), 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: calc(10px * var(--ui)) 0 0 !important; font-size: calc(14px * var(--ui)) !important; line-height: 1.5; color: var(--muted); }
.b3d-odds { display: block; margin-top: calc(10px * var(--ui)); font-size: calc(12px * var(--ui)); 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(calc(760px * var(--ui)), 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 + calc(92px * var(--ui))); }
.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) - calc(10px * var(--ui))); 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(calc(46px * var(--ui)), 7vw, calc(96px * var(--ui))) * 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 calc(5px * var(--ui)) 0 rgba(0, 0, 0, 0.55), 0 0 calc(34px * var(--ui)) color-mix(in srgb, var(--glow) 65%, transparent); }
.rv-tier small { display: block; margin-top: calc(6px * var(--ui)); font: 700 calc(13px * var(--ui)) 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) - calc(22px * var(--ui))); transform: translate(-50%, -100%); display: flex; flex-direction: column; align-items: center; gap: calc(4px * var(--ui)); width: min(92vw, calc(900px * var(--ui))); pointer-events: none; }
.reveal.is-3d .rv-head .rv-tier { position: static; transform: skewX(-12deg) rotate(-4deg); min-height: calc(clamp(calc(46px * var(--ui)), 7vw, calc(96px * var(--ui))) * .9 + calc(24px * var(--ui))); }
.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: calc(30px * var(--ui)); font: var(--display-w) calc(calc(24px * var(--ui)) * 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(calc(-14px * var(--ui))); letter-spacing: .4em; } 100% { opacity: .9; transform: none; letter-spacing: .06em; } }
.reveal.is-3d .rv-head .rv-text { position: static; min-height: calc(64px * var(--ui)); }
.reveal.is-3d .rv-head .rv-text b { font-size: calc(clamp(calc(26px * var(--ui)), 3.4vw, calc(40px * var(--ui))) * var(--display-scale)); }
.reveal.is-3d .rv-next { top: calc(var(--cy) + var(--cr) * 1.12 + calc(26px * var(--ui))); }
.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) - calc(4px * var(--ui))); }
.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 + calc(8px * var(--ui))); transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: calc(10px * var(--ui)); width: min(92vw, calc(900px * var(--ui))); 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(calc(26px * var(--ui)), 3.2vw, calc(38px * var(--ui))) * var(--display-scale)); margin-top: calc(2px * var(--ui)); }
.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: calc(14px * var(--ui)); padding: calc(7px * var(--ui)) calc(18px * var(--ui)); border-radius: calc(4px * var(--ui)); 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 calc(8px * var(--ui)) calc(18px * var(--ui)) calc(-10px * var(--ui)) rgba(0, 0, 0, 0.9); font: 700 calc(14px * var(--ui)) var(--font); letter-spacing: .22em; text-transform: uppercase; color: var(--rt, #e6d3b0); }
.rv-series span::before, .rv-series span::after { content: ""; width: calc(18px * var(--ui)); 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(calc(10px * var(--ui))) scale(.92); } 100% { opacity: 1; transform: none; } }
.reveal.is-3d .rv-head { top: calc(var(--cy) - var(--cr) - calc(26px * var(--ui))); }
.reveal.is-3d .rv-next { top: calc(var(--cy) + var(--cr) * 1.08 + calc(118px * var(--ui))); bottom: auto; }
.reveal.is-3d .rv-foot .rv-text b { margin-top: calc(10px * var(--ui)); }
.reveal.is-3d .rv-next { top: calc(var(--cy) + var(--cr) * 1.08 + calc(134px * var(--ui))); }

/* 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(calc(18px * var(--ui))) saturate(.85); backdrop-filter: blur(calc(18px * var(--ui))) 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 calc(3px * var(--ui)) 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: calc(8px * var(--ui)); -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 calc(3px * var(--ui)) calc(4px * var(--ui)) rgba(0, 0, 0, 0.5)); }
.chibi-perch .perch-track img.flat:not(.shadow) { filter: blur(var(--bl, 0px)) drop-shadow(0 0 calc(3px * var(--ui)) 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: calc(-48px * var(--ui)); -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 calc(48px * var(--ui)), #000 calc(100% - calc(48px * var(--ui))), transparent); mask-image: linear-gradient(90deg, transparent 0, #000 calc(48px * var(--ui)), #000 calc(100% - calc(48px * var(--ui))), transparent); }
.chibi-perch .perch-track img { --bl: 0px; }
@media (max-width: 900px) { .chibi-perch { right: calc(-16px * var(--ui)); } }
/* 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 calc(56px * var(--ui)), #000 calc(100% - calc(72px * var(--ui))), transparent); mask-image: linear-gradient(90deg, transparent 0, #000 calc(56px * var(--ui)), #000 calc(100% - calc(72px * var(--ui))), transparent); }
.perch-track img { margin-right: calc(20px * var(--ui)); }
@media (max-width: 900px) { .perch-track img { margin-right: calc(12px * var(--ui)); } }
/* 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: calc(34px * var(--ui)); cursor: pointer; }
@media (max-width: 900px) { .perch-track img { margin-right: calc(18px * var(--ui)); } }
/* carte d'un chibi */
.modal.cx-modal { width: min(calc(420px * var(--ui)), 92vw); }
.cx-card { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: calc(6px * var(--ui)); padding: calc(34px * var(--ui)) calc(28px * var(--ui)) calc(28px * var(--ui)); }
.cx-no { position: absolute; top: calc(16px * var(--ui)); left: calc(18px * var(--ui)); font: 500 calc(12px * var(--ui)) var(--mono); letter-spacing: .06em; color: var(--faint); }
.cx-art { width: calc(220px * var(--ui)); height: calc(220px * var(--ui)); display: grid; place-items: center; margin-bottom: calc(10px * var(--ui)); 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 calc(12px * var(--ui)) calc(18px * var(--ui)) rgba(0, 0, 0, 0.55)); animation: cxIn .5s cubic-bezier(.2, 1.4, .4, 1) both; }
@keyframes cxIn { from { opacity: 0; transform: translateY(calc(12px * var(--ui))) 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: calc(2px * var(--ui)) 0 0; font: var(--display-w) calc(calc(28px * var(--ui)) * 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 calc(16px * var(--ui)); font-size: calc(13.5px * var(--ui)); }
/* 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 calc(4px * var(--ui)) 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: calc(126px * var(--ui)); margin-bottom: calc(-14px * var(--ui)); }
@media (max-width: 900px) { .chibi-perch .perch-track img { height: calc(83px * var(--ui)); margin-bottom: calc(-9px * var(--ui)); } }
/* 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: calc(-17px * var(--ui)); }
.chibi-perch .perch-track img:not(.shadow), .chibi-perch .perch-track img.flat:not(.shadow) { filter: drop-shadow(0 1px calc(1.5px * var(--ui)) rgba(0, 0, 0, 0.6)); }
@media (max-width: 900px) { .chibi-perch .perch-track img { margin-bottom: calc(-11px * var(--ui)); } }
/* 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: calc(-48px * var(--ui)); padding-bottom: calc(20px * var(--ui)); }
/* perchoir : écart un peu réduit */
.perch-track img { margin-right: calc(28px * var(--ui)); }
@media (max-width: 900px) { .perch-track img { margin-right: calc(15px * var(--ui)); } }
/* 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(calc(1000px * var(--ui))) 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(calc(28px * var(--ui))) 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(calc(8px * var(--ui))); } }
@media (max-width: 900px) {
  .modal-wrap .modal.cx-modal { transform: translateY(calc(40px * var(--ui))) 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: calc(109px * var(--ui)); margin-right: calc(28px * var(--ui)); cursor: pointer; }
.chibi-perch .perch-track .pc img { display: block; height: calc(126px * var(--ui)); margin: 0; pointer-events: none; }
.chibi-perch.fits .perch-track .pc:first-child { margin-right: 0; }
@media (max-width: 900px) { .perch-track .pc { height: calc(72px * var(--ui)); margin-right: calc(15px * var(--ui)); } .chibi-perch .perch-track .pc img { height: calc(83px * var(--ui)); } }
/* carte d'un chibi : exemplaires, chance par tour, badge Légendaire ; ouvrable depuis le Chibidex */
.dex { cursor: pointer; }
.cx-rar { position: absolute; top: calc(15px * var(--ui)); right: calc(52px * var(--ui)); font: 600 calc(10.5px * var(--ui)) 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 calc(18px * var(--ui)); border: 1px solid var(--line); border-radius: calc(10px * var(--ui)); overflow: hidden; }
.cx-stats > div { display: flex; flex-direction: column; gap: calc(2px * var(--ui)); padding: calc(10px * var(--ui)) calc(8px * var(--ui)); }
.cx-stats > div + div { border-left: 1px solid var(--line); }
.cx-stats b { font: var(--display-w) calc(20px * var(--ui)) / 1.1 var(--display); letter-spacing: var(--display-ls); }
.cx-stats span { font-size: calc(11.5px * var(--ui)); color: var(--muted); }
.cx-card p { margin-bottom: calc(12px * var(--ui)); }
.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: calc(10px * var(--ui)); }
/* perchoir : coupe du buste pile sur le trait (plus d'enfoncement) ; seuls mains et pieds pendent devant */
.perch-track .pc { height: calc(112px * var(--ui)); }
@media (max-width: 900px) { .perch-track .pc { height: calc(74px * var(--ui)); } }
/* 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) calc(280px * var(--ui)); gap: calc(28px * var(--ui)); align-items: start; }
.game-side { position: sticky; top: calc(84px * var(--ui)); display: flex; flex-direction: column; gap: calc(14px * var(--ui)); }
.game-side .wheel-link { margin: 0; border-radius: var(--radius); padding: calc(12px * var(--ui)) calc(14px * var(--ui)) calc(12px * var(--ui)) calc(12px * var(--ui)); }
.game-side .wheel-link .i { margin-left: auto; }
.gs-stats { display: flex; flex-direction: column; padding: calc(14px * var(--ui)) calc(16px * var(--ui)) calc(6px * var(--ui)); border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.gs-stats .qz-kicker { margin-bottom: calc(6px * var(--ui)); }
.gs-stats > div { display: flex; align-items: baseline; gap: calc(10px * var(--ui)); padding: calc(9px * var(--ui)) 0; border-top: 1px solid var(--line); }
.gs-stats > div:first-of-type { border-top: 0; }
.gs-stats b { min-width: calc(64px * var(--ui)); font: var(--display-w) calc(20px * var(--ui)) / 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: calc(12.5px * var(--ui)); color: var(--muted); }
.quiz-zone { padding: calc(22px * var(--ui)) calc(24px * var(--ui)) calc(26px * var(--ui)); border: 1px solid var(--line); border-radius: calc(14px * var(--ui)); background: var(--bg-2); min-height: calc(420px * var(--ui)); }
.qz-rules { display: flex; flex-wrap: wrap; gap: calc(8px * var(--ui)); margin: calc(18px * var(--ui)) 0 0; padding: 0; list-style: none; }
.qz-rules li { padding: calc(6px * var(--ui)) calc(11px * var(--ui)); border-radius: calc(999px * var(--ui)); border: 1px solid var(--line); font-size: calc(12.5px * var(--ui)); color: var(--muted); }
.qz-rules b { color: var(--text); font-weight: 600; }
.qz-rule { margin: calc(18px * var(--ui)) 0 calc(14px * var(--ui)); }
.qz-themes { grid-template-columns: repeat(4, minmax(0, calc(170px * var(--ui)))); gap: calc(18px * var(--ui)); }
.qz-theme { gap: calc(9px * var(--ui)); }
.qz-theme b { font-size: calc(calc(15px * var(--ui)) * 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: calc(8px * var(--ui)); right: calc(8px * var(--ui)); width: calc(22px * var(--ui)); height: calc(22px * var(--ui)); box-shadow: inset 0 0 0 calc(6px * var(--ui)) var(--accent), inset 0 0 0 calc(11px * var(--ui)) var(--accent-ink); }
.qz-actions { margin-top: calc(22px * var(--ui)); }
.qz-q { max-width: none; }
.qz-done { display: flex; align-items: center; justify-content: space-between; gap: calc(18px * var(--ui)); padding: calc(22px * var(--ui)) 0 calc(6px * var(--ui)); }
.qz-done p { margin: calc(6px * var(--ui)) 0 0; }
.qz-end-actions { display: flex; gap: calc(10px * var(--ui)); flex-wrap: wrap; }
/* correction : un onglet par essai */
.qr { margin-top: calc(22px * var(--ui)); padding-top: calc(18px * var(--ui)); border-top: 1px solid var(--line); }
.qr-head { display: flex; align-items: center; justify-content: space-between; gap: calc(14px * var(--ui)); flex-wrap: wrap; }
.qr-head .qz-kicker { margin: 0; }
.qr-tabs { display: flex; gap: calc(6px * var(--ui)); }
.qr-tab { display: flex; align-items: baseline; gap: calc(8px * var(--ui)); padding: calc(7px * var(--ui)) calc(12px * var(--ui)); border-radius: calc(8px * var(--ui)); border: 1px solid var(--line); background: none; color: var(--muted); font-size: calc(12.5px * var(--ui)); transition: border-color .15s, color .15s, background .15s; }
.qr-tab b { font: 600 calc(14px * var(--ui)) var(--mono); color: var(--text); }
.qr-tab b small { font-size: calc(11px * var(--ui)); 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: calc(16px * var(--ui)) 0 calc(18px * var(--ui)); border: 1px solid var(--line); border-radius: calc(10px * var(--ui)); }
.qr-sum > div { display: flex; flex-direction: column; gap: calc(3px * var(--ui)); padding: calc(12px * var(--ui)) calc(18px * var(--ui)); min-width: 0; }
.qr-sum > div + div { border-left: 1px solid var(--line); }
.qr-sum b { font: var(--display-w) calc(22px * var(--ui)) / 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 calc(14px * var(--ui)) / 1.35 var(--font); letter-spacing: 0; padding-top: calc(4px * var(--ui)); }
.qr-sum span { font-size: calc(12px * var(--ui)); color: var(--muted); }
.qr-list { display: flex; flex-direction: column; gap: calc(12px * var(--ui)); margin: 0; padding: 0; list-style: none; }
.qr-item { padding: calc(14px * var(--ui)) calc(16px * var(--ui)); border: 1px solid var(--line); border-left: calc(3px * var(--ui)) solid var(--line-2); border-radius: calc(10px * var(--ui)); 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: calc(10px * var(--ui)); flex-wrap: wrap; font-size: calc(12px * var(--ui)); color: var(--muted); }
.qr-num { font: 600 calc(13px * var(--ui)) 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: calc(3px * var(--ui)); }
.qr-diff i { width: calc(5px * var(--ui)); height: calc(10px * var(--ui)); border-radius: 1px; background: var(--surface-3); }
.qr-diff i:last-of-type { margin-right: calc(5px * var(--ui)); }
.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: calc(14px * var(--ui)); margin: calc(10px * var(--ui)) 0 calc(10px * var(--ui)); }
.qr-q img { width: calc(52px * var(--ui)); aspect-ratio: 3 / 4; object-fit: cover; border-radius: calc(6px * var(--ui)); flex: none; background: var(--surface-2); }
.qr-q h4 { margin: 0; font: 600 calc(16px * var(--ui)) / 1.35 var(--font); letter-spacing: 0; }
.qr-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(6px * var(--ui)); margin: 0; padding: 0; list-style: none; }
.qr-choices li { display: flex; align-items: center; justify-content: space-between; gap: calc(8px * var(--ui)); padding: calc(7px * var(--ui)) calc(11px * var(--ui)); border-radius: calc(7px * var(--ui)); border: 1px solid var(--line); font-size: calc(13.5px * var(--ui)); color: var(--muted); }
.qr-choices li small { flex: none; font-size: calc(11px * var(--ui)); }
.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: calc(8px * var(--ui)) 0 0; font-size: calc(12.5px * var(--ui)); color: var(--red); }
.qr-detail { display: flex; gap: calc(14px * var(--ui)); align-items: flex-start; margin-top: calc(10px * var(--ui)); padding: calc(10px * var(--ui)) calc(12px * var(--ui)); border-left: calc(2px * var(--ui)) solid var(--amber); background: var(--bg-2); border-radius: 0 calc(6px * var(--ui)) calc(6px * var(--ui)) 0; }
.qr-detail img { width: calc(120px * var(--ui)); border-radius: calc(6px * var(--ui)); flex: none; }
.qr-detail p { margin: 0; font-size: calc(13.5px * var(--ui)); 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: calc(14px * var(--ui)); padding-bottom: calc(10px * var(--ui)); }
  .gs-stats .qz-kicker { grid-column: 1 / -1; }
  .gs-stats > div { flex-direction: column; gap: calc(2px * var(--ui)); padding: calc(6px * var(--ui)) 0; border: 0; }
  .qz-themes { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: calc(12px * var(--ui)); }
}
@media (max-width: 600px) {
  .game-side { grid-template-columns: 1fr; }
  .quiz-zone { padding: calc(16px * var(--ui)) calc(14px * var(--ui)) calc(18px * var(--ui)); border-radius: calc(12px * var(--ui)); }
  .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: calc(7px * var(--ui)) calc(6px * var(--ui)); } }
/* Jeu : essais du jour (colonne), bandeau du dernier essai, cartes d'essai, correction en fenêtre */
.gs-card { display: flex; flex-direction: column; padding: calc(14px * var(--ui)) calc(16px * var(--ui)) calc(12px * var(--ui)); border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.gs-tries .qz-kicker { margin-bottom: calc(8px * var(--ui)); }
.gt-row { display: flex; align-items: center; gap: calc(10px * var(--ui)); width: 100%; padding: calc(9px * var(--ui)) calc(10px * var(--ui)); margin: 0 calc(-10px * var(--ui)); width: calc(100% + calc(20px * var(--ui))); border: 0; border-radius: calc(8px * var(--ui)); background: none; color: var(--text); font-size: calc(13px * var(--ui)); 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 calc(15px * var(--ui)) var(--mono); }
.gt-row b small { font-size: calc(11px * var(--ui)); color: var(--muted); }
.gt-row em { min-width: calc(52px * var(--ui)); font-style: normal; font-size: calc(11.5px * var(--ui)); color: var(--muted); text-align: right; }
.gt-row.won em { color: var(--green); font-weight: 600; }
.gt-row .i { width: calc(14px * var(--ui)); height: calc(14px * var(--ui)); color: var(--faint); }
.gt-row.todo em { color: var(--faint); }
.gt-row.todo { padding-right: calc(34px * var(--ui)); }
.gt-foot { margin: calc(8px * var(--ui)) 0 0; padding-top: calc(10px * var(--ui)); border-top: 1px solid var(--line); font-size: calc(12px * var(--ui)); 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: calc(18px * var(--ui)); margin-top: calc(16px * var(--ui)); padding: calc(14px * var(--ui)) calc(48px * var(--ui)) calc(14px * var(--ui)) calc(18px * var(--ui)); border: 1px solid var(--line-2); border-left: calc(3px * var(--ui)) solid var(--red); border-radius: calc(10px * var(--ui)); 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(calc(-8px * var(--ui))); } }
.ql-score { font: var(--display-w) calc(calc(40px * var(--ui)) * var(--display-scale)) / 1 var(--display); letter-spacing: var(--display-ls); }
.ql-score small { font-size: .4em; color: var(--muted); margin-left: calc(3px * var(--ui)); }
.qz-last.win .ql-score { color: var(--green); }
.ql-text { flex: 1; min-width: 0; }
.ql-text .qz-kicker { margin-bottom: calc(2px * var(--ui)); }
.ql-text p { margin: 0; font-size: calc(14px * var(--ui)); }
.ql-actions { display: flex; gap: calc(8px * var(--ui)); flex-wrap: wrap; }
.ql-x { position: absolute; top: calc(8px * var(--ui)); right: calc(8px * var(--ui)); }
.qa-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(12px * var(--ui)); margin-top: calc(20px * var(--ui)); }
.qa-card { display: flex; flex-direction: column; align-items: flex-start; gap: calc(4px * var(--ui)); padding: calc(16px * var(--ui)) calc(16px * var(--ui)) calc(14px * var(--ui)); border: 1px solid var(--line); border-top: calc(3px * var(--ui)) solid var(--red); border-radius: calc(10px * var(--ui)); 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(calc(-2px * var(--ui))); border-color: var(--line-2); }
.qa-card .qz-kicker { margin: 0; }
.qa-card b { font: var(--display-w) calc(calc(38px * var(--ui)) * var(--display-scale)) / 1 var(--display); letter-spacing: var(--display-ls); }
.qa-card b small { font-size: .42em; color: var(--muted); margin-left: calc(3px * var(--ui)); }
.qa-card em { font-style: normal; font-size: calc(12.5px * var(--ui)); font-weight: 600; color: var(--muted); }
.qa-card.won em { color: var(--green); }
.qa-themes { font-size: calc(12.5px * var(--ui)); color: var(--muted); }
.qa-open { display: inline-flex; align-items: center; gap: calc(4px * var(--ui)); margin-top: calc(8px * var(--ui)); font-size: calc(12.5px * var(--ui)); color: var(--accent); }
.qa-open .i { width: calc(14px * var(--ui)); height: calc(14px * var(--ui)); }
.modal.qr-modal { width: min(calc(980px * var(--ui)), 100%); padding: calc(26px * var(--ui)) calc(28px * var(--ui)) calc(28px * var(--ui)); }
.qr-modal .qr { margin: 0; padding: 0; border: 0; }
.qr-modal .qr-head { padding-right: calc(40px * var(--ui)); }
.qr-modal .qr-head h3 { margin: calc(2px * var(--ui)) 0 0; font: var(--display-w) calc(calc(26px * var(--ui)) * var(--display-scale)) / 1.1 var(--display); letter-spacing: var(--display-ls); }
@media (max-width: 600px) {
  .qz-last { flex-wrap: wrap; padding-right: calc(44px * var(--ui)); }
  .ql-actions { width: 100%; }
  .qa-cards { grid-template-columns: 1fr; }
  .modal.qr-modal { padding: calc(18px * var(--ui)) calc(14px * var(--ui)) calc(20px * var(--ui)); }
}
/* 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: calc(14px * var(--ui)); }
.ql-actions { align-items: center; }
.ql-actions .ql-x { position: static; width: calc(40px * var(--ui)); height: calc(40px * var(--ui)); }
.qz-tries i.used.lost { background: var(--red); }
@media (max-width: 600px) { .qz-last { padding-right: calc(14px * var(--ui)); } .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: calc(14px * var(--ui)); }
.qr-stage { min-height: calc(330px * var(--ui)); }
.qr-stage .qr-item { animation: qrIn .25s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes qrIn { from { opacity: 0; transform: translateY(calc(6px * var(--ui))); } }
.qr-choices li { justify-content: flex-start; }
.qr-nav { display: flex; align-items: center; justify-content: center; gap: calc(12px * var(--ui)); margin-top: calc(16px * var(--ui)); padding-top: calc(16px * var(--ui)); border-top: 1px solid var(--line); }
.qr-nav .icon-btn:disabled { opacity: .35; pointer-events: none; }
.qr-dots { display: flex; gap: calc(6px * var(--ui)); flex-wrap: wrap; justify-content: center; }
.qr-dot { width: calc(32px * var(--ui)); height: calc(32px * var(--ui)); border-radius: calc(6px * var(--ui)); border: 1px solid transparent; font: 600 calc(12px * var(--ui)) 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(calc(-2px * var(--ui))); box-shadow: 0 0 0 calc(2px * var(--ui)) var(--bg-2), 0 0 0 calc(4px * var(--ui)) var(--text); }
@media (max-width: 600px) {
  .qr-stage { min-height: 0; }
  .qr-nav { gap: calc(6px * var(--ui)); }
  .qr-dot { width: calc(26px * var(--ui)); height: calc(26px * var(--ui)); font-size: calc(11px * var(--ui)); }
  .qr-dots { gap: calc(4px * var(--ui)); }
}
@media (max-width: 600px) {
  .qr-modal .qr-nav { position: sticky; bottom: calc(-20px * var(--ui)); margin: calc(14px * var(--ui)) calc(-14px * var(--ui)) calc(-20px * var(--ui)); padding: calc(12px * var(--ui)) calc(10px * var(--ui)) calc(14px * var(--ui)); background: var(--bg-2); z-index: 2; }
  .qr-modal .qr-head h3 { font-size: calc(calc(22px * var(--ui)) * var(--display-scale)); }
  .qr-modal .qr-sum { grid-template-columns: auto auto minmax(0, 1fr); margin: calc(12px * var(--ui)) 0 calc(10px * var(--ui)); }
  .qr-modal .qr-sum > div { padding: calc(8px * var(--ui)) calc(10px * var(--ui)); }
  .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: calc(17px * var(--ui)); }
  .qr-modal .qr-sum b.qr-themes { font-size: calc(12.5px * var(--ui)); padding-top: calc(2px * var(--ui)); }
  .qr-modal .qr-sum span { font-size: calc(11px * var(--ui)); }
}
@media (max-width: 600px) {
  .qr-modal .qr-nav .icon-btn { display: none; }
  .qr-modal .qr-dots { flex-wrap: nowrap; gap: calc(4px * var(--ui)); }
  .qr-modal .qr-dot { width: calc(25px * var(--ui)); height: calc(30px * var(--ui)); 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: calc(12px * var(--ui)); 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: calc(19px * var(--ui)); line-height: 1.3; }
.qr-choices li { font-size: calc(14.5px * var(--ui)); padding: calc(9px * var(--ui)) calc(12px * var(--ui)); }
.qr-sum b { font-size: calc(26px * var(--ui)); }
.qr-sum b small { font-size: .7em; }
.qr-stage > .qr-detail { display: block; padding: calc(12px * var(--ui)) calc(16px * var(--ui)) calc(14px * var(--ui)); border: 1px solid color-mix(in srgb, var(--amber) 35%, var(--line)); border-left: calc(3px * var(--ui)) solid var(--amber); border-radius: calc(10px * var(--ui)); background: color-mix(in srgb, var(--amber) 7%, var(--surface)); }
.qr-detail-k { display: inline-flex; align-items: center; gap: calc(6px * var(--ui)); margin-bottom: calc(6px * var(--ui)); font: 600 calc(11px * var(--ui)) var(--font); letter-spacing: .14em; text-transform: uppercase; color: var(--amber); }
.qr-detail-k .i { width: calc(14px * var(--ui)); height: calc(14px * var(--ui)); }
.qr-detail-b { display: flex; gap: calc(14px * var(--ui)); align-items: flex-start; }
.qr-detail-b p { margin: 0; font-size: calc(14.5px * var(--ui)); line-height: 1.6; color: var(--text); opacity: .88; }
.qr-modal .qr-nav { margin-top: calc(14px * var(--ui)); padding-top: calc(14px * var(--ui)); }
@media (max-width: 600px) {
  .qr-q h4 { font-size: calc(17px * var(--ui)); }
  .qr-modal .qr-sum b { font-size: calc(20px * var(--ui)); }
  .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: calc(20px * var(--ui)); }
@media (min-width: 601px) { .qr-modal .qr-nav { margin-top: calc(24px * var(--ui)); padding-top: calc(16px * var(--ui)); } }
@media (max-width: 600px) { .qr-stage > .qr-detail { margin-top: calc(14px * var(--ui)); margin-bottom: calc(6px * var(--ui)); } }
/* 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(calc(26px * var(--ui)) * var(--display-scale)) / 1.15 var(--display); letter-spacing: var(--display-ls); padding: 0; }
.qr-q { margin: calc(18px * var(--ui)) 0 calc(14px * var(--ui)); }
@media (max-width: 600px) {
  .qr-modal .qr-sum b.qr-themes { font-size: calc(calc(18px * var(--ui)) * var(--display-scale)); }
  .qr-q { margin: calc(14px * var(--ui)) 0 calc(12px * var(--ui)); }
}
/* --- 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: calc(46px * var(--ui)); height: calc(46px * var(--ui)); border-radius: 50%; pointer-events: none; font: 700 calc(15px * var(--ui)) var(--mono); color: #3b2604;
  background: radial-gradient(circle at 35% 30%, #fff3c4, #ffcf4d 38%, #c98a17 75%, #8a5a0c); box-shadow: inset 0 0 0 calc(3px * var(--ui)) rgba(255, 240, 190, 0.55), inset 0 calc(-4px * var(--ui)) calc(8px * var(--ui)) rgba(80, 45, 0, 0.45), 0 calc(10px * var(--ui)) calc(22px * var(--ui)) calc(-6px * var(--ui)) 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 calc(4px * var(--ui)) 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(calc(700px * var(--ui))) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(calc(-6px * var(--ui))) scale(1.03); transition: transform .08s linear, outline-color .2s, box-shadow .3s; box-shadow: 0 calc(26px * var(--ui)) calc(34px * var(--ui)) calc(-18px * var(--ui)) 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(calc(800px * var(--ui))) rotateX(-24deg) translateY(calc(24px * var(--ui))); } }
.qa-card.tilt3d.tilting { transform: perspective(calc(800px * var(--ui))) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(calc(-3px * var(--ui))); 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(calc(900px * var(--ui))) rotateX(16deg) translateY(calc(18px * var(--ui))); } }
.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(calc(10px * var(--ui))) scale(.97); } }
.qz-choice.pop { animation: qzPop .5s cubic-bezier(.2, 1.6, .4, 1); box-shadow: 0 0 0 calc(3px * var(--ui)) 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(calc(-2px * var(--ui))); } 30%, 70% { transform: translateX(calc(5px * var(--ui))); } 45%, 55% { transform: translateX(calc(-6px * var(--ui))); } }
.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: calc(3px * var(--ui)) calc(9px * var(--ui)); border-radius: calc(999px * var(--ui)); border: 1px solid color-mix(in srgb, var(--amber) 55%, transparent); color: var(--amber); font: 600 calc(11.5px * var(--ui)) 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(calc(900px * var(--ui))) 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 calc(18px * var(--ui)) 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(calc(1000px * var(--ui))) rotateY(calc(var(--dir, 0) * 22deg)) translateX(calc(var(--dir, 0) * calc(36px * var(--ui)))) translateY(calc((1 - var(--dir, 0) * var(--dir, 0)) * calc(8px * var(--ui)))); } }
.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) calc(1.1px * var(--ui)), transparent calc(1.6px * var(--ui))); background-size: calc(8px * var(--ui)) calc(8px * var(--ui));
  -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: calc(-32px * var(--ui)) calc(-32px * var(--ui)); } }
.qa-ghost { position: absolute; right: calc(10px * var(--ui)); bottom: calc(-34px * var(--ui)); font: var(--display-w) calc(150px * var(--ui)) / 1 var(--display); letter-spacing: -.04em; color: transparent; -webkit-text-stroke: calc(1.5px * var(--ui)) 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(calc(40px * var(--ui))); } }
@keyframes qaFloat { from { transform: translateY(0) rotate(0deg); } to { transform: translateY(calc(-7px * var(--ui))) rotate(-2deg); } }
.qa-card:hover .qa-tone { opacity: 1; }
.qa-card:hover .qa-ghost { translate: calc(-10px * var(--ui)) 0; }
.qa-card.won .qa-bg::after { content: ""; position: absolute; top: 0; left: 0; width: 38%; height: calc(2px * var(--ui)); 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(calc(-2px * var(--ui))) scale(1.06); } 90% { transform: none; } }

@media (max-width: 600px) { .qa-ghost { font-size: calc(120px * var(--ui)); bottom: calc(-28px * var(--ui)); } }
@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: calc(6px * var(--ui)); }
.gs-tools .qz-kicker { margin-bottom: calc(4px * var(--ui)); }
.gs-tools .btn { justify-content: flex-start; width: 100%; }
.gs-tools .btn .i { width: calc(14px * var(--ui)); height: calc(14px * var(--ui)); }
/* 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: calc(14px * var(--ui)); }
.qz-help { position: relative; display: inline-grid; place-items: center; width: calc(24px * var(--ui)); height: calc(24px * var(--ui)); padding: 0; border-radius: 50%; border: 1px solid var(--line-2); background: none; color: var(--muted); font: 600 calc(12.5px * var(--ui)) 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% + calc(10px * var(--ui))); right: calc(-6px * var(--ui)); z-index: 30; width: calc(250px * var(--ui)); padding: calc(12px * var(--ui)) calc(14px * var(--ui)); border: 1px solid var(--line-2); border-radius: calc(10px * var(--ui)); background: var(--surface); box-shadow: 0 calc(14px * var(--ui)) calc(30px * var(--ui)) calc(-12px * var(--ui)) rgba(0, 0, 0, 0.8);
  text-align: left; cursor: default; opacity: 0; visibility: hidden; transform: translateY(calc(-4px * var(--ui))); 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 calc(8px * var(--ui)); }
.qz-help-tip .qz-rules { display: grid; gap: calc(7px * var(--ui)); margin: 0; }
.qz-help-tip .qz-rules li { padding: 0; border: 0; border-radius: 0; font-size: calc(13px * var(--ui)); font-weight: 400; color: var(--muted); }
.qz-help-tip .qz-rules b { font: 600 calc(13px * var(--ui)) / 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 calc(12px * var(--ui)); }
.nav a::after, .nav a.on::after { left: calc(12px * var(--ui)); right: calc(12px * var(--ui)); bottom: -1px; border-radius: calc(2px * var(--ui)) calc(2px * var(--ui)) 0 0; }
@media (max-width: 900px) { .nav a::after, .nav a.on::after { left: calc(8px * var(--ui)); right: calc(8px * var(--ui)); } }
/* 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: calc(220px * var(--ui)); display: flex; justify-content: center; align-items: flex-start; margin-bottom: calc(14px * var(--ui)); border-radius: 0; background: none; }
.cx-art img { position: relative; z-index: 1; height: calc(220px * var(--ui)); width: auto; max-width: none; max-height: none; object-fit: initial; filter: drop-shadow(0 1px calc(1.5px * var(--ui)) rgba(0, 0, 0, 0.6)); }
.cx-ledge { position: absolute; left: 0; right: 0; top: calc(calc(220px * var(--ui)) * 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: calc(18px * var(--ui)); 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: calc(22px * var(--ui)); height: calc(22px * var(--ui)); 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 calc(-2px * var(--ui)) calc(3px * var(--ui)) rgba(0, 0, 0, 0.45), 0 calc(2px * var(--ui)) calc(5px * var(--ui)) 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 calc(6px * var(--ui)) rgba(150, 120, 255, 0.35), 0 calc(2px * var(--ui)) calc(5px * var(--ui)) rgba(0, 0, 0, 0.55); }
/* vitrine : choix de la version en haut à droite de la scène */
.b3d-tiers { position: absolute; top: calc(18px * var(--ui)); right: calc(18px * var(--ui)); z-index: 3; display: flex; gap: calc(10px * var(--ui)); padding: calc(8px * var(--ui)) calc(10px * var(--ui)); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: calc(999px * var(--ui)); 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: calc(2px * var(--ui)) solid var(--text); outline-offset: calc(3px * var(--ui)); }
.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: calc(6px * var(--ui)); margin-top: calc(8px * var(--ui)); padding-top: calc(10px * var(--ui)); border-top: 1px solid var(--line); }
.gt-sub { font-size: calc(11.5px * var(--ui)); color: var(--muted); }
.gt-tiers { display: grid; grid-template-columns: 1fr 1fr; gap: calc(6px * var(--ui)); }
.gt-tier { display: flex; align-items: center; gap: calc(8px * var(--ui)); padding: calc(7px * var(--ui)) calc(9px * var(--ui)); border: 1px solid var(--line); border-radius: calc(8px * var(--ui)); background: none; color: var(--text); font-size: calc(12.5px * var(--ui)); 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: calc(14px * var(--ui)); height: calc(14px * var(--ui)); }
/* 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 calc(26px * var(--ui)) / 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 calc(2px * var(--ui)) calc(2px * var(--ui)) rgba(0, 0, 0, 0.8)); }
.medal.big .medal-sig { font-size: calc(34px * var(--ui)); }
.medal.signed .medal-cap small { color: #f2c46a; }
.rv-tier.signed b { font: 400 calc(64px * var(--ui)) / 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 calc(1.5px * var(--ui)) #e9c46a, inset 0 0 calc(8px * var(--ui)) rgba(242, 196, 106, 0.55), 0 0 calc(10px * var(--ui)) rgba(242, 196, 106, 0.45), 0 calc(2px * var(--ui)) calc(5px * var(--ui)) 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: calc(360px * var(--ui)); } }
.medal-sig { transform: rotate(var(--tilt, -0.19rad)); }
@media (max-width: 760px) { .b3d-tiers { right: auto; left: calc(14px * var(--ui)); top: calc(14px * var(--ui)); } }
/* 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(calc(34px * var(--ui)), 5.6vw, calc(80px * var(--ui))) * 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: calc(18px * var(--ui)); }
.game-card { position: relative; display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--line); border-radius: calc(14px * var(--ui)); 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 calc(30px * var(--ui)) calc(50px * var(--ui)) calc(-30px * var(--ui)) rgba(0, 0, 0, 0.9); }
.game-card.tilt3d.tilting { transform: perspective(calc(1100px * var(--ui))) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(calc(-3px * var(--ui))); transition: transform .08s linear, border-color .2s, box-shadow .3s; }
.game-card .tilt3d::before { border-radius: calc(14px * var(--ui)); }
.gc-quiz { grid-row: span 2; }
.gc-art { position: relative; display: grid; place-items: center; height: calc(260px * var(--ui)); 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) calc(120px * var(--ui)) / 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: calc(-38px * var(--ui)); width: calc(132px * var(--ui)); aspect-ratio: 2 / 3; object-fit: cover; border-radius: calc(8px * var(--ui)); box-shadow: 0 calc(18px * var(--ui)) calc(30px * var(--ui)) calc(-12px * var(--ui)) 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) * calc(10px * var(--ui))));
  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) * calc(14px * var(--ui)) - calc(14px * var(--ui)))); }
.gc-body { display: flex; flex-direction: column; align-items: flex-start; gap: calc(8px * var(--ui)); padding: calc(20px * var(--ui)) calc(22px * var(--ui)) calc(22px * var(--ui)); flex: 1; }
.gc-body .qz-kicker { margin: 0; }
.game-card h2 { margin: 0; font: var(--display-w) calc(calc(30px * var(--ui)) * var(--display-scale)) / 1.1 var(--display); letter-spacing: var(--display-ls); }
.gc-quiz h2 { font-size: calc(calc(38px * var(--ui)) * var(--display-scale)); }
.game-card p { margin: 0; font-size: calc(14px * var(--ui)); line-height: 1.5; color: var(--muted); max-width: 52ch; }
.gc-status { min-height: calc(22px * var(--ui)); margin-top: calc(4px * var(--ui)); }
.gc-status .qz-tries { display: inline-flex; }
.gc-spins { font: var(--display-w) calc(20px * var(--ui)) / 1 var(--display); }
.gc-cta { margin-top: auto; pointer-events: none; }
.gc-body .gc-cta { margin-top: calc(10px * var(--ui)); }
/* roue miniature qui tourne doucement, plus vite au survol */
.gc-wheel-art { height: calc(190px * var(--ui)); }
.gc-wheel-art .wheel-svg { width: calc(230px * var(--ui)); height: calc(230px * var(--ui)); margin-top: calc(70px * var(--ui)); }
.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: calc(8px * var(--ui)); padding: calc(22px * var(--ui)); border-style: dashed; background: transparent; }
.gc-soon .qz-kicker { margin: 0; }
.gc-soon h2 { font-size: calc(calc(22px * var(--ui)) * var(--display-scale)); color: var(--muted); }
.back-games { display: inline-flex; align-items: center; gap: calc(4px * var(--ui)); margin-bottom: calc(6px * var(--ui)); font-size: calc(13px * var(--ui)); color: var(--muted); }
.back-games:hover { color: var(--text); }
.back-games .i { width: calc(15px * var(--ui)); height: calc(15px * var(--ui)); }
@media (max-width: 900px) {
  .games-grid { grid-template-columns: 1fr; }
  .gc-quiz { grid-row: auto; }
  .gc-art { height: calc(200px * var(--ui)); }
  .gc-fan img { width: calc(104px * var(--ui)); }
}
@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: calc(-30px * var(--ui)); width: calc(150px * var(--ui)); }
.gc-fan img:nth-child(1) { --r: -18deg; --y: calc(18px * var(--ui)); --r2: -26deg; --y2: calc(6px * var(--ui)); z-index: 1; }
.gc-fan img:nth-child(2) { --r: -6deg; --y: calc(2px * var(--ui)); --r2: -9deg; --y2: calc(-16px * var(--ui)); z-index: 2; }
.gc-fan img:nth-child(3) { --r: 6deg; --y: calc(2px * var(--ui)); --r2: 9deg; --y2: calc(-16px * var(--ui)); z-index: 3; }
.gc-fan img:nth-child(4) { --r: 18deg; --y: calc(18px * var(--ui)); --r2: 26deg; --y2: calc(6px * var(--ui)); z-index: 2; }
.game-card:hover .gc-fan img { transform: translateX(-50%) rotate(var(--r2)) translateY(var(--y2)); }
.gc-quiz .gc-art { height: calc(330px * var(--ui)); }
@media (max-width: 900px) { .gc-quiz .gc-art { height: calc(230px * var(--ui)); } .gc-fan img { width: calc(112px * var(--ui)); } }
/* 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: calc(170px * var(--ui)); background: radial-gradient(70% 90% at 50% 100%, rgba(120, 140, 255, 0.14), transparent 65%), var(--surface); }
.gc-shadow-art img { height: calc(150px * var(--ui)); margin-top: calc(30px * var(--ui)); filter: brightness(0) drop-shadow(0 0 1px rgba(255, 255, 255, 0.5)) drop-shadow(0 calc(12px * var(--ui)) calc(16px * var(--ui)) 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: calc(18px * var(--ui)); font: var(--display-w) calc(54px * var(--ui)) / 1 var(--display); color: var(--accent); transform: rotate(12deg); text-shadow: 0 calc(6px * var(--ui)) 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(calc(-6px * var(--ui))) scale(1.04); filter: brightness(.18) drop-shadow(0 0 1px rgba(255, 255, 255, 0.6)) drop-shadow(0 calc(12px * var(--ui)) calc(16px * var(--ui)) rgba(0, 0, 0, 0.7)); }
.gc-shadow:hover .gc-qm { transform: rotate(-8deg) scale(1.15); }
.gc-shadow h2 { font-size: calc(calc(26px * var(--ui)) * var(--display-scale)); }
/* page d'aperçu « Qui est-ce ? » */
.sg-badge { padding: calc(5px * var(--ui)) calc(11px * var(--ui)); border-radius: calc(999px * var(--ui)); border: 1px dashed var(--line-2); font-size: calc(12px * var(--ui)); color: var(--muted); }
.sg-zone { max-width: calc(900px * var(--ui)); }
.sg-stage { position: relative; display: grid; place-items: center; height: calc(300px * var(--ui)); margin: calc(18px * var(--ui)) 0 calc(16px * var(--ui)); border-radius: calc(12px * var(--ui)); 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: calc(250px * var(--ui)); filter: brightness(0) drop-shadow(0 0 calc(1.5px * var(--ui)) rgba(255, 255, 255, 0.55)) drop-shadow(0 calc(18px * var(--ui)) calc(22px * var(--ui)) rgba(0, 0, 0, 0.75)); animation: sgFloat 4s ease-in-out infinite; }
@keyframes sgFloat { 50% { transform: translateY(calc(-8px * var(--ui))); } }
.sg-qm { position: absolute; right: calc(50% - calc(170px * var(--ui))); top: calc(26px * var(--ui)); font: var(--display-w) calc(72px * var(--ui)) / 1 var(--display); color: var(--accent); transform: rotate(12deg); text-shadow: 0 calc(6px * var(--ui)) 0 rgba(0, 0, 0, 0.5); }
.sg-choices .qz-choice:disabled { opacity: .7; }
.sg-note { margin: calc(16px * var(--ui)) 0 0; font-size: calc(13px * var(--ui)); }
@media (max-width: 900px) { .gc-quiz { grid-row: auto; } .sg-stage { height: calc(230px * var(--ui)); } .sg-shadow { height: calc(190px * var(--ui)); } .sg-qm { right: 14%; font-size: calc(56px * var(--ui)); } }
@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: calc(14px * var(--ui)); height: calc(14px * var(--ui)); 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: calc(6px * var(--ui)); margin-top: calc(10px * var(--ui)); }
.gc-shadow-art { align-items: end; }
.gc-shadow-art img { height: calc(140px * var(--ui)); margin: 0 0 calc(6px * var(--ui)); }
/* page du quiz : tient sur un écran d'ordinateur (marge du bas réduite) */
@media (min-width: 901px) { .game-page { padding-bottom: calc(40px * var(--ui)); } }
/* 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: calc(190px * var(--ui)); }
.gc-fan img { width: calc(112px * var(--ui)); bottom: calc(-36px * var(--ui)); }
.gc-quiz h2 { font-size: calc(calc(30px * var(--ui)) * 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: calc(8px * var(--ui)); }
.gc-body > .gc-cta { align-self: flex-start; }
.gc-body p { margin-bottom: calc(8px * var(--ui)); }
@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(calc(22px * var(--ui))) 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(calc(96px * var(--ui)), 25%, calc(150px * var(--ui))); bottom: calc(-46px * var(--ui)); left: calc(50% + (var(--i) - 1.5) * 23%); }
.gc-fan img:nth-child(1) { --r: -9deg; --y: calc(10px * var(--ui)); --r2: -13deg; --y2: calc(-2px * var(--ui)); }
.gc-fan img:nth-child(2) { --r: -3deg; --y: 0px; --r2: -4deg; --y2: calc(-14px * var(--ui)); }
.gc-fan img:nth-child(3) { --r: 3deg; --y: 0px; --r2: 4deg; --y2: calc(-14px * var(--ui)); }
.gc-fan img:nth-child(4) { --r: 9deg; --y: calc(10px * var(--ui)); --r2: 13deg; --y2: calc(-2px * var(--ui)); }
/* 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(calc(1400px * var(--ui))) 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 calc(16px * var(--ui)) calc(22px * var(--ui)) calc(-14px * var(--ui)) 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 calc(12px * var(--ui)) calc(22px * var(--ui)) calc(-12px * var(--ui)) 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 calc(16px * var(--ui)) calc(22px * var(--ui)) calc(-14px * var(--ui)) 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: calc(14px * var(--ui)); }
.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: calc(28px * var(--ui)); margin-top: calc(28px * var(--ui)); padding: calc(14px * var(--ui)) calc(18px * var(--ui)); border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.mu-sum .mu-legend { gap: calc(12px * var(--ui)); flex: none; }
.mu-sum .mu-legend .medal { gap: 0; }
.mu-sum .mu-legend .medal-coin { width: calc(52px * var(--ui)); }
.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(calc(17px * var(--ui)) * var(--display-scale)); }
.mu-sum .mu-tiers { flex: 1; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: calc(18px * var(--ui)); max-width: none; padding-left: calc(26px * var(--ui)); border-left: 1px solid var(--line); }
.mu-sum .tier { display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; gap: calc(5px * var(--ui)) calc(8px * var(--ui)); font-size: calc(12px * var(--ui)); }
.mu-sum .tier span { font-size: calc(10.5px * var(--ui)); line-height: 1.2; }
.mu-sum .tier b { font-size: calc(13px * var(--ui)); }
.mu-sum .tier b small { font-size: calc(10.5px * var(--ui)); color: var(--muted); font-weight: 500; }
.mu-sum .tier i { grid-column: 1 / -1; height: calc(4px * var(--ui)); }
.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 calc(7px * var(--ui)) rgba(242, 196, 106, .12); }
@media (max-width: 900px) {
  .mu-sum { flex-direction: column; align-items: stretch; gap: calc(14px * var(--ui)); }
  .mu-sum .mu-tiers { grid-template-columns: repeat(3, minmax(0, 1fr)); padding: calc(14px * var(--ui)) 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 calc(12px * var(--ui)) calc(22px * var(--ui)) calc(-12px * var(--ui)) 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 calc(40px * var(--ui)) calc(100px * var(--ui)) calc(-20px * var(--ui)) rgba(0, 0, 0, 0.9), 0 0 calc(60px * var(--ui)) calc(-20px * var(--ui)) 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 calc(10.5px * var(--ui)) var(--font); letter-spacing: .22em; text-transform: uppercase; color: #c2271a; }
.b3d-master .pm-title { font: 900 italic calc(calc(34px * var(--ui)) * var(--display-scale)) / 1 var(--display); letter-spacing: -.01em; text-transform: uppercase; color: #ffd9d2; text-shadow: 0 0 calc(18px * var(--ui)) rgba(255, 40, 20, 0.65), 0 0 calc(2px * var(--ui)) rgba(255, 90, 60, 0.9); animation: pmGlow 3.2s ease-in-out infinite; }
@keyframes pmGlow { 50% { text-shadow: 0 0 calc(28px * var(--ui)) rgba(255, 40, 20, 0.9), 0 0 calc(3px * var(--ui)) rgba(255, 120, 90, 1); } }
.b3d-master .pm-motto { font-style: italic; font-size: calc(14px * var(--ui)); color: #e0574a; margin-bottom: calc(6px * var(--ui)); }
.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(calc(30px * var(--ui)) * 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: calc(4px * var(--ui)); margin-bottom: calc(18px * var(--ui)); padding-bottom: calc(14px * var(--ui)); border-bottom: 1px solid var(--line); }
.wp-head h1 { margin: 0; font: var(--display-w) calc(clamp(calc(30px * var(--ui)), 3vw, calc(40px * var(--ui))) * var(--display-scale)) / 1 var(--display); letter-spacing: var(--display-ls); }
.wp-main { display: grid; grid-template-columns: minmax(0, 1fr) minmax(calc(320px * var(--ui)), calc(400px * var(--ui))); gap: clamp(calc(24px * var(--ui)), 4vw, calc(56px * var(--ui))); align-items: center; }
.wp2 .wheel { width: min(100%, calc(100vh - var(--top-h) - calc(170px * var(--ui))), calc(640px * var(--ui))); }
.wp2 .wheel-side { gap: calc(16px * var(--ui)); }
.wp-spin { display: flex; flex-direction: column; gap: calc(12px * var(--ui)); padding: calc(18px * var(--ui)); border: 1px solid var(--line); border-radius: calc(14px * var(--ui)); background: var(--surface); }
.wp2 .spin-box { padding: 0; border: 0; }
.wp2 .spin-n { font-size: calc(calc(56px * var(--ui)) * var(--display-scale)); }
.wp2 .spin-btn { height: calc(52px * var(--ui)); font-size: calc(16px * var(--ui)); }
.wp-odds { display: grid; gap: calc(18px * var(--ui)); padding: calc(18px * var(--ui)); border: 1px solid var(--line); border-radius: calc(14px * var(--ui)); }
.wp2 .odds { gap: calc(8px * var(--ui)); padding: 0; }
.wp2 .odd { grid-template-columns: calc(12px * var(--ui)) calc(108px * var(--ui)) 1fr auto; font-size: calc(13px * var(--ui)); }
.wp2 .odd em { height: calc(4px * var(--ui)); border-radius: calc(2px * var(--ui)); 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: calc(2px * var(--ui)); 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%, calc(520px * var(--ui))); } }
/* 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: calc(12px * var(--ui)); border: 1px solid var(--line-2); background: var(--surface); }
.wl2 .wl-count { display: flex; flex-direction: row; align-items: baseline; gap: calc(6px * var(--ui)); padding: calc(9px * var(--ui)) calc(14px * var(--ui)); }
.wl2 .wl-count b { font: var(--display-w) calc(24px * var(--ui)) / 1 var(--display); letter-spacing: var(--display-ls); color: var(--text); }
.wl2 .wl-count small { font-size: calc(12px * var(--ui)); color: var(--muted); }
.wl2 .wl-go { display: inline-flex; align-items: center; gap: calc(6px * var(--ui)); padding: 0 calc(14px * var(--ui)); border-left: 1px solid var(--line-2); font-size: calc(13px * var(--ui)); font-weight: 600; color: var(--muted); transition: background .15s, color .15s; }
.wl2 .wl-go .i { width: calc(15px * var(--ui)); height: calc(15px * var(--ui)); 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 calc(5px * var(--ui)) 0 rgba(0, 0, 0, 0.55)) drop-shadow(0 0 calc(22px * var(--ui)) 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 calc(28px * var(--ui)) rgba(255, 42, 26, 0.55)); animation: pmWheel .9s ease-in-out infinite; }
@keyframes pmWheel { 50% { filter: drop-shadow(0 0 calc(46px * var(--ui)) 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: calc(10px * var(--ui)); text-align: center; opacity: 0; transform: scale(2.6); filter: blur(calc(10px * var(--ui))); }
.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(calc(10px * var(--ui))); } 60% { opacity: 1; transform: scale(.94); filter: none; } 100% { opacity: 1; transform: none; filter: none; } }
.pm-core b { font: 900 clamp(calc(110px * var(--ui)), 22vw, calc(260px * var(--ui))) / 1 var(--jp); color: #ff2a1a; text-shadow: 0 0 calc(40px * var(--ui)) rgba(255, 42, 26, 0.7), 0 calc(8px * var(--ui)) 0 #4a0602; letter-spacing: .04em; }
.pm-core span { font: 900 italic calc(clamp(calc(30px * var(--ui)), 4.6vw, calc(60px * var(--ui))) * var(--display-scale)) / 1 var(--display); text-transform: uppercase; color: #ffd9d2; letter-spacing: -.01em; }
.pm-core small { font: 700 calc(12px * var(--ui)) 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(calc(-4px * var(--ui)), calc(2px * var(--ui))); text-shadow: calc(-6px * var(--ui)) 0 #00e0ff, calc(6px * var(--ui)) 0 #ff2a1a, 0 0 calc(40px * var(--ui)) rgba(255, 42, 26, 0.7); } 12% { transform: none; } 55% { transform: translate(calc(3px * var(--ui)), calc(-2px * var(--ui))) 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: calc(16px * var(--ui)); }
.mg-grid .gc-quiz { grid-column: span 2; grid-row: auto; }
.mg-card .gc-art, .mg-grid .gc-quiz .gc-art { height: calc(168px * var(--ui)); background: radial-gradient(80% 100% at 50% 100%, rgba(255, 255, 255, 0.04), transparent 70%), var(--surface); }
.mg-card .gc-body { gap: calc(6px * var(--ui)); padding: calc(14px * var(--ui)) calc(16px * var(--ui)) calc(16px * var(--ui)); }
.mg-card h2, .mg-grid .gc-quiz h2 { font-size: calc(calc(22px * var(--ui)) * var(--display-scale)); }
.mg-card .gc-status { display: flex; align-items: center; justify-content: space-between; gap: calc(8px * var(--ui)); width: 100%; min-height: calc(22px * var(--ui)); margin: 0; font-size: calc(12.5px * var(--ui)); }
.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: calc(5px * var(--ui)); color: var(--muted); }
.gc-st-done .i { width: calc(14px * var(--ui)); height: calc(14px * var(--ui)); color: var(--green); }
.gc-won { font: 700 calc(13px * var(--ui)) 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: calc(96px * var(--ui)); bottom: calc(-40px * var(--ui)); }
/* vignettes */
.gc-px { width: calc(120px * var(--ui)); height: calc(120px * var(--ui)); border-radius: calc(10px * var(--ui)); image-rendering: pixelated; box-shadow: 0 calc(14px * var(--ui)) calc(24px * var(--ui)) calc(-14px * var(--ui)) rgba(0, 0, 0, 0.9); }
.gc-px-q { position: absolute; right: calc(50% - calc(82px * var(--ui))); top: calc(14px * var(--ui)); font: var(--display-w) calc(40px * var(--ui)) / 1 var(--display); color: var(--accent); transform: rotate(12deg); }
.gc-emo { display: flex; gap: calc(6px * var(--ui)); font-size: calc(46px * var(--ui)); 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(calc(-8px * var(--ui))) rotate(-8deg); }
.mg-card:hover .gc-emo i:nth-child(2) { transform: translateY(calc(-14px * var(--ui))); transition-delay: .05s; }
.mg-card:hover .gc-emo i:nth-child(3) { transform: translateY(calc(-8px * var(--ui))) rotate(8deg); transition-delay: .1s; }
.gc-cl { position: relative; width: calc(150px * var(--ui)); height: calc(120px * var(--ui)); }
.gc-cl i { position: absolute; left: 0; right: 0; top: calc(var(--i) * calc(27px * var(--ui))); height: calc(24px * var(--ui)); display: flex; align-items: center; gap: calc(8px * var(--ui)); padding: 0 calc(8px * var(--ui)); border: 1px solid var(--line-2); border-radius: calc(6px * var(--ui)); background: var(--bg-2); transform: translateX(calc((var(--i) - 1.5) * calc(6px * var(--ui)))); transition: transform .4s cubic-bezier(.2, 1.3, .4, 1); }
.gc-cl b { display: grid; place-items: center; width: calc(16px * var(--ui)); height: calc(16px * var(--ui)); border-radius: 50%; background: var(--accent); color: var(--accent-ink); font: 700 calc(10px * var(--ui)) var(--font); }
.gc-cl em { height: calc(4px * var(--ui)); flex: 1; border-radius: calc(2px * var(--ui)); background: var(--surface-3); }
.gc-cl em + em { flex: .5; }
.mg-card:hover .gc-cl i { transform: none; }
.gc-st { display: flex; gap: calc(5px * var(--ui)); }
.gc-st i { display: grid; place-items: center; width: calc(34px * var(--ui)); height: calc(34px * var(--ui)); font: 700 calc(18px * var(--ui)) var(--font); font-style: normal; color: #fff; background: #1f5f9e; border-radius: calc(3px * var(--ui)); }
.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: calc(2px * var(--ui)); z-index: -1; border-radius: 50%; background: #f2b51b; }
.gc-sz { position: relative; display: flex; align-items: flex-end; justify-content: center; gap: calc(4px * var(--ui)); height: calc(150px * var(--ui)); padding-left: calc(20px * var(--ui)); }
.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: calc(8px * var(--ui)); height: 1px; background: var(--faint); }
.gc-sz-r i:nth-child(odd) { width: calc(14px * var(--ui)); }
.gc-sz-p { height: calc(var(--h) / 220 * calc(140px * var(--ui))); width: auto; filter: drop-shadow(0 calc(10px * var(--ui)) calc(12px * var(--ui)) 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: calc(14px * var(--ui)); right: calc(-6px * var(--ui)); bottom: calc(141px * var(--ui)); border-top: calc(1.5px * var(--ui)) 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: calc(127px * var(--ui)); }
@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: calc(6px * var(--ui)); }
.mg-head { align-items: center; }
.mg-head .qz-head-r { display: flex; align-items: center; gap: calc(14px * var(--ui)); }
.mg-lead { margin: calc(14px * var(--ui)) 0 0; font-size: calc(14px * var(--ui)); }
.mg-tools { margin-top: calc(16px * var(--ui)); max-width: calc(420px * var(--ui)); }
.mg-done { display: flex; align-items: center; gap: calc(20px * var(--ui)); margin: calc(18px * var(--ui)) 0 calc(4px * var(--ui)); padding: calc(16px * var(--ui)) calc(18px * var(--ui)); border: 1px solid var(--line-2); border-radius: calc(12px * var(--ui)); 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: calc(64px * var(--ui)); font: var(--display-w) calc(calc(40px * var(--ui)) * var(--display-scale)) / 1 var(--display); color: var(--faint); }
.mg-done.win .mg-done-n { color: var(--green); }
.mg-done-n small { font: 600 calc(11px * var(--ui)) var(--font); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-top: calc(4px * var(--ui)); }
.mg-done-t { flex: 1; min-width: 0; }
.mg-done-t p { margin: 0 0 calc(2px * var(--ui)); font-size: calc(15px * var(--ui)); }
.px-row { display: flex; gap: calc(8px * var(--ui)); align-items: center; }
.px-row .input { flex: 1; min-width: 0; height: calc(44px * var(--ui)); font-size: calc(15px * var(--ui)); }
.px-row .btn { height: calc(44px * var(--ui)); }
.px-ask { display: block; margin-bottom: calc(8px * var(--ui)); font: var(--display-w) calc(calc(19px * var(--ui)) * var(--display-scale)) / 1.2 var(--display); }
.px-pot { font-size: calc(12.5px * var(--ui)); color: var(--muted); white-space: nowrap; }
.px-pot b { color: var(--amber); font-size: calc(15px * var(--ui)); }
.em-next { display: flex; gap: calc(10px * var(--ui)); justify-content: flex-end; margin-top: calc(18px * var(--ui)); }
.st-k { padding: 0 calc(5px * var(--ui)); border-radius: calc(3px * var(--ui)); 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: calc(28px * var(--ui)); margin-top: calc(20px * var(--ui)); align-items: start; }
.px-frame { position: relative; width: calc(330px * var(--ui)); max-width: 100%; border-radius: calc(12px * var(--ui)); overflow: hidden; border: 1px solid var(--line-2); background: var(--surface); box-shadow: 0 calc(30px * var(--ui)) calc(50px * var(--ui)) calc(-30px * var(--ui)) 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: calc(2px * var(--ui)); padding: calc(26px * var(--ui)) calc(14px * var(--ui)) calc(12px * var(--ui)); background: linear-gradient(transparent, rgba(0, 0, 0, 0.85)); }
.px-cap b { font: var(--display-w) calc(calc(20px * var(--ui)) * var(--display-scale)) / 1.1 var(--display); }
.px-cap span { font-size: calc(12.5px * var(--ui)); color: var(--muted); }
.px-side { display: grid; gap: calc(16px * var(--ui)); align-content: start; min-width: 0; }
.px-form small { display: block; margin-top: calc(8px * var(--ui)); font-size: calc(12.5px * var(--ui)); }
.px-anime { display: flex; gap: calc(14px * var(--ui)); align-items: center; padding: calc(12px * var(--ui)); border: 1px solid color-mix(in srgb, var(--amber) 40%, var(--line)); border-radius: calc(10px * var(--ui)); background: color-mix(in srgb, var(--amber) 6%, var(--surface)); }
.px-anime img { width: calc(54px * var(--ui)); aspect-ratio: 2 / 3; object-fit: cover; border-radius: calc(6px * var(--ui)); }
.px-anime b { display: block; font: var(--display-w) calc(calc(18px * var(--ui)) * var(--display-scale)) / 1.15 var(--display); margin-bottom: calc(2px * var(--ui)); }
.px-tries { list-style: none; margin: 0; padding: 0; display: grid; gap: calc(6px * var(--ui)); }
.px-tries li { display: grid; grid-template-columns: calc(22px * var(--ui)) minmax(0, 1fr) auto auto; align-items: center; gap: calc(10px * var(--ui)); padding: calc(8px * var(--ui)) calc(12px * var(--ui)); border-radius: calc(8px * var(--ui)); background: var(--surface); font-size: calc(14px * var(--ui)); }
.px-tries li > span { font: 600 calc(11px * var(--ui)) 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: calc(16px * var(--ui)); height: calc(16px * var(--ui)); }
.px-tries li.ok em { color: var(--green); }
.px-tries li.ko em { color: var(--red); }
.px-tries small { font-size: calc(11px * var(--ui)); 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(calc(330px * var(--ui)), 100%); } }

/* --- Devine l'anime */
.em-diff { display: flex; align-items: center; gap: calc(14px * var(--ui)); margin-top: calc(16px * var(--ui)); }
.em-diff .qz-kicker { margin: 0; }
.em-steps { display: flex; gap: calc(4px * var(--ui)); flex: 1; max-width: calc(520px * var(--ui)); }
.em-steps i { position: relative; flex: 1; height: calc(26px * var(--ui)); display: grid; place-items: center; border-radius: calc(5px * var(--ui)); background: var(--surface); border: 1px solid var(--line); font: 600 calc(11px * var(--ui)) 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: calc(12px * var(--ui)); margin: calc(22px * var(--ui)) 0 calc(6px * var(--ui)); padding: calc(34px * var(--ui)) calc(16px * var(--ui)); border-radius: calc(14px * var(--ui)); 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(calc(10px * var(--ui)), 3vw, calc(30px * var(--ui))); font-size: clamp(calc(56px * var(--ui)), 9vw, calc(96px * var(--ui))); 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: calc(2px * var(--ui)); text-align: center; }
.em-verdict b { font: 600 calc(12px * var(--ui)) 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(calc(28px * var(--ui)) * var(--display-scale)) / 1.15 var(--display); }
.em-form { display: grid; gap: calc(12px * var(--ui)); max-width: calc(620px * var(--ui)); margin: calc(18px * var(--ui)) auto 0; }
.em-hint { justify-self: center; color: var(--muted); }
.em-choices { display: grid; grid-template-columns: 1fr 1fr; gap: calc(10px * var(--ui)); }
.em-recap, .hl-recap, .sz-recap { list-style: none; margin: calc(16px * var(--ui)) 0 0; padding: 0; display: grid; gap: calc(6px * var(--ui)); }
.em-recap li { display: grid; grid-template-columns: calc(120px * var(--ui)) minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: calc(14px * var(--ui)); align-items: center; padding: calc(10px * var(--ui)) calc(14px * var(--ui)); border-radius: calc(8px * var(--ui)); background: var(--surface); }
.em-mini { grid-row: span 2; font-size: calc(26px * var(--ui)); letter-spacing: calc(2px * var(--ui)); }
.em-recap b { font-weight: 600; }
.em-recap small { grid-column: 2; color: var(--muted); font-size: calc(12px * var(--ui)); }
.em-recap em { grid-column: 3; grid-row: 1 / span 2; }
.em-recap em .i, .hl-recap .i { width: calc(18px * var(--ui)); height: calc(18px * var(--ui)); }
.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: calc(9px * var(--ui)); } .em-choices { grid-template-columns: 1fr; } .em-recap li { grid-template-columns: calc(84px * var(--ui)) minmax(0, 1fr) auto; } .em-mini { font-size: calc(20px * var(--ui)); } }

/* --- Classe-les */
.cl-pick { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(16px * var(--ui)); margin-top: calc(18px * var(--ui)); max-width: calc(760px * var(--ui)); }
.cl-opt { display: grid; gap: calc(10px * var(--ui)); padding: 0; border: 0; background: none; text-align: left; }
.cl-cover { display: block; aspect-ratio: 2 / 3; border-radius: calc(10px * var(--ui)); 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(calc(-3px * var(--ui))); }
.cl-opt b { font: var(--display-w) calc(calc(17px * var(--ui)) * var(--display-scale)) / 1.2 var(--display); }
.cl-list { list-style: none; margin: calc(16px * var(--ui)) 0 0; padding: 0; display: grid; gap: calc(8px * var(--ui)); max-width: calc(820px * var(--ui)); }
.cl-ev { display: flex; align-items: center; gap: calc(14px * var(--ui)); width: 100%; min-height: calc(58px * var(--ui)); padding: calc(10px * var(--ui)) calc(16px * var(--ui)); border: 1px solid var(--line); border-radius: calc(10px * var(--ui)); background: var(--surface); text-align: left; font: 500 calc(15px * var(--ui)) 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: calc(30px * var(--ui)); height: calc(30px * var(--ui)); border-radius: 50%; border: calc(1.5px * var(--ui)) dashed var(--line-2); font: 700 calc(14px * var(--ui)) 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: calc(14px * var(--ui)); min-height: calc(54px * var(--ui)); padding: calc(10px * var(--ui)) calc(16px * var(--ui)); border-radius: calc(10px * var(--ui)); 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 calc(12px * var(--ui)) var(--font); color: var(--muted); white-space: nowrap; }
.cl-list.done li.ok em { color: var(--green); }
.cl-list.done em .i { width: calc(18px * var(--ui)); height: calc(18px * var(--ui)); }
.cl-recap { display: grid; gap: calc(8px * var(--ui)); margin-top: calc(16px * var(--ui)); }
.cl-rd { border: 1px solid var(--line); border-radius: calc(10px * var(--ui)); background: var(--bg-2); padding: 0 calc(14px * var(--ui)); }
.cl-rd summary { display: flex; justify-content: space-between; align-items: center; padding: calc(12px * var(--ui)) 0; cursor: pointer; list-style: none; }
.cl-rd summary em { font: 600 calc(12px * var(--ui)) 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 calc(14px * var(--ui)); }
@media (max-width: 600px) { .cl-pick { gap: calc(10px * var(--ui)); } .cl-opt b { font-size: calc(14px * var(--ui)); } }

/* --- 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: calc(26px * var(--ui)) calc(28px * var(--ui)) calc(30px * var(--ui)); }
/* choix de l'anime */
.wt-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(calc(280px * var(--ui)), calc(440px * var(--ui))); gap: calc(28px * var(--ui)); align-items: end; padding-bottom: calc(24px * var(--ui)); border-bottom: 1px solid var(--line); }
.wt-hero h2 { margin: calc(2px * var(--ui)) 0 calc(8px * var(--ui)); font: var(--display-w) calc(clamp(calc(30px * var(--ui)), 3.4vw, calc(44px * var(--ui))) * var(--display-scale)) / 1.05 var(--display); letter-spacing: var(--display-ls); }
.wt-hero p { margin: 0; max-width: 54ch; font-size: calc(14.5px * var(--ui)); }
.wt-hero p b { color: var(--text); }
.wt-search { position: relative; }
.wt-search .input { height: calc(52px * var(--ui)); font-size: calc(16px * var(--ui)); border-radius: calc(12px * var(--ui)); }
.wt-search .input-icon .i { left: calc(16px * var(--ui)); width: calc(18px * var(--ui)); height: calc(18px * var(--ui)); }
.wt-search .input-icon .input { padding-left: calc(44px * var(--ui)); }
.wt-results { position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + calc(6px * var(--ui))); margin: 0; padding: calc(6px * var(--ui)); list-style: none; border: 1px solid var(--line-2); border-radius: calc(12px * var(--ui)); background: var(--surface); box-shadow: 0 calc(24px * var(--ui)) calc(40px * var(--ui)) calc(-18px * var(--ui)) rgba(0, 0, 0, 0.9); }
.wt-hit { display: flex; align-items: center; gap: calc(12px * var(--ui)); width: 100%; padding: calc(6px * var(--ui)) calc(10px * var(--ui)) calc(6px * var(--ui)) calc(6px * var(--ui)); border: 0; border-radius: calc(8px * var(--ui)); background: none; text-align: left; font-weight: 600; }
.wt-hit img { width: calc(34px * var(--ui)); aspect-ratio: 2 / 3; object-fit: cover; border-radius: calc(4px * var(--ui)); }
.wt-hit span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wt-hit .i { width: calc(16px * var(--ui)); height: calc(16px * var(--ui)); color: var(--faint); }
.wt-hit.on, .wt-hit:hover { background: var(--surface-3); }
.wt-hit.on .i { color: var(--accent); }
.wt-none { padding: calc(12px * var(--ui)); color: var(--muted); font-size: calc(14px * var(--ui)); }
.wt-top-head { display: flex; align-items: baseline; gap: calc(12px * var(--ui)); margin: calc(22px * var(--ui)) 0 calc(6px * var(--ui)); }
.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: calc(26px * var(--ui)) calc(18px * var(--ui)); }
.wt-opt { position: relative; display: grid; gap: calc(8px * var(--ui)); width: 100%; padding: 0 0 0 calc(50px * var(--ui)); 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(calc(14px * var(--ui))); } }
.wt-rank { position: absolute; left: calc(-4px * var(--ui)); bottom: calc(34px * var(--ui)); z-index: 0; font: 900 clamp(calc(96px * var(--ui)), 9vw, calc(150px * var(--ui))) / .8 var(--display); letter-spacing: -.08em; color: var(--bg-2); -webkit-text-stroke: calc(2px * var(--ui)) 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: calc(10px * var(--ui)); overflow: hidden; background: var(--surface); box-shadow: calc(-10px * var(--ui)) calc(14px * var(--ui)) calc(28px * var(--ui)) calc(-14px * var(--ui)) 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: calc(13.5px * var(--ui)); 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: calc(-4px * var(--ui)); font-size: calc(11.5px * var(--ui)); color: var(--muted); }
.wt-opt:hover .wt-poster { transform: translateY(calc(-6px * var(--ui))) rotate(-1.5deg); box-shadow: calc(-14px * var(--ui)) calc(22px * var(--ui)) calc(34px * var(--ui)) calc(-14px * var(--ui)) rgba(0, 0, 0, 0.95), 0 0 0 calc(2px * var(--ui)) 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: calc(170px * var(--ui)) minmax(0, 1fr); gap: calc(24px * var(--ui)); align-items: center; }
.wt-confirm img { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; border-radius: calc(10px * var(--ui)); box-shadow: 0 calc(20px * var(--ui)) calc(34px * var(--ui)) calc(-18px * var(--ui)) rgba(0, 0, 0, 0.9); }
.wt-confirm h3 { margin: calc(2px * var(--ui)) 0 calc(10px * var(--ui)); font: var(--display-w) calc(calc(28px * var(--ui)) * var(--display-scale)) / 1.1 var(--display); letter-spacing: var(--display-ls); }
.wt-confirm p { margin: 0 0 calc(18px * var(--ui)); }
@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: calc(110px * var(--ui)) 1fr; gap: calc(16px * var(--ui)); } .wt-zone { padding: calc(18px * var(--ui)) calc(16px * var(--ui)) calc(22px * var(--ui)); } }

/* partie */
.wt-board { display: grid; grid-template-columns: calc(250px * var(--ui)) minmax(0, 1fr); gap: calc(34px * var(--ui)); align-items: start; }
.wt-side { position: relative; display: grid; gap: calc(6px * var(--ui)); align-content: start; }
.wt-side .qz-help { position: absolute; top: calc(8px * var(--ui)); right: calc(8px * var(--ui)); background: rgba(0, 0, 0, 0.6); }
.wt-cover { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: calc(12px * var(--ui)); margin-bottom: calc(10px * var(--ui)); box-shadow: 0 calc(24px * var(--ui)) calc(40px * var(--ui)) calc(-22px * var(--ui)) rgba(0, 0, 0, 0.95); }
.wt-side .qz-kicker { margin: 0; }
.wt-anime { font: var(--display-w) calc(calc(22px * var(--ui)) * var(--display-scale)) / 1.15 var(--display); letter-spacing: var(--display-ls); }
.wt-facts { display: flex; gap: calc(14px * var(--ui)); margin-top: calc(6px * var(--ui)); font-size: calc(13px * var(--ui)); color: var(--muted); }
.wt-facts b { color: var(--text); font-size: calc(15px * var(--ui)); }
.wt-tries { display: flex; align-items: center; gap: calc(6px * var(--ui)); margin-top: calc(8px * var(--ui)); }
.wt-tries i { width: calc(12px * var(--ui)); height: calc(12px * var(--ui)); 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: calc(6px * var(--ui)); font-size: calc(12.5px * var(--ui)); color: var(--muted); }
.wt-legend { list-style: none; margin: calc(14px * var(--ui)) 0 0; padding: calc(12px * var(--ui)) 0 0; border-top: 1px solid var(--line); display: grid; gap: calc(8px * var(--ui)); font-size: calc(13px * var(--ui)); color: var(--muted); }
.wt-legend li { display: flex; align-items: center; gap: calc(10px * var(--ui)); }
.wt-legend i { position: relative; z-index: 0; display: grid; place-items: center; width: calc(24px * var(--ui)); height: calc(24px * var(--ui)); border-radius: calc(3px * var(--ui)); background: #1d5a96; color: #fff; font: 700 calc(13px * var(--ui)) var(--font); font-style: normal; }
.wt-legend i.r { background: #d6342b; }
.wt-legend i.y::before { content: ""; position: absolute; inset: calc(2px * var(--ui)); z-index: -1; border-radius: 50%; background: #f2b51b; }
.wt-main { display: grid; justify-items: center; gap: calc(10px * var(--ui)); min-width: 0; }
.wt-grid { --t: clamp(calc(36px * var(--ui)), min(calc((100vw - calc(460px * var(--ui))) / var(--len) - calc(6px * var(--ui))), 8.4vh), calc(70px * var(--ui))); display: grid; gap: calc(5px * var(--ui)); padding: calc(10px * var(--ui)); border-radius: calc(10px * var(--ui)); background: #0b2744; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05), 0 calc(30px * var(--ui)) calc(60px * var(--ui)) calc(-30px * var(--ui)) rgba(0, 0, 0, 0.9); perspective: calc(800px * var(--ui)); }
.wt-row { display: flex; gap: calc(5px * var(--ui)); }
.wt-row i { position: relative; z-index: 0; display: grid; place-items: center; width: var(--t); height: var(--t); border-radius: calc(3px * var(--ui)); 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: calc(3px * var(--ui)); 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(calc(-18px * var(--ui))) scale(1.08); } }
.wt-msg { min-height: calc(22px * var(--ui)); margin: calc(2px * var(--ui)) 0 0; font-size: calc(14px * var(--ui)); 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: calc(7px * var(--ui)); width: min(100%, calc(640px * var(--ui))); margin-top: calc(4px * var(--ui)); }
.wt-kb div { display: flex; gap: calc(6px * var(--ui)); justify-content: center; }
.wt-kb button { flex: 1; max-width: calc(56px * var(--ui)); height: calc(54px * var(--ui)); padding: 0; border: 0; border-radius: calc(8px * var(--ui)); background: var(--surface-3); color: var(--text); font: 700 calc(16px * var(--ui)) var(--font); box-shadow: 0 calc(2px * var(--ui)) 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(calc(2px * var(--ui))); box-shadow: none; }
.wt-kb button.wide { max-width: calc(92px * var(--ui)); flex: 1.6; font-size: calc(13px * var(--ui)); }
.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: calc(18px * var(--ui)); } .wt-side { grid-template-columns: calc(74px * var(--ui)) minmax(0, 1fr); column-gap: calc(14px * var(--ui)); } .wt-cover { grid-row: span 4; margin: 0; } .wt-legend, .wt-tries { grid-column: 2; } .wt-legend { display: none; } .wt-grid { --t: clamp(calc(30px * var(--ui)), calc((100vw - calc(90px * var(--ui))) / var(--len) - calc(5px * var(--ui))), calc(60px * var(--ui))); } .wt-kb button { height: calc(48px * var(--ui)); } }

/* 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: calc(32px * var(--ui)); align-items: center; margin-top: calc(30px * var(--ui)); padding-top: calc(26px * var(--ui)); border-top: 1px solid var(--line); }
.wt-reveal .mg-done { grid-area: done; margin: calc(16px * var(--ui)) 0 0; }
.wt-card { grid-area: card; width: calc(200px * var(--ui)); aspect-ratio: 2 / 3; perspective: calc(900px * var(--ui)); }
.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: calc(12px * var(--ui)); 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 calc(3px * var(--ui)) #1d5a96; color: #f2b51b; font: 700 calc(54px * var(--ui)) / 1 var(--jp); }
.wt-card-front { box-shadow: 0 0 0 calc(3px * var(--ui)) var(--wt-red), 0 calc(30px * var(--ui)) calc(50px * var(--ui)) calc(-20px * var(--ui)) 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: calc(6px * var(--ui)); justify-items: start; }
.wt-who .qz-kicker { margin: 0; }
.wt-word { display: flex; gap: calc(4px * var(--ui)); }
.wt-word i { display: grid; place-items: center; width: calc(44px * var(--ui)); height: calc(44px * var(--ui)); border-radius: calc(3px * var(--ui)); background: var(--wt-red); color: #fff; font: 800 calc(22px * var(--ui)) 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(calc(-20px * var(--ui))) rotateX(90deg); } }
.wt-name { margin-top: calc(4px * var(--ui)); font: var(--display-w) calc(clamp(calc(26px * var(--ui)), 3vw, calc(38px * var(--ui))) * 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: calc(110px * var(--ui)) minmax(0, 1fr); grid-template-areas: "card who" "done done"; column-gap: calc(16px * var(--ui)); } .wt-card { width: calc(110px * var(--ui)); } .wt-word i { width: calc(30px * var(--ui)); height: calc(30px * var(--ui)); font-size: calc(16px * var(--ui)); } }
@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: calc(200px * var(--ui)); }
.mg-grid .gc-quiz .gc-fan img { width: calc(76px * var(--ui)); bottom: calc(-14px * var(--ui)); border-radius: calc(6px * var(--ui)); }
.mg-grid .gc-quiz h2 { font-size: calc(calc(22px * var(--ui)) * var(--display-scale)); }
.gc-res { font: 700 calc(12.5px * var(--ui)) var(--font); color: var(--red); }
.gc-res.ok { color: var(--green); }
.gc-feat h2 { font-size: calc(calc(28px * var(--ui)) * var(--display-scale)); }
.gc-wt { position: relative; display: flex; align-items: center; gap: calc(22px * var(--ui)); }
.gc-wt-grid { display: grid; gap: calc(4px * var(--ui)); padding: calc(7px * var(--ui)); border-radius: calc(7px * var(--ui)); background: #0b2744; box-shadow: 0 calc(24px * var(--ui)) calc(40px * var(--ui)) calc(-20px * var(--ui)) 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: calc(4px * var(--ui)); }
.gc-wt-row i { position: relative; z-index: 0; display: grid; place-items: center; width: calc(38px * var(--ui)); height: calc(38px * var(--ui)); border-radius: calc(3px * var(--ui)); background: #1d5a96; color: #fff; font: 800 calc(19px * var(--ui)) var(--font); font-style: normal; }
.gc-wt-row i.r { background: #d6342b; }
.gc-wt-row i.y::before { content: ""; position: absolute; inset: calc(3px * var(--ui)); 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: calc(168px * var(--ui)); width: auto; filter: drop-shadow(0 calc(14px * var(--ui)) calc(16px * var(--ui)) rgba(0, 0, 0, 0.7)); transform: translateY(calc(10px * var(--ui))) 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: calc(30px * var(--ui)); height: calc(30px * var(--ui)); font-size: calc(15px * var(--ui)); } .gc-wt-who { height: calc(130px * var(--ui)); } }
@media (max-width: 560px) { .mg-grid .gc-feat { grid-column: auto; } .gc-wt-row i { width: calc(26px * var(--ui)); height: calc(26px * var(--ui)); font-size: calc(13px * var(--ui)); } .gc-wt-who { height: calc(110px * var(--ui)); } }

/* --- Plus ou moins */

/* --- Taille */
.sz-layout { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: calc(28px * var(--ui)); margin-top: calc(20px * var(--ui)); 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: calc(400px * var(--ui)); margin: calc(24px * var(--ui)) 0 calc(30px * var(--ui)) calc(46px * var(--ui)); border-bottom: calc(2px * var(--ui)) 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% + calc(8px * var(--ui))); top: calc(-8px * var(--ui)); font: 500 calc(11px * var(--ui)) 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 calc(8px * var(--ui)) calc(12px * var(--ui)) rgba(0, 0, 0, 0.5)); }
.sz-char img { filter: drop-shadow(0 calc(10px * var(--ui)) calc(14px * var(--ui)) rgba(0, 0, 0, 0.55)); }
.sz-ref small { position: absolute; left: 50%; transform: translateX(-50%); top: calc(100% + calc(6px * var(--ui))); font-size: calc(11px * var(--ui)); color: var(--faint); white-space: nowrap; }
.sz-line { position: absolute; left: 0; right: 0; bottom: var(--y); border-top: calc(1.5px * var(--ui)) dashed var(--accent); transition: bottom .15s; pointer-events: none; }
.sz-line span { position: absolute; right: 0; top: calc(-22px * var(--ui)); font: 700 calc(12px * var(--ui)) var(--font); color: var(--accent); }
.sz-line.real { border-top: calc(2px * var(--ui)) solid var(--green); }
.sz-line.real span { color: var(--green); right: auto; left: calc(6px * var(--ui)); }
.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: calc(78px * var(--ui)); }
.sz-side { display: grid; gap: calc(10px * var(--ui)); align-content: center; }
.sz-name { font: var(--display-w) calc(calc(28px * var(--ui)) * var(--display-scale)) / 1.1 var(--display); }
.sz-side input[type="range"] { width: 100%; accent-color: var(--accent); margin: calc(6px * var(--ui)) 0 calc(4px * var(--ui)); }
.sz-num { max-width: calc(110px * var(--ui)); }
.sz-res { display: grid; grid-template-columns: auto 1fr; align-items: baseline; column-gap: calc(10px * var(--ui)); padding: calc(14px * var(--ui)) calc(16px * var(--ui)); border-radius: calc(10px * var(--ui)); background: var(--surface); margin-top: calc(6px * var(--ui)); }
.sz-res b { font: var(--display-w) calc(calc(44px * var(--ui)) * var(--display-scale)) / 1 var(--display); color: var(--amber); }
.sz-res span { color: var(--muted); }
.sz-res small { grid-column: 1 / -1; margin-top: calc(6px * var(--ui)); color: var(--muted); font-size: calc(13px * var(--ui)); }
.sz-recap li { display: grid; grid-template-columns: calc(52px * var(--ui)) minmax(0, 1fr) auto calc(64px * var(--ui)); column-gap: calc(16px * var(--ui)); align-items: center; padding: calc(8px * var(--ui)) calc(16px * var(--ui)); border-radius: calc(10px * var(--ui)); background: var(--surface); animation: sz-in .35s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--i) * 60ms); }
.sz-rc-img { width: calc(52px * var(--ui)); height: calc(72px * var(--ui)); 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 calc(4px * var(--ui)) calc(6px * var(--ui)) rgba(0, 0, 0, .5)); }
.sz-rc-who, .sz-rc-vals { display: grid; gap: calc(2px * var(--ui)); 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: calc(12px * var(--ui)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sz-rc-vals { text-align: right; }
.sz-rc-vals b { color: var(--green); font-size: calc(15px * var(--ui)); }
.sz-rc-pts { font: var(--display-w) calc(26px * var(--ui)) / 1 var(--display); color: var(--amber); text-align: right; }
.sz-rc-pts small { display: block; font: 600 calc(10px * var(--ui)) 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(calc(8px * var(--ui))); } }
/* fin de partie : les personnages côte à côte, à l'échelle */
.sz-lineup { display: flex; align-items: flex-end; justify-content: center; gap: clamp(calc(4px * var(--ui)), 1.4vw, calc(16px * var(--ui))); height: calc(270px * var(--ui)); margin: calc(22px * var(--ui)) 0 calc(10px * var(--ui)); padding: 0 calc(8px * var(--ui)) calc(46px * var(--ui)); position: relative; }
.sz-lineup::after { content: ""; position: absolute; left: 0; right: 0; bottom: calc(46px * var(--ui)); border-top: calc(2px * var(--ui)) solid var(--line-2); }
.sz-lineup figure { position: relative; margin: 0; height: var(--h); min-width: calc(84px * var(--ui)); 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 calc(8px * var(--ui)) calc(10px * var(--ui)) rgba(0, 0, 0, .55)); }
.sz-lu-fig .human { fill: var(--surface-3); }
.sz-lineup figcaption { position: absolute; top: calc(100% + calc(8px * var(--ui))); left: 50%; transform: translateX(-50%); display: grid; justify-items: center; text-align: center; width: calc(84px * var(--ui)); }
.sz-lineup figcaption b { font-size: calc(12.5px * var(--ui)); color: var(--text); }
.sz-lineup figcaption small { font-size: calc(11px * var(--ui)); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: calc(84px * var(--ui)); }
@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(calc(170px * var(--ui)), 1fr)); gap: calc(14px * var(--ui)); }
.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: calc(14px * var(--ui)) calc(12px * var(--ui)) calc(46px * var(--ui)); filter: drop-shadow(0 calc(10px * var(--ui)) calc(12px * var(--ui)) 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 calc(10px * var(--ui)) calc(12px * var(--ui)) rgba(0, 0, 0, 0.6)); transform: scale(1.05); transform-origin: bottom; }
.sz-u .hl-u-txt b { font-size: calc(calc(20px * var(--ui)) * 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: calc(300px * var(--ui)); } .sz-recap li { grid-template-columns: calc(44px * var(--ui)) minmax(0, 1fr) auto; column-gap: calc(10px * var(--ui)); padding: calc(8px * var(--ui)) calc(10px * var(--ui)); } .sz-rc-img { width: calc(44px * var(--ui)); height: calc(62px * var(--ui)); } .sz-rc-vals { display: none; } .sz-lineup { height: calc(200px * var(--ui)); gap: calc(2px * var(--ui)); } .sz-lineup figure { min-width: calc(56px * var(--ui)); } .sz-lineup figcaption { width: calc(56px * var(--ui)); } .sz-lineup figcaption small { max-width: calc(56px * var(--ui)); } .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: calc(40px * var(--ui)); border: 0; border-radius: calc(14px * var(--ui)); background: rgba(12, 11, 9, 0.95); align-content: center; justify-content: center; grid-template-columns: auto minmax(0, calc(520px * var(--ui))); 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: calc(250px * var(--ui)); }
.wt-reveal.overlay .wt-word i { width: calc(52px * var(--ui)); height: calc(52px * var(--ui)); font-size: calc(26px * var(--ui)); }
.wt-see { grid-area: see; justify-self: start; margin-top: calc(14px * var(--ui)); color: var(--muted); }
@media (max-width: 700px) { .wt-reveal.overlay { padding: calc(20px * var(--ui)) calc(16px * var(--ui)); grid-template-columns: calc(110px * var(--ui)) minmax(0, 1fr); grid-template-areas: "card who" "done done" "see see"; } .wt-reveal.overlay .wt-card { width: calc(110px * var(--ui)); } .wt-reveal.overlay .wt-word i { width: calc(30px * var(--ui)); height: calc(30px * var(--ui)); font-size: calc(16px * var(--ui)); } }

/* --- 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) + calc(16px * var(--ui))); padding-bottom: calc(24px * var(--ui)); }
.mg-page .back-games { margin-bottom: calc(2px * var(--ui)); }
.mg-page .rel-head { margin-bottom: calc(14px * var(--ui)); }
.mg-page .rel-head h1 { font-size: calc(clamp(calc(26px * var(--ui)), 2.6vw, calc(32px * var(--ui))) * var(--display-scale)); padding-bottom: calc(8px * var(--ui)); }
.mg-page .wheel-link { margin-bottom: calc(8px * var(--ui)); }
.mg-page .quiz-zone { min-height: 0; }
.mg-done-a { display: flex; gap: calc(8px * var(--ui)); 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: calc(20px * var(--ui)) calc(24px * var(--ui)) calc(22px * var(--ui)); }
.wt-hero { padding-bottom: calc(16px * var(--ui)); gap: calc(20px * var(--ui)); }
.wt-hero h2 { font-size: calc(clamp(calc(26px * var(--ui)), 2.6vw, calc(34px * var(--ui))) * var(--display-scale)); margin-bottom: calc(4px * var(--ui)); }
.wt-top-head { margin: calc(16px * var(--ui)) 0 calc(10px * var(--ui)); }
.wt-top { grid-template-columns: repeat(10, minmax(0, 1fr)); gap: calc(14px * var(--ui)); }
.wt-opt { padding: 0; gap: calc(6px * var(--ui)); }
.wt-poster { max-height: calc(100vh - calc(420px * var(--ui))); }
.wt-rank { z-index: 2; left: calc(-8px * var(--ui)); bottom: calc(30px * var(--ui)); font-size: clamp(calc(54px * var(--ui)), 5vw, calc(82px * var(--ui))); color: var(--bg); -webkit-text-stroke: calc(2px * var(--ui)) var(--line-2); text-shadow: 0 calc(6px * var(--ui)) calc(14px * var(--ui)) rgba(0, 0, 0, 0.6); pointer-events: none; }
.wt-opt b { font-size: calc(12.5px * var(--ui)); }
.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: calc(48px * var(--ui)); } }
/* Wordtaku : partie */
.wt-board { grid-template-columns: calc(210px * var(--ui)) minmax(0, 1fr); gap: calc(28px * var(--ui)); }
.wt-cover { max-height: calc(100vh - calc(590px * var(--ui))); min-height: calc(110px * var(--ui)); margin-bottom: calc(6px * var(--ui)); }
.wt-legend { margin-top: calc(8px * var(--ui)); padding-top: calc(8px * var(--ui)); gap: calc(5px * var(--ui)); }
.wt-grid { --t: clamp(calc(30px * var(--ui)), min(calc((100vw - calc(440px * var(--ui))) / var(--len) - calc(6px * var(--ui))), calc((100vh - calc(430px * var(--ui))) / 5 - calc(6px * var(--ui)))), calc(68px * var(--ui))); }
.wt-main { gap: calc(6px * var(--ui)); }
.wt-msg { min-height: calc(20px * var(--ui)); margin: 0; }
.wt-kb { gap: calc(6px * var(--ui)); margin-top: 0; }
.wt-kb button { height: clamp(calc(36px * var(--ui)), 5.4vh, calc(52px * var(--ui))); }
@media (max-width: 860px) { .wt-board { grid-template-columns: 1fr; } .wt-grid { --t: clamp(calc(28px * var(--ui)), min(calc((100vw - calc(90px * var(--ui))) / var(--len) - calc(5px * var(--ui))), calc((100vh - calc(520px * var(--ui))) / 5 - calc(5px * var(--ui)))), calc(60px * var(--ui))); } }
/* 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: calc(10px * var(--ui)); margin-bottom: calc(8px * var(--ui)); }
.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: calc(36px * var(--ui)); height: calc(36px * var(--ui)); 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: calc(16px * var(--ui)); height: calc(16px * var(--ui)); }
.mg-tools[open] summary { color: var(--text); border-color: var(--line-2); }
.mg-tools-pop { position: absolute; right: 0; top: calc(100% + calc(8px * var(--ui))); z-index: 40; display: grid; gap: calc(8px * var(--ui)); width: max-content; padding: calc(12px * var(--ui)); border: 1px solid var(--line-2); border-radius: calc(10px * var(--ui)); background: var(--surface); box-shadow: 0 calc(18px * var(--ui)) calc(34px * var(--ui)) calc(-14px * var(--ui)) 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 calc(-12px * var(--ui)) calc(-10px * var(--ui)); }
/* 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) - calc(150px * var(--ui))); }
.wt-reveal.overlay { padding: calc(24px * var(--ui)) calc(32px * var(--ui)); }
.wt-reveal.overlay .wt-card { width: min(calc(240px * var(--ui)), calc((100vh - var(--top-h) - calc(230px * var(--ui))) * .66)); }

/* Wordtaku : effets sur la photo du personnage (inclinaison à la souris, reflet holographique, éclat qui balaie, lueur, étincelles) */
.wt-card { position: relative; transform: perspective(calc(900px * var(--ui))) 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 calc(-8px * var(--ui)); } }
.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 calc(3px * var(--ui)) #ff5a3c, 0 0 calc(38px * var(--ui)) rgba(255, 60, 40, 0.55), 0 calc(30px * var(--ui)) calc(50px * var(--ui)) calc(-20px * var(--ui)) 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 calc(3px * var(--ui)) #7a2a22, 0 calc(30px * var(--ui)) calc(50px * var(--ui)) calc(-20px * var(--ui)) 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: calc(12px * var(--ui)); height: calc(12px * var(--ui)); 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 calc(6px * var(--ui)) rgba(255, 200, 90, 0.9)); }
.wt-spark:nth-of-type(1) { left: calc(-10px * var(--ui)); top: 12%; } .wt-spark:nth-of-type(2) { right: calc(-12px * var(--ui)); top: 26%; width: calc(16px * var(--ui)); height: calc(16px * var(--ui)); }
.wt-spark:nth-of-type(3) { left: 18%; top: calc(-10px * var(--ui)); } .wt-spark:nth-of-type(4) { right: 14%; bottom: calc(-12px * var(--ui)); width: calc(9px * var(--ui)); height: calc(9px * var(--ui)); }
.wt-spark:nth-of-type(5) { left: calc(-14px * var(--ui)); bottom: 22%; width: calc(15px * var(--ui)); height: calc(15px * var(--ui)); } .wt-spark:nth-of-type(6) { right: calc(-8px * var(--ui)); bottom: 8%; width: calc(8px * var(--ui)); height: calc(8px * var(--ui)); }
.wt-spark:nth-of-type(7) { left: 62%; top: calc(-14px * var(--ui)); width: calc(14px * var(--ui)); height: calc(14px * var(--ui)); }
@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(calc(280px * var(--ui)), calc(340px * var(--ui))); gap: calc(28px * var(--ui)); align-items: start; }
.wt-zone.wt-aside .wt-reveal { margin: 0; padding: 0 0 0 calc(26px * var(--ui)); border-top: 0; border-left: 1px solid var(--line); grid-template-columns: minmax(0, 1fr); grid-template-areas: "card" "who" "done" "big"; row-gap: calc(12px * var(--ui)); justify-items: start; animation: wtFade .4s ease both; }
.wt-zone.wt-aside .wt-card { width: min(calc(170px * var(--ui)), calc((100vh - var(--top-h) - calc(420px * var(--ui))) * .66)); min-width: calc(110px * var(--ui)); }
.wt-zone.wt-aside .wt-word i { width: calc(32px * var(--ui)); height: calc(32px * var(--ui)); font-size: calc(16px * var(--ui)); }
.wt-zone.wt-aside .wt-name { font-size: calc(calc(24px * var(--ui)) * var(--display-scale)); }
.wt-zone.wt-aside .mg-done { margin: 0; flex-wrap: wrap; gap: calc(12px * var(--ui)); padding: calc(12px * var(--ui)) calc(14px * var(--ui)); }
.wt-zone.wt-aside .mg-done-n { min-width: 0; font-size: calc(calc(30px * var(--ui)) * 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: calc(170px * var(--ui)) minmax(0, 1fr); gap: calc(22px * var(--ui)); }
.wt-zone.wt-aside .wt-grid { --t: clamp(calc(28px * var(--ui)), min(calc((100vw - calc(760px * var(--ui))) / var(--len) - calc(6px * var(--ui))), calc((100vh - calc(430px * var(--ui))) / 5 - calc(6px * var(--ui)))), calc(64px * var(--ui))); }
.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: calc(18px * var(--ui)) 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: calc(18px * var(--ui)); row-gap: calc(12px * var(--ui)); }
.wt-reveal .mg-done-a { grid-column: 1 / -1; }
.wt-reveal.overlay { grid-template-columns: auto minmax(0, calc(460px * var(--ui))); }

/* 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: calc(-6px * var(--ui)); right: calc(-6px * var(--ui)); z-index: 5; opacity: .55; transition: opacity .2s; }
.wt-pick-help:hover, .wt-pick-help:focus-within { opacity: 1; }
.wt-hero { padding-right: calc(36px * var(--ui)); }
.wt-top { gap: calc(18px * var(--ui)) clamp(calc(18px * var(--ui)), 2vw, calc(34px * var(--ui))); }

/* --- 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)); }
/* classement : bouton dans l'en-tête, liste dans une fenêtre, fiche profil au survol d'un joueur */
.gr-open { display: inline-flex; align-items: center; gap: calc(8px * var(--ui)); height: calc(46px * var(--ui)); padding: 0 calc(18px * var(--ui)); border: 1px solid var(--line); border-radius: calc(999px * var(--ui)); color: var(--text); background: none; font: inherit; font-weight: 600; cursor: pointer; transition: border-color .15s, background .15s; }
.gr-open:hover { border-color: var(--line-2); background: var(--surface); }
.gr-open .i { width: calc(18px * var(--ui)); height: calc(18px * var(--ui)); color: var(--accent); }
.gr-open small { color: var(--muted); font-size: calc(12.5px * var(--ui)); font-variant-numeric: tabular-nums; }
.modal.wide.gr-window { width: min(calc(1060px * var(--ui)), 100%); padding: 0; }
/* hauteur fixe : une fiche plus longue qu'une autre ne doit pas recentrer la fenêtre (la liste glisserait sous la souris) */
.gr-modal { display: grid; grid-template-columns: minmax(0, 1fr) calc(380px * var(--ui)); height: min(calc(720px * var(--ui)), calc(100dvh - calc(40px * var(--ui)))); }
.gr-main { padding: calc(30px * var(--ui)) calc(28px * var(--ui)) calc(26px * var(--ui)); overflow-y: auto; }
.gr-intro h2 { margin: calc(5px * var(--ui)) 0 calc(7px * var(--ui)); font-size: calc(calc(28px * var(--ui)) * var(--display-scale)); }
.gr-intro > p { margin: 0; color: var(--muted); font-size: calc(14px * var(--ui)); }
.gr-body { margin-top: calc(20px * var(--ui)); min-height: calc(90px * var(--ui)); }
.gr-mine { display: flex; align-items: baseline; gap: calc(10px * var(--ui)); margin-bottom: calc(16px * var(--ui)); }
.gr-mine strong { color: var(--accent); font-size: calc(34px * var(--ui)); line-height: 1; }
.gr-mine span { color: var(--muted); font-size: calc(13px * var(--ui)); }
.gr-list { display: grid; gap: calc(4px * var(--ui)); margin: 0; padding: 0; list-style: none; }
.gr-row { display: grid; grid-template-columns: calc(40px * var(--ui)) minmax(calc(100px * var(--ui)), 1fr) auto auto auto; gap: calc(16px * var(--ui)); align-items: center; min-height: calc(56px * var(--ui)); padding: calc(6px * var(--ui)) calc(12px * var(--ui)); border-radius: calc(12px * var(--ui)); transition: background .12s; }
.gr-row:nth-child(odd) { background: rgba(255, 255, 255, .025); }
.gr-row:hover, .gr-row:focus-within, .gr-row.on { background: var(--surface-2); }
.gr-row.mine { background: color-mix(in srgb, var(--accent) 11%, transparent); box-shadow: inset calc(2px * var(--ui)) 0 var(--accent); }
.gr-row.mine.on { background: color-mix(in srgb, var(--accent) 18%, transparent); }
.gr-rank { font-size: calc(18px * var(--ui)); text-align: center; font-variant-numeric: tabular-nums; }
.gr-row > a { display: flex; align-items: center; gap: calc(12px * var(--ui)); min-width: 0; color: var(--text); font-size: calc(15.5px * var(--ui)); font-weight: 700; }
.gr-row > a > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gr-row .social-avatar { width: calc(40px * var(--ui)); height: calc(40px * var(--ui)); }
.gr-row > b { font-size: calc(15px * var(--ui)); font-variant-numeric: tabular-nums; white-space: nowrap; }
.gr-badges { display: inline-flex; align-items: center; gap: calc(6px * var(--ui)); color: #e2b23f; font-weight: 700; font-variant-numeric: tabular-nums; }
.gr-badges i { width: calc(14px * var(--ui)); height: calc(14px * var(--ui)); border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff2b8, #cf9622 55%, #6a440a); box-shadow: 0 0 0 1px rgba(255, 220, 160, .35); }
.gr-badges.none { color: var(--muted); font-weight: 500; } .gr-badges.none i { opacity: .35; filter: grayscale(1); }
.gr-accuracy { color: var(--muted); font-size: calc(12.5px * var(--ui)); white-space: nowrap; }
.gr-sep { height: calc(13px * var(--ui)); color: var(--muted); line-height: calc(8px * var(--ui)); text-align: center; letter-spacing: calc(4px * var(--ui)); }
.gr-card { overflow-y: auto; padding: calc(30px * var(--ui)) calc(24px * var(--ui)) calc(24px * var(--ui)); border-left: 1px solid var(--line); background: var(--surface); }
.grc-head { display: flex; align-items: center; gap: calc(14px * var(--ui)); }
.grc-head .social-avatar { width: calc(68px * var(--ui)); height: calc(68px * var(--ui)); }
.grc-head b { display: block; overflow: hidden; font-size: calc(calc(22px * var(--ui)) * var(--display-scale)); text-overflow: ellipsis; white-space: nowrap; }
.grc-head small, .grc-note { color: var(--muted); font-size: calc(12.5px * var(--ui)); }
.grc-note { margin: calc(14px * var(--ui)) 0 0; }
.grc-badges { margin-top: calc(22px * var(--ui)); padding: calc(16px * var(--ui)); border: 1px solid color-mix(in srgb, #e2b23f 30%, var(--line)); border-radius: calc(14px * var(--ui)); background: radial-gradient(120% 90% at 0 0, rgba(226, 178, 63, .1), transparent 60%), var(--bg-2); }
.grc-label { display: flex; align-items: baseline; justify-content: space-between; }
.grc-label b { color: #e2b23f; font-size: calc(22px * var(--ui)); font-variant-numeric: tabular-nums; }
.grc-label small { color: var(--muted); font-size: calc(13px * var(--ui)); font-weight: 500; }
.grc-coins { display: grid; grid-template-columns: repeat(5, 1fr); gap: calc(10px * var(--ui)); margin-top: calc(12px * var(--ui)); }
.grc-coins .medal { cursor: default; }
.grc-coins .medal-coin { width: 100%; max-width: none; padding: calc(3px * var(--ui)); }
.grc-more { display: block; margin-top: calc(10px * var(--ui)); color: var(--muted); font-size: calc(12px * var(--ui)); }
.grc-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(6px * var(--ui)); margin-top: calc(14px * var(--ui)); }
.grc-stats > div { padding: calc(9px * var(--ui)) calc(6px * var(--ui)); border-radius: calc(10px * var(--ui)); background: var(--bg-2); text-align: center; }
.grc-stats b { display: block; font-size: calc(16px * var(--ui)); font-variant-numeric: tabular-nums; }
.grc-stats span { color: var(--muted); font-size: calc(11px * var(--ui)); }
.grc-now { display: block; margin-top: calc(18px * var(--ui)); }
.grc-covers { display: grid; grid-template-columns: repeat(5, 1fr); gap: calc(6px * var(--ui)); margin-top: calc(8px * var(--ui)); }
.grc-covers img { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; border-radius: calc(6px * var(--ui)); background: var(--bg-2); }
.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: calc(210px * var(--ui)); overflow: hidden; background: var(--bg); }
.gc-blur, .gc-front { position: absolute; inset: 0; display: grid; place-items: center; }
.gc-blur { filter: blur(calc(26px * var(--ui))) 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: calc(160px * var(--ui)); }
.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(calc(26px * var(--ui))) saturate(.9) brightness(.8); }
/* Wordtaku : la grille seule, plus grande, au centre */
.gc-sutom .gc-wt-row i { width: calc(40px * var(--ui)); height: calc(40px * var(--ui)); font-size: calc(20px * var(--ui)); }
.gc-sutom h2, .gc-feat h2 { font-size: calc(calc(22px * var(--ui)) * 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: calc(108px * var(--ui)); bottom: calc(-18px * var(--ui)); border-radius: calc(8px * var(--ui)); box-shadow: 0 calc(18px * var(--ui)) calc(30px * var(--ui)) calc(-12px * var(--ui)) rgba(0, 0, 0, 0.9); }
.mg-grid .gc-quiz .gc-blur .gc-fan img { width: calc(150px * var(--ui)); }
@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: 860px) { .gr-modal { grid-template-columns: 1fr; height: auto; } .gr-card { display: none; } }
@media (max-width: 560px) { .gr-open > span { display: none; } .gr-main { padding: calc(24px * var(--ui)) calc(14px * var(--ui)) calc(16px * var(--ui)); } .gr-row { gap: calc(10px * var(--ui)); } }
@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: calc(30px * var(--ui)); height: calc(30px * var(--ui)); font-size: calc(15px * var(--ui)); } .gr-row { grid-template-columns: calc(32px * var(--ui)) minmax(calc(80px * var(--ui)), 1fr) auto auto; gap: calc(8px * var(--ui)); } .gr-row .social-avatar { width: calc(32px * var(--ui)); height: calc(32px * var(--ui)); } .gr-accuracy { display: none; } }
.mg-card.played:hover .gc-art > .gc-blur { opacity: .45; filter: blur(calc(26px * var(--ui))) saturate(1.4) brightness(.9); }
.mg-card.played:hover .gc-art > .gc-front > * { opacity: .85; filter: none; }
/* jeu déjà joué aujourd'hui : carte nettement grisée (image en noir et blanc, sans halo), un peu ravivée au survol */
.mg-card.played .gc-art .gc-front > * { opacity: .45; filter: grayscale(1) brightness(.7); }
.mg-card.played .gc-art > .gc-blur { opacity: .1; filter: blur(calc(26px * var(--ui))) grayscale(1) brightness(.6); }
.mg-card.played .gc-art::after { opacity: .15; }
.mg-card.played .gc-body { opacity: .7; }
.mg-card.played:hover .gc-art .gc-front > * { opacity: .75; filter: grayscale(.4) brightness(.9); }
.mg-card.played:hover .gc-art > .gc-blur { opacity: .3; filter: blur(calc(26px * var(--ui))) saturate(.8) brightness(.8); }
.mg-card.played:hover .gc-art::after { opacity: .5; }
.mg-card.played:hover .gc-body { opacity: 1; }

/* --- 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(calc(36px * var(--ui)), 5vw, calc(84px * var(--ui))); }
.wt-side { width: calc(230px * var(--ui)); gap: calc(4px * var(--ui)); }
.wt-side .qz-kicker { margin-top: calc(10px * var(--ui)); }
.wt-holo { position: relative; border-radius: calc(12px * var(--ui)); overflow: hidden; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 calc(26px * var(--ui)) calc(44px * var(--ui)) calc(-22px * var(--ui)) rgba(0, 0, 0, 0.95); transform: perspective(calc(900px * var(--ui))) 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: calc(14px * var(--ui)); right: calc(14px * var(--ui)); z-index: 8; opacity: .5; transition: opacity .2s; }
.wt-help:hover, .wt-help:focus-within { opacity: 1; }
.wt-help .qz-help-tip { width: calc(280px * var(--ui)); }
.wt-help .wt-legend { margin: calc(6px * var(--ui)) 0 calc(12px * var(--ui)); padding: 0; border: 0; }
.wt-help .qz-rules { margin-bottom: calc(12px * var(--ui)); }
.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(calc(36px * var(--ui)), 5vw, calc(84px * var(--ui))); }
.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: calc(200px * var(--ui)); 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: calc(16px * var(--ui)); } .wt-side { width: auto; grid-template-columns: calc(70px * var(--ui)) 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: calc(34px * var(--ui)); }
.wt-zone.wt-aside .wt-card { width: calc(230px * var(--ui)); }
/* Wordtaku : abandonner, discret sous le clavier */
.wt-giveup { margin-top: calc(4px * var(--ui)); color: var(--faint); }
.wt-giveup:hover { color: var(--red); border-color: color-mix(in srgb, var(--red) 40%, transparent); }
.wt-giveup .i { width: calc(14px * var(--ui)); height: calc(14px * var(--ui)); }
.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: calc(6px * var(--ui)); margin-bottom: calc(6px * var(--ui)); padding: calc(5px * var(--ui)) calc(14px * var(--ui)) calc(6px * var(--ui)); border-radius: calc(999px * var(--ui)); 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(calc(24px * var(--ui)) * var(--display-scale)) / 1 var(--display); }
.wt-gain span { font: 700 calc(12px * var(--ui)) var(--font); letter-spacing: .12em; text-transform: uppercase; }
.wt-gain small { font-size: calc(11.5px * var(--ui)); color: color-mix(in srgb, var(--green) 70%, var(--muted)); margin-left: calc(4px * var(--ui)); }
.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(calc(10px * var(--ui))) scale(.6); } }
@keyframes wtGainGlow { 50% { box-shadow: inset 0 0 0 1px var(--green), 0 0 calc(22px * var(--ui)) color-mix(in srgb, var(--green) 40%, transparent); } }
.wt-reveal.still .wt-gain { animation: none; }
/* partie perdue : badge rouge, sans halo ; il tremble quand les pièces de la mise en tombent */
.wt-gain.lost { background: color-mix(in srgb, var(--red) 12%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--red) 40%, transparent); color: var(--red); }
.wt-gain.lost small { color: color-mix(in srgb, var(--red) 65%, var(--muted)); }
.wt-reveal.in .wt-gain.lost { animation: wtGain .7s cubic-bezier(.2, 1.6, .4, 1) 1.5s both; }
.wt-reveal.in .wt-gain.lost.shake { animation: fxShake .42s cubic-bezier(.36, .07, .19, .97); }
.fx-coin.lost { color: #4a2a22; filter: grayscale(.55) brightness(.85); }
@media (prefers-reduced-motion: reduce) { .wt-reveal.in .wt-gain.lost, .wt-reveal.in .wt-gain.lost.shake { animation: none; } }
.wt-back { margin-top: calc(14px * var(--ui)); }
.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(calc(40px * var(--ui)), 5vw, calc(96px * var(--ui))); }
  .wt-zone.wt-play .wt-side { width: clamp(calc(260px * var(--ui)), 24vw, calc(360px * var(--ui))); }
  .wt-zone.wt-play .wt-anime { font-size: calc(calc(26px * var(--ui)) * var(--display-scale)); }
  .wt-zone.wt-play .wt-grid { --t: clamp(calc(40px * var(--ui)), min(calc((100vw - calc(720px * var(--ui))) / var(--len) - calc(8px * var(--ui))), calc((100vh - calc(380px * var(--ui))) / 5 - calc(7px * var(--ui)))), calc(96px * var(--ui))); gap: calc(7px * var(--ui)); padding: calc(14px * var(--ui)); border-radius: calc(14px * var(--ui)); }
  .wt-zone.wt-play .wt-row { gap: calc(7px * var(--ui)); }
  .wt-zone.wt-play .wt-kb { width: min(100%, calc(880px * var(--ui))); gap: calc(8px * var(--ui)); }
  .wt-zone.wt-play .wt-kb div { gap: calc(8px * var(--ui)); }
  .wt-zone.wt-play .wt-kb button { max-width: calc(78px * var(--ui)); height: clamp(calc(44px * var(--ui)), 6.4vh, calc(64px * var(--ui))); font-size: calc(18px * var(--ui)); border-radius: calc(10px * var(--ui)); }
  .wt-zone.wt-play .wt-kb button.wide { max-width: calc(128px * var(--ui)); font-size: calc(14px * var(--ui)); }
  .wt-zone.wt-play .wt-msg { font-size: calc(14px * var(--ui)); }
}

/* --- 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(calc(28px * var(--ui)), min(calc(52px * var(--ui)), calc((100vh - var(--top-h) - calc(440px * var(--ui))) / 5), calc((100vw - calc(980px * var(--ui))) / var(--len, 6) - calc(6px * var(--ui)))), calc(52px * var(--ui))); }
.wt-play .wt-grid { --t: var(--wt-t); }
.wt-play .wt-main { gap: calc(6px * var(--ui)); align-content: start; }
.wt-play .wt-kb { gap: calc(6px * var(--ui)); }
.wt-play .wt-kb button { height: calc(44px * var(--ui)); }
.wt-play .wt-giveup { height: calc(32px * var(--ui)); margin-top: 0; }
.wt-play .wt-side { width: auto; align-self: start; }
.wt-play .wt-holo { height: calc(5 * var(--wt-t) + calc(160px * var(--ui))); 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(calc(28px * var(--ui)), min(calc((100vw - calc(90px * var(--ui))) / var(--len, 6) - calc(5px * var(--ui))), calc((100vh - var(--top-h) - calc(470px * var(--ui))) / 5)), calc(52px * var(--ui))); } .wt-play .wt-holo { height: auto; width: calc(70px * var(--ui)); } }
/* (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: calc(5px * var(--ui)); padding: calc(10px * var(--ui)); border-radius: calc(10px * var(--ui)); }
.wt-zone.wt-play .wt-row { gap: calc(5px * var(--ui)); }
.wt-zone.wt-play .wt-side { width: auto; }
.wt-zone.wt-play .wt-kb { width: auto; gap: calc(6px * var(--ui)); }
.wt-zone.wt-play .wt-kb div { gap: calc(6px * var(--ui)); }
.wt-zone.wt-play .wt-kb button { height: calc(44px * var(--ui)); max-width: calc(54px * var(--ui)); min-width: calc(38px * var(--ui)); font-size: calc(16px * var(--ui)); }
.wt-zone.wt-play .wt-kb button.wide { max-width: calc(90px * var(--ui)); min-width: calc(64px * var(--ui)); font-size: calc(13px * var(--ui)); }
/* 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(calc(4px * var(--ui))); } }
/* Wordtaku : Retour + Rejouer (mode test) côte à côte */
.wt-acts { display: flex; gap: calc(10px * var(--ui)); margin-top: calc(14px * var(--ui)); }
.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: calc(8px * var(--ui)); margin-top: calc(12px * var(--ui)); flex-wrap: wrap; }
.wt-lvl { --lv: var(--green); display: grid; gap: calc(2px * var(--ui)); min-width: calc(150px * var(--ui)); padding: calc(9px * var(--ui)) calc(14px * var(--ui)); border: 1px solid var(--line); border-radius: calc(10px * var(--ui)); 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: calc(8px * var(--ui)); font-size: calc(14px * var(--ui)); }
.wt-lvl b::before { content: ""; width: calc(8px * var(--ui)); height: calc(8px * var(--ui)); border-radius: 50%; background: var(--lv); opacity: .45; }
.wt-lvl small { font-size: calc(11.5px * var(--ui)); color: var(--muted); }
.wt-lvl .wt-lvl-gain { font: 600 calc(11px * var(--ui)) 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 calc(10px * var(--ui)) var(--lv); }
.wt-lvl-tag { --lv: var(--amber); justify-self: start; margin-top: calc(10px * var(--ui)); padding: calc(2px * var(--ui)) calc(10px * var(--ui)); border-radius: calc(999px * var(--ui)); font: 700 calc(11px * var(--ui)) 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: calc(6px * var(--ui)); }
/* Wordtaku : courte description du personnage en fin de partie */
.wt-bio { max-width: 46ch; margin: calc(10px * var(--ui)) 0 0; padding-left: calc(12px * var(--ui)); border-left: calc(2px * var(--ui)) solid color-mix(in srgb, var(--wt-red, #d6342b) 60%, transparent); font-size: calc(13.5px * var(--ui)); 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: calc(2px * var(--ui)) calc(10px * var(--ui)); border-radius: calc(999px * var(--ui)); font: 700 calc(11px * var(--ui)) 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: calc(132px * var(--ui)); bottom: calc(-26px * var(--ui)); border-radius: calc(9px * var(--ui)); }
.mg-grid .gc-quiz .gc-front .gc-fan img:nth-child(1) { --r: -16deg; --y: calc(22px * var(--ui)); --r2: -22deg; --y2: calc(10px * var(--ui)); margin-left: calc(-150px * var(--ui)); }
.mg-grid .gc-quiz .gc-front .gc-fan img:nth-child(2) { --r: -5deg; --y: calc(4px * var(--ui)); --r2: -8deg; --y2: calc(-12px * var(--ui)); margin-left: calc(-50px * var(--ui)); }
.mg-grid .gc-quiz .gc-front .gc-fan img:nth-child(3) { --r: 5deg; --y: calc(4px * var(--ui)); --r2: 8deg; --y2: calc(-12px * var(--ui)); margin-left: calc(50px * var(--ui)); }
.mg-grid .gc-quiz .gc-front .gc-fan img:nth-child(4) { --r: 16deg; --y: calc(22px * var(--ui)); --r2: 22deg; --y2: calc(10px * var(--ui)); margin-left: calc(150px * var(--ui)); }
/* 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: calc(128px * var(--ui)); margin: 0 calc(-14px * var(--ui)) calc(-26px * var(--ui)); 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: calc(-14px * var(--ui)); }
.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: calc(10px * var(--ui)) 0 calc(6px * var(--ui)); }
.px-setup h2 { margin: calc(4px * var(--ui)) 0 calc(6px * var(--ui)); font: var(--display-w) calc(clamp(calc(28px * var(--ui)), 3vw, calc(40px * var(--ui))) * var(--display-scale)) / 1.05 var(--display); letter-spacing: var(--display-ls); }
.px-setup > p { margin: 0 0 calc(22px * var(--ui)); font-size: calc(14px * var(--ui)); }
.px-lvls { display: grid; grid-template-columns: repeat(3, minmax(0, calc(220px * var(--ui)))); gap: clamp(calc(14px * var(--ui)), 2vw, calc(28px * var(--ui))); }
.px-lvl { --lv: var(--green); display: grid; justify-items: center; gap: calc(4px * var(--ui)); padding: calc(14px * var(--ui)) calc(14px * var(--ui)) calc(16px * var(--ui)); border: 1px solid var(--line); border-radius: calc(14px * var(--ui)); 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: calc(10px * var(--ui)); overflow: hidden; margin-bottom: calc(8px * var(--ui)); 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: calc(8px * var(--ui)); font: var(--display-w) calc(calc(20px * var(--ui)) * var(--display-scale)) / 1 var(--display); }
.px-lvl b::before { content: ""; width: calc(9px * var(--ui)); height: calc(9px * var(--ui)); border-radius: 50%; background: var(--lv); box-shadow: 0 0 calc(10px * var(--ui)) var(--lv); }
.px-lvl small { font-size: calc(12.5px * var(--ui)); color: var(--muted); }
.px-lvl:hover { border-color: var(--lv); transform: translateY(calc(-4px * var(--ui))); box-shadow: 0 calc(20px * var(--ui)) calc(34px * var(--ui)) calc(-20px * var(--ui)) 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: calc(70px * var(--ui)) 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(calc(300px * var(--ui)), calc(420px * var(--ui))); justify-content: center; align-items: center; gap: clamp(calc(30px * var(--ui)), 4.5vw, calc(72px * var(--ui))); }
.px-frame { position: relative; height: clamp(calc(320px * var(--ui)), calc(100vh - var(--top-h) - calc(250px * var(--ui))), calc(640px * var(--ui))); aspect-ratio: 3 / 4; border-radius: calc(14px * var(--ui)); overflow: hidden; background: var(--bg-2); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 calc(30px * var(--ui)) calc(60px * var(--ui)) calc(-28px * var(--ui)) rgba(0, 0, 0, 0.95), 0 0 calc(50px * var(--ui)) calc(-16px * var(--ui)) 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 calc(3px * var(--ui)), rgba(0, 0, 0, 0.12) calc(3px * var(--ui)) calc(4px * var(--ui))); mix-blend-mode: multiply; opacity: .5; }
.px-zone.wt-over .px-scan { opacity: 0; transition: opacity .8s; }
.px-panel { display: grid; gap: calc(10px * var(--ui)); align-content: center; min-width: 0; }
.px-panel .wt-lvl-tag { margin: 0; }
.px-step { margin: calc(4px * var(--ui)) 0 0; }
.px-q { margin: 0; font: var(--display-w) calc(clamp(calc(24px * var(--ui)), 2.4vw, calc(32px * var(--ui))) * var(--display-scale)) / 1.1 var(--display); letter-spacing: var(--display-ls); }
.px-meter { display: flex; align-items: center; gap: calc(6px * var(--ui)); }
.px-meter i { width: calc(26px * var(--ui)); height: calc(6px * var(--ui)); border-radius: calc(3px * var(--ui)); 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: calc(12.5px * var(--ui)); color: var(--muted); white-space: nowrap; }
.px-pot b { font: var(--display-w) calc(18px * var(--ui)) 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(calc(-10px * var(--ui))) scale(1.4); } }
.px-anime { display: flex; gap: calc(12px * var(--ui)); align-items: center; padding: calc(10px * var(--ui)); border: 1px solid color-mix(in srgb, var(--amber) 40%, var(--line)); border-radius: calc(10px * var(--ui)); background: color-mix(in srgb, var(--amber) 6%, var(--surface)); animation: wtIn .5s ease both; }
.px-anime img { width: calc(40px * var(--ui)); aspect-ratio: 2 / 3; object-fit: cover; border-radius: calc(5px * var(--ui)); }
.px-anime b { display: block; font-weight: 700; }
.px-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: calc(8px * var(--ui)); margin-top: calc(4px * var(--ui)); }
.px-form:has(.px-skip) { grid-template-columns: minmax(0, 1fr) auto auto; }
.px-form .btn { height: calc(44px * var(--ui)); padding: 0 calc(16px * var(--ui)); font-size: calc(14px * var(--ui)); }
.px-form .wt-search .input { height: calc(44px * var(--ui)); font-size: calc(15px * var(--ui)); }
.px-form .px-skip { padding: 0 calc(10px * var(--ui)); color: var(--muted); }
.px-form .px-skip:hover { color: var(--text); }
@media (max-width: 560px) { .px-form:has(.px-skip) { grid-template-columns: minmax(0, 1fr) auto; } .px-skip { grid-column: 1 / -1; } .px-form .px-skip { height: calc(36px * var(--ui)); } }
.px-msg { min-height: calc(20px * var(--ui)); margin: 0; font-size: calc(13.5px * var(--ui)); 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: calc(6px * var(--ui)); }
.px-chips li { display: inline-flex; align-items: center; gap: calc(5px * var(--ui)); max-width: 100%; padding: calc(4px * var(--ui)) calc(10px * var(--ui)); border-radius: calc(999px * var(--ui)); background: var(--surface); font-size: calc(12.5px * var(--ui)); color: var(--muted); }
.px-chips li .i { width: calc(13px * var(--ui)); height: calc(13px * var(--ui)); }
.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-chips li.sk { font-style: italic; }
.px-giveup { justify-self: start; }
.px-from { color: var(--muted); font-size: calc(14px * var(--ui)); }
.px-zone.wt-over .px-board { opacity: .25; transition: opacity .6s; }
.px-zone.wt-over { min-height: calc(100vh - var(--top-h) - calc(150px * var(--ui))); }
@media (max-width: 860px) { .px-board { grid-template-columns: 1fr; justify-items: center; gap: calc(16px * var(--ui)); } .px-frame { height: clamp(calc(260px * var(--ui)), 46vh, calc(420px * var(--ui))); } .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: calc(168px * var(--ui)); aspect-ratio: 1; }
.gc-pxw .gc-px { width: 100%; height: 100%; border-radius: calc(14px * var(--ui)); image-rendering: pixelated; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1), 0 0 0 calc(5px * var(--ui)) rgba(179, 140, 255, 0.12), 0 calc(22px * var(--ui)) calc(36px * var(--ui)) calc(-16px * var(--ui)) rgba(0, 0, 0, 0.95), 0 0 calc(40px * var(--ui)) calc(-10px * var(--ui)) 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: calc(-22px * var(--ui)); top: calc(-16px * var(--ui)); font-size: calc(46px * var(--ui)); text-shadow: 0 calc(6px * var(--ui)) 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: calc(200px * var(--ui)); }
@media (max-width: 560px) { .gc-pxw { width: calc(140px * var(--ui)); } }

/* --- Panneau de confirmation dans la page (remplace la fenêtre du navigateur) */
.modal.cf-modal { max-width: calc(520px * var(--ui)); }
.cf-panel { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: calc(20px * var(--ui)); align-items: center; }
.cf-ico { display: grid; place-items: center; width: calc(54px * var(--ui)); height: calc(54px * var(--ui)); border-radius: 50%; background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); }
.cf-ico .i { width: calc(24px * var(--ui)); height: calc(24px * var(--ui)); }
.cf-panel.danger .cf-ico { background: color-mix(in srgb, var(--red) 14%, transparent); color: var(--red); }
.cf-img { display: block; width: calc(92px * var(--ui)); aspect-ratio: 3 / 4; border-radius: calc(10px * var(--ui)); overflow: hidden; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 calc(18px * var(--ui)) calc(30px * var(--ui)) calc(-16px * var(--ui)) rgba(0, 0, 0, 0.9); }
.cf-img img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(.4) blur(calc(1.5px * var(--ui))); }
.cf-body h3 { margin: calc(2px * var(--ui)) 0 calc(6px * var(--ui)); font: var(--display-w) calc(calc(24px * var(--ui)) * var(--display-scale)) / 1.15 var(--display); letter-spacing: var(--display-ls); }
.cf-body p { margin: 0 0 calc(16px * var(--ui)); font-size: calc(14px * var(--ui)); }
.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: calc(6px * var(--ui)) 0 calc(4px * var(--ui)); }
.px-land h2 { margin: calc(4px * var(--ui)) 0 calc(6px * var(--ui)); font: var(--display-w) calc(clamp(calc(28px * var(--ui)), 3vw, calc(40px * var(--ui))) * var(--display-scale)) / 1.05 var(--display); letter-spacing: var(--display-ls); }
.px-land p { margin: 0 0 calc(16px * var(--ui)); font-size: calc(14px * var(--ui)); }
.px-hist { margin-top: calc(24px * var(--ui)); padding-top: calc(18px * var(--ui)); border-top: 1px solid var(--line); }
.px-hist-head { display: flex; align-items: baseline; gap: calc(12px * var(--ui)); margin-bottom: calc(12px * var(--ui)); }
.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(calc(150px * var(--ui)), 1fr)); gap: calc(16px * var(--ui)); }
.px-hcard { position: relative; display: grid; gap: calc(3px * var(--ui)); 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: calc(10px * var(--ui)); overflow: hidden; margin-bottom: calc(6px * var(--ui)); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 calc(16px * var(--ui)) calc(26px * var(--ui)) calc(-16px * var(--ui)) 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(calc(-4px * var(--ui))); box-shadow: 0 0 0 calc(2px * var(--ui)) var(--accent), 0 calc(22px * var(--ui)) calc(30px * var(--ui)) calc(-16px * var(--ui)) rgba(0, 0, 0, 0.9); }
.px-hcard-res { position: absolute; top: calc(8px * var(--ui)); left: calc(8px * var(--ui)); padding: calc(2px * var(--ui)) calc(9px * var(--ui)); border-radius: calc(999px * var(--ui)); background: rgba(14, 13, 11, 0.85); font: 700 calc(11px * var(--ui)) var(--font); letter-spacing: .06em; color: var(--red); }
.px-hcard.won .px-hcard-res { color: var(--green); }
.px-hcard b { font-size: calc(14px * var(--ui)); line-height: 1.2; }
.px-hcard small { font-size: calc(12px * var(--ui)); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.px-hcard .wt-lvl-tag { margin-top: calc(4px * var(--ui)); }
.px-detail { display: grid; grid-template-columns: calc(220px * var(--ui)) minmax(0, 1fr); gap: calc(26px * var(--ui)); align-items: center; }
.px-detail .wt-card { width: calc(220px * var(--ui)); animation: none; }
.px-detail-b { display: grid; gap: calc(6px * var(--ui)); justify-items: start; }
.px-detail-b .qz-kicker { margin: 0; }
.px-detail-b h3 { margin: 0; font: var(--display-w) calc(calc(30px * var(--ui)) * var(--display-scale)) / 1.05 var(--display); letter-spacing: var(--display-ls); }
.px-detail-b .px-chips { margin-top: calc(8px * var(--ui)); }
@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: calc(720px * var(--ui)); }
.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(calc(300px * var(--ui)), calc(100vh - var(--top-h) - calc(270px * var(--ui))), calc(560px * var(--ui))); aspect-ratio: 15 / 14; }
@media (max-width: 860px) { .px-frame { height: auto; width: min(100%, calc(420px * var(--ui))); } }
/* 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%, calc(420px * var(--ui))); 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 / calc(18px * var(--ui)) calc(18px * var(--ui)),
    linear-gradient(90deg, rgba(255, 255, 255, 0.022) 1px, transparent 1px) 0 0 / calc(18px * var(--ui)) calc(18px * var(--ui)),
    var(--bg-2); }
.quiz-zone.px-zone::before, .quiz-zone.px-zone::after { content: ""; position: absolute; z-index: -1; width: calc(8px * var(--ui)); height: calc(8px * var(--ui)); 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 calc(-2px * var(--ui)) rgba(255, 255, 255, 0.07), 8vw 52vh 0 -1px color-mix(in srgb, var(--accent) 25%, transparent), 74vw 22vh 0 calc(-2px * var(--ui)) rgba(255, 255, 255, 0.06), 30vw 60vh 0 calc(-2px * var(--ui)) 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(calc(-5px * var(--ui))) rotate(-1.2deg); } }
@keyframes pxBreath { 0%, 100% { box-shadow: 0 0 0 0 transparent; } 50% { box-shadow: 0 0 0 calc(3px * var(--ui)) color-mix(in srgb, var(--lv) 22%, transparent), 0 calc(18px * var(--ui)) calc(30px * var(--ui)) calc(-20px * var(--ui)) color-mix(in srgb, var(--lv) 55%, transparent); } }
@keyframes pxDot { 50% { transform: scale(1.5); box-shadow: 0 0 calc(14px * var(--ui)) 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(calc(-4px * var(--ui))); } }
.px-zone .px-scan { background-size: 100% calc(4px * var(--ui)); animation: pxScan 6s linear infinite; }
@keyframes pxScan { to { background-position: 0 calc(120px * var(--ui)); } }
@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(calc(500px * var(--ui)), 100%); max-width: none; padding: calc(26px * var(--ui)) calc(30px * var(--ui)) calc(24px * var(--ui)); }
.cf-panel { gap: calc(18px * var(--ui)); align-items: start; }
.cf-ico { width: calc(46px * var(--ui)); height: calc(46px * var(--ui)); margin-top: calc(2px * var(--ui)); }
.cf-ico .i { width: calc(20px * var(--ui)); height: calc(20px * var(--ui)); }
.cf-body { padding-right: calc(34px * var(--ui)); min-width: 0; }
.cf-body h3 { font-size: calc(calc(22px * var(--ui)) * var(--display-scale)); }
.cf-body .btn-row { gap: calc(10px * var(--ui)); }

/* --- Pixel : bouton Jouer sous les niveaux, niveau choisi bien visible */
.px-play-btn { margin-top: calc(22px * var(--ui)); height: calc(48px * var(--ui)); padding: 0 calc(26px * var(--ui)); font-size: calc(15px * var(--ui)); gap: calc(10px * var(--ui)); }
.px-play-btn .i { width: calc(16px * var(--ui)); height: calc(16px * var(--ui)); }
.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 calc(18px * var(--ui)) calc(30px * var(--ui)) calc(-20px * var(--ui)) 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, calc(600px * var(--ui))); column-gap: calc(48px * var(--ui)); padding: calc(32px * var(--ui)) calc(48px * var(--ui)); }
.px-zone .wt-reveal.overlay .wt-card { width: min(calc(320px * var(--ui)), calc((100vh - var(--top-h) - calc(230px * var(--ui))) * .66)); }
.px-zone .wt-reveal .wt-name { font-size: calc(clamp(calc(34px * var(--ui)), 4vw, calc(54px * var(--ui))) * var(--display-scale)); }
.px-zone .wt-reveal .px-from { font-size: calc(16px * var(--ui)); }
.px-zone .wt-reveal .qz-kicker { font-size: calc(12.5px * var(--ui)); }
.px-zone .wt-reveal .wt-bio { max-width: 52ch; font-size: calc(15px * var(--ui)); margin-top: calc(14px * var(--ui)); }
.px-zone .wt-reveal .wt-gain b { font-size: calc(calc(30px * var(--ui)) * var(--display-scale)); }
.px-zone .wt-reveal .wt-acts { margin-top: calc(20px * var(--ui)); }
.px-zone .wt-reveal .wt-acts .btn { height: calc(46px * var(--ui)); padding: 0 calc(20px * var(--ui)); font-size: calc(15px * var(--ui)); }
@media (max-width: 700px) { .px-zone .wt-reveal.overlay { grid-template-columns: calc(120px * var(--ui)) minmax(0, 1fr); padding: calc(20px * var(--ui)) calc(16px * var(--ui)); column-gap: calc(16px * var(--ui)); } .px-zone .wt-reveal.overlay .wt-card { width: calc(120px * var(--ui)); } }

/* 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 / calc(18px * var(--ui)) calc(18px * var(--ui)),
    linear-gradient(90deg, rgba(255, 255, 255, 0.022) 1px, transparent 1px) 0 0 / calc(18px * var(--ui)) calc(18px * var(--ui)),
    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 calc(-2px * var(--ui)) rgba(255, 255, 255, 0.07), 8vw 52vh 0 -1px color-mix(in srgb, var(--px-glow) 30%, transparent), 74vw 22vh 0 calc(-2px * var(--ui)) rgba(255, 255, 255, 0.06), 30vw 60vh 0 calc(-2px * var(--ui)) 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 calc(30px * var(--ui)) calc(60px * var(--ui)) calc(-28px * var(--ui)) rgba(0, 0, 0, 0.95), 0 0 calc(50px * var(--ui)) calc(-16px * var(--ui)) 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: calc(16px * var(--ui)) calc(18px * var(--ui)); }
.px-setup-zone .px-setup { padding: 0; }
.px-setup-zone .px-setup h2 { font-size: calc(clamp(calc(24px * var(--ui)), 2.4vw, calc(34px * var(--ui))) * var(--display-scale)); margin: calc(2px * var(--ui)) 0 calc(4px * var(--ui)); }
.px-setup-zone .px-setup > p { margin-bottom: calc(14px * var(--ui)); }
.px-pickrow { display: flex; align-items: center; justify-content: center; gap: clamp(calc(18px * var(--ui)), 2.4vw, calc(34px * var(--ui))); }
.px-setup-zone .px-lvls { grid-template-columns: repeat(3, auto); gap: clamp(calc(12px * var(--ui)), 1.6vw, calc(22px * var(--ui))); }
.px-setup-zone .px-lvl { padding: calc(10px * var(--ui)) calc(12px * var(--ui)) calc(12px * var(--ui)); gap: calc(2px * var(--ui)); }
.px-setup-zone .px-lvl-art { width: clamp(calc(84px * var(--ui)), calc((100vh - var(--top-h) - calc(470px * var(--ui))) * .62), calc(150px * var(--ui))); margin: 0 auto calc(6px * var(--ui)); }
.px-setup-zone .px-lvl b { font-size: calc(calc(17px * var(--ui)) * var(--display-scale)); }
.px-setup-zone .px-lvl small { font-size: calc(11.5px * var(--ui)); }
.px-play-btn { margin-top: 0; width: calc(170px * var(--ui)); height: auto; min-height: calc(64px * var(--ui)); padding: calc(10px * var(--ui)) calc(18px * var(--ui)); justify-content: center; border-radius: calc(14px * var(--ui)); }
.px-play-btn > span { display: grid; text-align: left; font: 700 calc(18px * var(--ui))/1.1 var(--font); }
.px-play-btn small { font: 600 calc(11.5px * var(--ui)) var(--font); letter-spacing: .04em; opacity: .75; margin-top: calc(3px * var(--ui)); }
.px-play-btn .i { width: calc(20px * var(--ui)); height: calc(20px * var(--ui)); flex: none; }
.px-setup-zone .px-hist { margin-top: calc(14px * var(--ui)); padding-top: calc(12px * var(--ui)); }
.px-setup-zone .px-hist-head { margin-bottom: calc(8px * var(--ui)); }
.px-setup-zone .px-hist-list { display: flex; gap: calc(12px * var(--ui)); overflow-x: auto; padding-bottom: calc(4px * var(--ui)); scrollbar-width: thin; }
.px-setup-zone .px-hist-list > li { flex: none; width: calc(var(--hh) * .75); }
.px-setup-zone { --hh: clamp(calc(84px * var(--ui)), calc(100vh - var(--top-h) - calc(585px * var(--ui))), calc(190px * var(--ui))); }
.px-setup-zone .px-hcard-img { height: var(--hh); aspect-ratio: auto; margin-bottom: calc(4px * var(--ui)); }
.px-setup-zone .px-hcard b { font-size: calc(12.5px * var(--ui)); }
.px-setup-zone .px-hcard small { font-size: calc(11px * var(--ui)); }
.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%; } }
/* pages du Jeu : compteur de spins à droite du titre (la roue en miniature + nombre), lien vers la roue */
.spins-chip { display: inline-flex; align-items: center; height: calc(46px * var(--ui)); margin: 0 0 calc(10px * var(--ui)) auto; padding: 0 calc(18px * var(--ui)); border: 1px solid var(--line); border-radius: calc(999px * var(--ui)); color: var(--muted); flex: none; transition: border-color .15s, color .15s, background .15s; }
.spins-chip:hover { border-color: var(--line-2); color: var(--text); background: var(--surface); }
.spins-chip.ready { color: var(--text); border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.mg-head-r .spins-chip { margin: 0; }
.spins-chip.bump { animation: wlBump .6s cubic-bezier(.2, 1.6, .4, 1); }
.sc-n { display: inline-flex; align-items: baseline; gap: calc(6px * var(--ui)); line-height: 1; }
.sc-n b { font: var(--display-w) calc(22px * var(--ui)) / 1 var(--display); letter-spacing: var(--display-ls); font-variant-numeric: tabular-nums; }
.sc-n small { font-size: calc(12.5px * var(--ui)); }
.spins-chip.ready .sc-n b { color: var(--accent); }
/* mini-jeux : titre plus petit, compteur plus compact (la page tient dans la fenêtre) */
.mg-page .spins-chip { height: calc(42px * var(--ui)); padding: 0 calc(16px * var(--ui)); }
.mg-page .sc-n b { font-size: calc(22px * var(--ui)); }
@media (max-width: 560px) { .spins-chip { padding: 0 calc(14px * var(--ui)); } .sc-n b { font-size: calc(20px * var(--ui)); } }

/* --- 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) - calc(140px * var(--ui))); }
.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(calc(22px * var(--ui)), 3vw, calc(48px * var(--ui)))); 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: calc(14px * var(--ui)); } .px-pickrow .px-play-btn { position: static; transform: none; width: min(100%, calc(320px * var(--ui))); } .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) - calc(140px * var(--ui))); }
@media (max-width: 1000px) { .mg-page .quiz-zone.px-setup-zone { min-height: 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: calc(14px * var(--ui)); }
.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: calc(14px * var(--ui)); }
@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(calc(80px * var(--ui)), calc((100vh - var(--top-h) - calc(520px * var(--ui))) * .62), calc(150px * var(--ui))); }
.px-setup-zone { --hh: clamp(calc(80px * var(--ui)), calc(100vh - var(--top-h) - calc(612px * var(--ui))), calc(190px * var(--ui))); }
.px-play-row { padding-top: calc(8px * var(--ui)); }
.px-play-row .px-play-btn { min-height: calc(56px * var(--ui)); }
.px-setup-zone { --hh: clamp(calc(80px * var(--ui)), calc(100vh - var(--top-h) - calc(622px * var(--ui))), calc(190px * var(--ui))); }
/* 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% - calc(66px * var(--ui))) / 4), calc((100vh - var(--top-h) - calc(330px * var(--ui))) * .667), calc(340px * var(--ui)))); gap: calc(22px * var(--ui)); }
  .qz-theme b { font-size: calc(calc(17px * var(--ui)) * 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% - calc(66px * var(--ui))) / 4), calc((100dvh - var(--top-h) - calc(470px * var(--ui))) * .667), calc(340px * var(--ui)))); }
}
/* 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(calc(14px * var(--ui))) 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: calc(8px * var(--ui)); box-shadow: 0 calc(18px * var(--ui)) calc(30px * var(--ui)) calc(-12px * var(--ui)) 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 calc(40px * var(--ui)) 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(calc(14px * var(--ui))) 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: calc(8px * var(--ui)); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06), 0 calc(12px * var(--ui)) calc(20px * var(--ui)) calc(-14px * var(--ui)) rgba(0, 0, 0, 0.9); overflow: visible; perspective: calc(600px * var(--ui)); background: none; }
.px-hcard:hover .px-hcard-img { transform: none; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12), 0 calc(18px * var(--ui)) calc(26px * var(--ui)) calc(-14px * var(--ui)) rgba(0, 0, 0, 0.95); }
.px-hcard-img canvas { border-radius: calc(8px * var(--ui)); 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: calc(14px * var(--ui)); overflow-x: auto; overflow-y: hidden; padding: calc(2px * var(--ui)) 1px calc(4px * var(--ui)); scroll-snap-type: x proximity; }
.px-land-zone:not(.em-zone) .px-hist-list > li { flex: 0 0 clamp(calc(148px * var(--ui)), 9vw, calc(168px * var(--ui))); 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(calc(1.6px * var(--ui))) brightness(.68) saturate(.68); }
.px-land-zone:not(.em-zone) .px-hcard:not(.won) .px-hcard-img canvas { filter: blur(calc(1.8px * var(--ui))) 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 calc(18px * var(--ui)) calc(30px * var(--ui)) calc(-18px * var(--ui)) rgba(0, 0, 0, 0.9); outline-width: calc(1.5px * var(--ui)); outline-offset: calc(3px * var(--ui)); }
.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 calc(10px * var(--ui)) calc(14px * var(--ui)) 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 calc(-40px * var(--ui)) calc(50px * var(--ui)) calc(-30px * var(--ui)) 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: calc(760px * var(--ui)); }
.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 calc(-10px * var(--ui)) calc(-30px * var(--ui)); box-shadow: 0 calc(22px * var(--ui)) calc(30px * var(--ui)) calc(-14px * var(--ui)) 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: calc(-10px * var(--ui)); }
.mg-grid .gc-quiz .gc-front .gc-fan img:nth-child(1) { transform: translateZ(calc(-30px * var(--ui))) rotateY(32deg) rotateZ(-4deg) translateY(calc(14px * var(--ui))); }
.mg-grid .gc-quiz .gc-front .gc-fan img:nth-child(2) { transform: translateZ(calc(18px * var(--ui))) rotateY(12deg) translateY(calc(2px * var(--ui))); }
.mg-grid .gc-quiz .gc-front .gc-fan img:nth-child(3) { transform: translateZ(calc(18px * var(--ui))) rotateY(-12deg) translateY(calc(2px * var(--ui))); }
.mg-grid .gc-quiz .gc-front .gc-fan img:nth-child(4) { transform: translateZ(calc(-30px * var(--ui))) rotateY(-32deg) rotateZ(4deg) translateY(calc(14px * var(--ui))); }
.mg-grid .gc-quiz:hover .gc-front .gc-fan img:nth-child(1) { transform: translateZ(calc(-10px * var(--ui))) rotateY(24deg) rotateZ(-5deg) translateX(calc(-14px * var(--ui))) translateY(calc(4px * var(--ui))); }
.mg-grid .gc-quiz:hover .gc-front .gc-fan img:nth-child(2) { transform: translateZ(calc(46px * var(--ui))) rotateY(8deg) translateX(calc(-4px * var(--ui))) translateY(calc(-8px * var(--ui))); }
.mg-grid .gc-quiz:hover .gc-front .gc-fan img:nth-child(3) { transform: translateZ(calc(46px * var(--ui))) rotateY(-8deg) translateX(calc(4px * var(--ui))) translateY(calc(-8px * var(--ui))); }
.mg-grid .gc-quiz:hover .gc-front .gc-fan img:nth-child(4) { transform: translateZ(calc(-10px * var(--ui))) rotateY(-24deg) rotateZ(5deg) translateX(calc(14px * var(--ui))) translateY(calc(4px * var(--ui))); }
@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: calc(108px * var(--ui)); margin: 0 calc(4px * var(--ui)) calc(-30px * var(--ui)); }
.mg-grid .gc-quiz .gc-front .gc-fan img:nth-child(1) { transform: translateZ(calc(-24px * var(--ui))) rotateY(28deg) translateY(calc(12px * var(--ui))); }
.mg-grid .gc-quiz .gc-front .gc-fan img:nth-child(2) { transform: translateZ(calc(22px * var(--ui))) rotateY(9deg); }
.mg-grid .gc-quiz .gc-front .gc-fan img:nth-child(3) { transform: translateZ(calc(22px * var(--ui))) rotateY(-9deg); }
.mg-grid .gc-quiz .gc-front .gc-fan img:nth-child(4) { transform: translateZ(calc(-24px * var(--ui))) rotateY(-28deg) translateY(calc(12px * var(--ui))); }
.mg-grid .gc-quiz:hover .gc-front .gc-fan img:nth-child(1) { transform: translateZ(calc(-14px * var(--ui))) rotateY(22deg) translateX(calc(-8px * var(--ui))) translateY(calc(4px * var(--ui))); }
.mg-grid .gc-quiz:hover .gc-front .gc-fan img:nth-child(2) { transform: translateZ(calc(40px * var(--ui))) rotateY(6deg) translateY(calc(-8px * var(--ui))); }
.mg-grid .gc-quiz:hover .gc-front .gc-fan img:nth-child(3) { transform: translateZ(calc(40px * var(--ui))) rotateY(-6deg) translateY(calc(-8px * var(--ui))); }
.mg-grid .gc-quiz:hover .gc-front .gc-fan img:nth-child(4) { transform: translateZ(calc(-14px * var(--ui))) rotateY(-22deg) translateX(calc(8px * var(--ui))) translateY(calc(4px * var(--ui))); }

/* ===========================================================================
   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(calc(300px * var(--ui)), calc(420px * var(--ui))); }
@media (max-width: 860px) { .em-board { grid-template-columns: 1fr; } }
.em-stage3d { perspective: calc(1100px * var(--ui)); padding: calc(6px * var(--ui)); }
.em-card { --rx: 0deg; --ry: 0deg; position: relative; display: grid; gap: clamp(calc(10px * var(--ui)), 1.6vh, calc(16px * var(--ui))); padding: clamp(calc(18px * var(--ui)), 2.4vh, calc(28px * var(--ui))) clamp(calc(18px * var(--ui)), 2vw, calc(30px * var(--ui))) clamp(calc(22px * var(--ui)), 2.8vh, calc(32px * var(--ui))) clamp(calc(10px * var(--ui)), 1.2vw, calc(18px * var(--ui)));
  border-radius: calc(18px * var(--ui)); 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 calc(40px * var(--ui)) calc(70px * var(--ui)) calc(-34px * var(--ui)) rgba(0, 0, 0, 0.95), 0 0 calc(60px * var(--ui)) calc(-26px * var(--ui)) 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(calc(56px * var(--ui)), min(8.4vw, calc((100vh - var(--top-h) - calc(330px * var(--ui))) / 5.4)), calc(96px * var(--ui))); --gap: clamp(calc(8px * var(--ui)), 1vw, calc(14px * var(--ui))); display: flex; align-items: center; gap: var(--gap); transform-style: preserve-3d; }
.em-row-n { width: calc(16px * var(--ui)); font: 600 calc(11px * var(--ui)) 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 calc(2px * var(--ui)) 0 rgba(255, 255, 255, 0.75), inset 0 calc(-4px * var(--ui)) 0 rgba(120, 90, 50, 0.16), 0 calc(5px * var(--ui)) 0 #bba684, 0 calc(7px * var(--ui)) 0 #7d6a48, 0 calc(20px * var(--ui)) calc(24px * var(--ui)) calc(-12px * var(--ui)) 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 calc(5px * var(--ui)) #1d1b17, inset 0 0 0 calc(6px * var(--ui)) rgba(255, 90, 54, 0.18), 0 calc(5px * var(--ui)) 0 #0f0e0c, 0 calc(20px * var(--ui)) calc(24px * var(--ui)) calc(-12px * var(--ui)) 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(calc(18px * var(--ui))) translateY(calc(-4px * var(--ui))) 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(calc(34px * var(--ui))) translateY(calc(-14px * var(--ui))) 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: calc(6px * var(--ui)); padding: calc(8px * var(--ui)) calc(14px * var(--ui)); font-size: calc(14px * var(--ui)); overflow: hidden; }
.em-plate .em-back { display: flex; flex-direction: column; justify-content: center; gap: calc(5px * var(--ui)); font-size: calc(var(--t) * .26); }
.em-plate .em-back small { font: 600 calc(10.5px * var(--ui)) 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 calc(9px * var(--ui)) var(--font); letter-spacing: .12em; text-transform: uppercase; color: rgba(42, 33, 24, 0.5); }
.em-fact b { font: 700 clamp(calc(11px * var(--ui)), calc(var(--t) * .15), calc(15px * var(--ui))) / 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: calc(8px * var(--ui)); margin-top: calc(4px * var(--ui)); }
.em-choices .qz-choice { min-height: calc(50px * var(--ui)); font-size: calc(14px * var(--ui)); }

/* révélation : les trois séries d'emojis */
.em-sets { display: flex; flex-wrap: wrap; gap: calc(8px * var(--ui)); margin-top: calc(10px * var(--ui)); }
.em-sets span { padding: calc(4px * var(--ui)) calc(12px * var(--ui)); border-radius: calc(999px * var(--ui)); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); font-size: calc(20px * var(--ui)); letter-spacing: calc(3px * var(--ui)); }
.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: calc(4px * var(--ui)); }

/* 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: calc(22px * var(--ui)) calc(6px * var(--ui)) calc(8px * var(--ui)); text-align: center; font-size: calc(20px * var(--ui)); letter-spacing: calc(3px * var(--ui)); 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: calc(600px * var(--ui)); }
.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(calc(6px * var(--ui))); }
.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: calc(78px * var(--ui)); --gap: calc(12px * var(--ui)); perspective: calc(600px * var(--ui)); }
.gc-emo.em-row .em-tile:nth-child(1) .em-tile-in { transform: rotateZ(-6deg) translateY(calc(6px * var(--ui))); }
.gc-emo.em-row .em-tile:nth-child(3) .em-tile-in { transform: rotateZ(6deg) translateY(calc(6px * var(--ui))); }
.mg-card:hover .gc-emo.em-row .em-tile-in { transform: rotateY(360deg) translateY(calc(-8px * var(--ui))); }

@media (max-width: 860px) { .em-row { --t: clamp(calc(48px * var(--ui)), 17vw, calc(80px * var(--ui))); } .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 calc(8px * var(--ui)); gap: calc(6px * var(--ui)); } }
@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(calc(16px * var(--ui)), 2.2vw, calc(32px * var(--ui))); width: min(100%, calc(1240px * var(--ui))); margin: 0 auto; }
.em-zone.px-setup-zone .px-lvl { grid-template-rows: minmax(0, 1fr) auto auto; min-height: clamp(calc(220px * var(--ui)), calc(100vh - var(--top-h) - calc(400px * var(--ui))), calc(460px * var(--ui))); padding: calc(16px * var(--ui)) calc(16px * var(--ui)) calc(20px * var(--ui)); gap: calc(4px * var(--ui)); }
.em-zone.px-setup-zone .px-lvl-art { width: 100%; height: 100%; aspect-ratio: auto; margin: 0 0 calc(10px * var(--ui)); }
.em-zone.px-setup-zone .em-lvl-art .em-row { --t: min(24cqi, calc(120px * var(--ui))); --gap: 3cqi; }
.em-zone.px-setup-zone .px-lvl b { font-size: calc(calc(24px * var(--ui)) * var(--display-scale)); }
.em-zone.px-setup-zone .px-lvl small { font-size: calc(13.5px * var(--ui)); }
@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: calc(120px * var(--ui)); } }
/* 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(calc(11px * var(--ui)), calc(var(--t) * .15), calc(14px * var(--ui))) / 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: calc(8px * var(--ui)); min-width: 0; max-width: 100%; }
.em-hero small, .em-fact small { font: 700 calc(9px * var(--ui)) var(--font); letter-spacing: .12em; text-transform: uppercase; color: rgba(42, 33, 24, 0.5); }
.em-hero b { font: 700 clamp(calc(12px * var(--ui)), calc(var(--t) * .17), calc(16px * var(--ui))) / 1.2 var(--font); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.em-shape { display: flex; flex-wrap: wrap; gap: calc(4px * var(--ui)) calc(10px * var(--ui)); }
.em-word { display: flex; gap: calc(2px * var(--ui)); }
.em-word i { display: grid; place-items: center; width: clamp(calc(10px * var(--ui)), calc(var(--t) * .15), calc(15px * var(--ui))); height: clamp(calc(14px * var(--ui)), calc(var(--t) * .2), calc(20px * var(--ui))); border-bottom: calc(2px * var(--ui)) solid rgba(42, 33, 24, 0.35); font: 800 clamp(calc(10px * var(--ui)), calc(var(--t) * .15), calc(14px * var(--ui))) / 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: calc(520px * var(--ui)); }
.em-glare { z-index: 0; }
.em-row { position: relative; z-index: 1; }
.em-row.on .em-tile:hover .em-tile-in { transform: translateY(calc(-5px * var(--ui))) rotateX(12deg) rotateY(0deg); }
@keyframes emJump { 40% { transform: translateY(calc(-14px * var(--ui))) 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(calc(-3px * var(--ui))) rotateX(0deg) rotateY(360deg); }
.mg-card:hover .gc-emo.em-row .em-tile-in { transform: translateY(calc(-8px * var(--ui))) rotateX(0deg) rotateY(360deg); }
.gc-emo.em-row .em-tile:nth-child(1) .em-tile-in { transform: translateY(calc(6px * var(--ui))) rotateX(0deg) rotateY(0deg) rotateZ(-6deg); }
.gc-emo.em-row .em-tile:nth-child(3) .em-tile-in { transform: translateY(calc(6px * var(--ui))) rotateX(0deg) rotateY(0deg) rotateZ(6deg); }
.mg-card:hover .gc-emo.em-row .em-tile:nth-child(n) .em-tile-in { transform: translateY(calc(-8px * var(--ui))) 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) - calc(124px * var(--ui))); min-height: calc(480px * var(--ui)); padding-block: calc(14px * var(--ui)) calc(16px * var(--ui)); }
.em-zone.px-setup-zone .px-setup > p { margin-bottom: calc(12px * var(--ui)); }
.em-zone.px-setup-zone .px-lvl { min-height: 0; height: 100%; padding: calc(12px * var(--ui)) calc(14px * var(--ui)) calc(14px * var(--ui)); }
.em-zone.px-setup-zone .px-lvl-art { min-height: 0; }
.em-zone.px-setup-zone .em-lvl-art .em-row { --t: min(22cqi, calc(110px * var(--ui))); }
.em-zone .px-play-row { flex: none; justify-content: center; margin-top: 0; padding-top: calc(18px * var(--ui)); }
.em-zone .px-play-row .px-play-btn { width: auto; min-height: 0; height: calc(44px * var(--ui)); padding: 0 calc(30px * var(--ui)); border-radius: calc(999px * var(--ui)); gap: calc(8px * var(--ui)); }
.em-zone .px-play-row .px-play-btn > span { font-size: calc(15px * var(--ui)); }
.em-zone .px-play-row .px-play-btn .i { width: calc(16px * var(--ui)); height: calc(16px * var(--ui)); }
.em-zone.px-setup-zone { --hh: clamp(calc(64px * var(--ui)), calc(100dvh - var(--top-h) - calc(700px * var(--ui))), calc(110px * var(--ui))); }
.em-zone.px-setup-zone .px-hist { flex: none; margin-top: calc(14px * var(--ui)); padding-top: calc(10px * var(--ui)); }
.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: calc(120px * var(--ui)); } }

/* --- 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 calc(3px * var(--ui)) color-mix(in srgb, var(--lv) 22%, transparent), 0 calc(18px * var(--ui)) calc(30px * var(--ui)) calc(-20px * var(--ui)) 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: calc(-120px * var(--ui)) 0 0 0; mix-blend-mode: normal; background: repeating-linear-gradient(transparent 0 calc(3px * var(--ui)), rgba(0, 0, 0, 0.07) calc(3px * var(--ui)) calc(4px * var(--ui))); animation: pxScanT 6s linear infinite; will-change: transform; }
@keyframes pxScanT { to { transform: translateY(calc(120px * var(--ui))); } }
.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, calc(110px * var(--ui))); }
.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: calc(14px * var(--ui)); writing-mode: vertical-rl; transform: rotate(180deg); text-align: center; font: 700 calc(9px * var(--ui)) 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, calc(480px * var(--ui))) auto; grid-template-areas: "card who board"; column-gap: clamp(calc(24px * var(--ui)), 3vw, calc(48px * var(--ui))); }
.em-recap-card { grid-area: board; display: grid; gap: calc(10px * var(--ui)); align-content: center; }
.em-recap-card .qz-kicker { margin: 0; }
.em-recap-card .em-card { transform: none; padding: calc(16px * var(--ui)) calc(18px * var(--ui)) calc(18px * var(--ui)) calc(8px * var(--ui)); gap: calc(8px * var(--ui)); }
.em-recap-card .em-row { --t: clamp(calc(40px * var(--ui)), min(4.8vw, calc((100dvh - var(--top-h) - calc(300px * var(--ui))) / 5.4)), calc(78px * var(--ui))); --gap: calc(8px * var(--ui)); }
.em-recap-card .em-plate .em-face { padding: calc(6px * var(--ui)) calc(10px * var(--ui)); gap: calc(4px * var(--ui)); }
.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: calc(16px * var(--ui)); overflow-y: auto; align-content: safe center; }
  .em-recap-card { justify-self: start; }
}
@media (max-width: 700px) { .px-zone .wt-reveal.overlay.em-reveal { grid-template-columns: calc(120px * var(--ui)) 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(calc(44px * var(--ui)), min(5vw, calc((100dvh - var(--top-h) - calc(300px * var(--ui))) / 5.6)), calc(82px * var(--ui))); }
.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: calc(200px * var(--ui)) minmax(0, 1fr) auto; gap: calc(24px * var(--ui)); }
.px-detail.em-detail .wt-card { width: calc(200px * var(--ui)); }
.px-detail.em-detail .em-recap-card { --rt: clamp(calc(40px * var(--ui)), 4vw, calc(62px * var(--ui))); }
.modal.px-detail-modal:has(.em-detail) { width: min(calc(1080px * var(--ui)), 100%); max-width: none; }
@media (max-width: 900px) { .px-detail.em-detail { grid-template-columns: calc(130px * var(--ui)) minmax(0, 1fr); } .px-detail.em-detail .wt-card { width: calc(130px * var(--ui)); } .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: calc(1280px * var(--ui)); margin-inline: auto; }
.friends-layout { display: grid; grid-template-columns: minmax(calc(280px * var(--ui)), calc(350px * var(--ui))) minmax(0, 1fr); min-height: min(calc(680px * var(--ui)), calc(100vh - var(--top-h) - calc(155px * var(--ui)))); border: 1px solid var(--line); border-radius: calc(14px * var(--ui)); 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: calc(18px * var(--ui)); border-top: 1px solid var(--line); }
.friends-side h2 { display: flex; align-items: baseline; gap: calc(8px * var(--ui)); margin-bottom: calc(10px * var(--ui)); font-size: calc(13px * var(--ui)); color: var(--muted); text-transform: uppercase; letter-spacing: .1em; }
.friends-side h2 small { color: var(--accent); font-size: calc(11px * var(--ui)); }
.friend-search { padding: calc(18px * var(--ui)); }
.friend-search > label { display: block; margin-bottom: calc(8px * var(--ui)); font-size: calc(13px * var(--ui)); font-weight: 600; }
.friend-search > div:first-of-type { display: flex; gap: calc(8px * var(--ui)); }
.friend-search .input { min-width: 0; }
.friend-search .btn { padding-inline: calc(12px * var(--ui)); }
#friend-suggestions { display: grid; gap: calc(3px * var(--ui)); margin-top: calc(6px * var(--ui)); }
#friend-suggestions > button { display: flex; align-items: center; gap: calc(9px * var(--ui)); width: 100%; padding: calc(7px * var(--ui)); border: 0; border-radius: calc(8px * var(--ui)); color: var(--text); background: transparent; text-align: left; }
#friend-suggestions > button:hover { background: var(--surface-2); }
#friend-suggestions > small { padding: calc(8px * var(--ui)); color: var(--muted); }
.social-avatar { width: calc(40px * var(--ui)); height: calc(40px * var(--ui)); 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: calc(18px * var(--ui)); height: calc(18px * var(--ui)); }
.social-avatar.bot { border-color: color-mix(in srgb, var(--accent) 40%, var(--line-2)); background: #1c1411; }
.social-avatar.bot img { object-fit: cover; }
.friend-row, .friend-pending { display: flex; align-items: center; gap: calc(11px * var(--ui)); min-width: 0; padding: calc(9px * var(--ui)); border-radius: calc(9px * var(--ui)); }
.friend-row:hover, .friend-row.on { background: var(--surface-2); }
.friend-row.on { box-shadow: inset calc(2px * var(--ui)) 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: calc(14px * var(--ui)); }
.friend-row small, .friend-pending small { color: var(--muted); font-size: calc(12px * var(--ui)); }
.friend-row > i { min-width: calc(20px * var(--ui)); height: calc(20px * var(--ui)); display: grid; place-items: center; padding: 0 calc(5px * var(--ui)); border-radius: calc(999px * var(--ui)); background: var(--accent); color: var(--accent-ink); font: 700 calc(11px * var(--ui)) var(--mono); font-style: normal; }
.friend-request { display: flex; align-items: center; justify-content: space-between; gap: calc(8px * var(--ui)); padding: calc(7px * var(--ui)) 0; }
.friend-request > a { display: flex; align-items: center; gap: calc(10px * var(--ui)); min-width: 0; }
.friend-request > div { display: flex; gap: calc(5px * var(--ui)); }
.friend-request .icon-btn:first-child { color: var(--green); }
.friend-request .icon-btn.danger { color: var(--red); }
.friend-outgoing .link { font-size: calc(10px * var(--ui)); }
.friends-empty { padding: calc(14px * var(--ui)) calc(9px * var(--ui)); color: var(--muted); }
.friends-empty p { margin: 0 0 calc(2px * var(--ui)); }
.friends-empty small { color: var(--faint); }
.conversation { display: grid; grid-template-rows: auto minmax(calc(280px * var(--ui)), 1fr) auto; min-width: 0; background: var(--bg-2); }
.conversation-head { display: flex; align-items: center; gap: calc(12px * var(--ui)); min-height: calc(70px * var(--ui)); padding: calc(12px * var(--ui)) calc(18px * var(--ui)); 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: calc(12px * var(--ui)); }
.conversation-head a:hover { color: var(--accent); }
.messages { display: flex; flex-direction: column; gap: calc(7px * var(--ui)); padding: calc(22px * var(--ui)); overflow-y: auto; scroll-behavior: smooth; }
.message { align-self: flex-start; max-width: min(72%, calc(620px * var(--ui))); }
.message.mine { align-self: flex-end; text-align: right; }
.message p { margin: 0; padding: calc(9px * var(--ui)) calc(13px * var(--ui)); border: 1px solid var(--line-2); border-radius: calc(5px * var(--ui)) calc(14px * var(--ui)) calc(14px * var(--ui)) calc(14px * var(--ui)); 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: calc(14px * var(--ui)) calc(5px * var(--ui)) calc(14px * var(--ui)) calc(14px * var(--ui)); background: color-mix(in srgb, var(--accent) 15%, var(--surface-2)); }
.message small { display: block; margin: calc(3px * var(--ui)) calc(4px * var(--ui)) 0; color: var(--faint); font-size: calc(10px * var(--ui)); }
.messages-empty { margin: auto; color: var(--muted); text-align: center; }
.message-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: calc(10px * var(--ui)); padding: calc(14px * var(--ui)) calc(18px * var(--ui)); border-top: 1px solid var(--line); background: var(--surface); }
.message-form .form-err { flex-basis: 100%; order: 2; }
.message-form textarea { flex: 1 1 0; min-height: calc(42px * var(--ui)); max-height: calc(130px * var(--ui)); resize: vertical; padding-block: calc(9px * var(--ui)); line-height: 1.45; }
.conversation-empty { display: grid; place-items: center; align-content: center; grid-row: 1 / -1; padding: calc(40px * var(--ui)); color: var(--muted); text-align: center; }
.conversation-empty .i { width: calc(42px * var(--ui)); height: calc(42px * var(--ui)); margin-bottom: calc(14px * var(--ui)); color: var(--faint); }
.conversation-empty h2 { color: var(--text); }
.conversation-empty p { margin: calc(7px * var(--ui)) 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: calc(540px * var(--ui)); }
  .message { max-width: 86%; }
}
@media (max-width: 520px) {
  .friends-page { padding-inline: calc(10px * var(--ui)); }
  .friend-search > div:first-of-type { flex-direction: column; }
  .friend-search .btn { width: 100%; }
  .conversation-head, .message-form { padding-inline: calc(12px * var(--ui)); }
  .messages { padding: calc(16px * var(--ui)) calc(12px * var(--ui)); }
  .message-form .btn span { display: none; }
}

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

@media (max-width: 900px) {
  .social-dock { right: calc(10px * var(--ui)); bottom: calc(calc(72px * var(--ui)) + env(safe-area-inset-bottom)); }
  .social-panel { width: min(calc(360px * var(--ui)), calc(100vw - calc(20px * var(--ui)))); height: min(calc(560px * var(--ui)), calc(100vh - calc(150px * var(--ui)))); }
  .social-launch { min-width: calc(48px * var(--ui)); width: calc(48px * var(--ui)); 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: calc(22px * var(--ui)); }
.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(calc(30px * var(--ui)), 19cqi); --gap: max(calc(3px * var(--ui)), 2.2cqi); position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: center; padding: calc(26px * var(--ui)) calc(6px * var(--ui)) max(calc(7px * var(--ui)), 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 calc(-2px * var(--ui)) 0 rgba(120, 90, 50, 0.16), 0 calc(2px * var(--ui)) 0 #bba684, 0 calc(3px * var(--ui)) 0 #7d6a48, 0 calc(6px * var(--ui)) calc(8px * var(--ui)) calc(-3px * var(--ui)) rgba(0, 0, 0, 0.9); }
.em-hcard:hover .em-hc-emo .em-tile-in { transform: translateY(calc(-4px * var(--ui))) rotateX(0deg) rotateY(0deg); }
.px-setup-zone .em-hc-emo.em-row { display: flex; padding-top: calc(14px * var(--ui)); }
/* 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(calc(24px * var(--ui)), 15cqi); --gap: max(calc(3px * var(--ui)), 1.8cqi); padding: calc(22px * var(--ui)) calc(6px * var(--ui)) max(calc(6px * var(--ui)), 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(calc(6px * var(--ui))) saturate(1.2); backdrop-filter: blur(calc(6px * var(--ui))) 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 calc(4px * var(--ui)) calc(10px * var(--ui)) calc(-4px * var(--ui)) 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 calc(12px * var(--ui)) calc(-2px * var(--ui)) rgba(255, 236, 200, 0.35), 0 calc(4px * var(--ui)) calc(10px * var(--ui)) calc(-4px * var(--ui)) rgba(0, 0, 0, 0.7); }
.px-setup-zone .em-hc-emo.em-row { padding-top: calc(12px * var(--ui)); }
/* étiquette de niveau des vignettes plus discrète */
.em-hcard .wt-lvl-tag { padding: 1px calc(7px * var(--ui)); font-size: calc(9px * var(--ui)); letter-spacing: .08em; margin-top: calc(3px * var(--ui)); }
/* 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 + calc(6px * var(--ui))); 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(calc(44px * var(--ui)), 4.8vw, calc(70px * var(--ui))); }
.px-detail.em-detail { gap: calc(28px * var(--ui)); }

/* 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(calc(26px * var(--ui))) rotate(-5deg) scale(.92); } }
.em-hcard .px-hcard-img { overflow: hidden; transform: perspective(calc(700px * var(--ui))) 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(calc(700px * var(--ui))) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(calc(-6px * var(--ui))) 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 calc(24px * var(--ui)) calc(30px * var(--ui)) calc(-16px * var(--ui)) rgba(0, 0, 0, 0.95); }
.em-hcard.won:hover .px-hcard-img { box-shadow: 0 0 0 calc(1.5px * var(--ui)) color-mix(in srgb, var(--green) 70%, transparent), 0 calc(24px * var(--ui)) calc(30px * var(--ui)) calc(-16px * var(--ui)) rgba(0, 0, 0, 0.95), 0 0 calc(24px * var(--ui)) calc(-8px * var(--ui)) color-mix(in srgb, var(--green) 60%, transparent); }
.em-hcard:not(.won):hover .px-hcard-img { box-shadow: 0 0 0 calc(1.5px * var(--ui)) color-mix(in srgb, var(--red) 55%, transparent), 0 calc(24px * var(--ui)) calc(30px * var(--ui)) calc(-16px * var(--ui)) 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(calc(-7px * var(--ui))) rotate(-6deg); } 100% { transform: translateY(calc(-3px * var(--ui))); } }
/* 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 + calc(4px * var(--ui))); 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: calc(8px * var(--ui)) calc(14px * var(--ui)); gap: calc(6px * var(--ui)); }
.em-recap-card .em-facts { font-size: calc(13px * var(--ui)); line-height: 1.35; }
.em-recap-card .em-hero small { font-size: calc(9.5px * var(--ui)); }
.em-recap-card .em-hero b { font-size: calc(14px * var(--ui)); }
.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(calc(700px * var(--ui))) rotateX(0deg) rotateY(0deg); }
  50% { transform: perspective(calc(700px * var(--ui))) rotateX(0deg) rotateY(180deg) translateY(calc(-8px * var(--ui))) scale(1.06); }
  100% { transform: perspective(calc(700px * var(--ui))) 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(calc(-10px * var(--ui))) 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: calc(8px * var(--ui)) calc(18px * var(--ui)); }
.pf-id-actions .link { display: inline-flex; align-items: center; gap: calc(6px * var(--ui)); }
.pf-id-actions .i { width: calc(14px * var(--ui)); height: calc(14px * var(--ui)); }
.pf-perch-open small { display: inline-flex; align-items: center; min-height: calc(20px * var(--ui)); margin-left: calc(2px * var(--ui)); padding: 0 calc(7px * var(--ui)); border-radius: calc(999px * var(--ui)); background: color-mix(in srgb, var(--accent) 13%, var(--surface)); color: var(--accent); font-size: calc(10.5px * var(--ui)); font-weight: 650; }
.modal.perch-modal { width: min(calc(1120px * var(--ui)), 96vw); }
.perch-pick { padding: calc(22px * var(--ui)) calc(26px * var(--ui)) calc(20px * var(--ui)); }
.perch-pick-head { display: flex; align-items: flex-end; justify-content: space-between; gap: calc(24px * var(--ui)); margin: 0 calc(42px * var(--ui)) calc(18px * var(--ui)) 0; }
.perch-pick-head h2 { margin: 0 0 calc(4px * var(--ui)); font: var(--display-w) calc(calc(28px * var(--ui)) * var(--display-scale)) / 1.08 var(--display); letter-spacing: var(--display-ls); }
.perch-pick-head p { margin: 0; font-size: calc(13px * var(--ui)); }
.perch-pick-count { flex: none; display: flex; align-items: baseline; gap: calc(7px * var(--ui)); padding: calc(10px * var(--ui)) calc(14px * var(--ui)); border: 1px solid var(--line); border-radius: calc(10px * var(--ui)); background: var(--surface); }
.perch-pick-count b { font: var(--display-w) calc(calc(24px * var(--ui)) * var(--display-scale)) / 1 var(--display); color: var(--accent); }
.perch-pick-count span { color: var(--muted); font-size: calc(12px * var(--ui)); }
.perch-pick-tools { display: flex; align-items: center; gap: calc(10px * var(--ui)); margin-bottom: calc(12px * var(--ui)); }
.perch-pick-tools i { width: 1px; height: calc(13px * var(--ui)); background: var(--line-2); }
.perch-pick-tools .link { font-size: calc(12px * var(--ui)); }
.perch-pick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(calc(135px * var(--ui)), 1fr)); gap: calc(9px * var(--ui)); max-height: min(calc(540px * var(--ui)), calc(100dvh - calc(285px * var(--ui)))); padding: calc(3px * var(--ui)) calc(5px * var(--ui)) calc(5px * var(--ui)) calc(3px * var(--ui)); overflow-y: auto; }
.perch-opt { position: relative; display: grid; grid-template-rows: calc(104px * var(--ui)) auto; gap: calc(6px * var(--ui)); min-width: 0; padding: calc(10px * var(--ui)) calc(9px * var(--ui)) calc(9px * var(--ui)); border: 1px solid var(--line); border-radius: calc(11px * var(--ui)); 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(calc(-2px * var(--ui))); }
.perch-opt img { width: 100%; height: calc(104px * var(--ui)); 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(calc(-2px * var(--ui))); }
.perch-opt > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.perch-opt small { color: var(--faint); font: 500 calc(9.5px * var(--ui)) var(--mono); letter-spacing: .04em; }
.perch-opt b { overflow: hidden; font-size: calc(12px * var(--ui)); line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
.perch-opt-check { position: absolute; z-index: 2; right: calc(8px * var(--ui)); top: calc(8px * var(--ui)); display: grid; place-items: center; width: calc(24px * var(--ui)); height: calc(24px * var(--ui)); 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: calc(13px * var(--ui)); height: calc(13px * var(--ui)); }
.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 calc(6px * var(--ui)) calc(8px * var(--ui)) 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: calc(20px * var(--ui)); margin-top: calc(16px * var(--ui)); padding-top: calc(14px * var(--ui)); border-top: 1px solid var(--line); }
.perch-pick-foot > span { max-width: calc(560px * var(--ui)); }
.perch-pick-empty { display: grid; justify-items: start; gap: calc(12px * var(--ui)); min-height: calc(220px * var(--ui)); align-content: center; padding: calc(24px * var(--ui)); border: 1px dashed var(--line-2); border-radius: calc(12px * var(--ui)); }
.perch-pick-empty p { margin: 0; }
@media (max-width: 650px) {
  .perch-pick { padding: calc(18px * var(--ui)) calc(14px * var(--ui)) calc(14px * var(--ui)); }
  .perch-pick-head { align-items: flex-start; margin-right: calc(38px * var(--ui)); }
  .perch-pick-count { padding: calc(7px * var(--ui)) calc(10px * var(--ui)); }
  .perch-pick-count span { display: none; }
  .perch-pick-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); max-height: calc(100dvh - calc(300px * var(--ui))); }
  .perch-opt { grid-template-rows: calc(88px * var(--ui)) auto; }
  .perch-opt img { height: calc(88px * var(--ui)); }
  .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, calc(820px * var(--ui))); transform: none; }
.reveal.rv-master .rv-head .rv-tier.pm b { font: 900 calc(clamp(calc(32px * var(--ui)), 4.8vw, calc(62px * var(--ui))) * 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(calc(-10px * var(--ui))) 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: calc(18px * var(--ui)); }
.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: calc(130px * var(--ui)); 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: calc(12px * var(--ui)); display: flex; flex-direction: column; gap: 1px; padding: calc(5px * var(--ui)) calc(9px * var(--ui)); border-radius: calc(8px * var(--ui)); background: rgba(0, 0, 0, .6); border: 1px solid rgba(255, 255, 255, .1); font: var(--display-w) calc(13px * var(--ui)) / 1.1 var(--display); color: var(--amber); white-space: nowrap; font-variant-numeric: tabular-nums; }
.gc-pm-chip small { font: 600 calc(9px * var(--ui)) var(--font); letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .7); }
.gc-pm-side.l .gc-pm-chip { left: calc(10px * var(--ui)); }
.gc-pm-side.r .gc-pm-chip { right: calc(10px * var(--ui)); 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: calc(6px * var(--ui)); }
.gc-pm-sign { display: grid; place-items: center; width: calc(26px * var(--ui)); height: calc(26px * var(--ui)); 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: calc(14px * var(--ui)); height: calc(14px * var(--ui)); 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: calc(44px * var(--ui)); height: calc(44px * var(--ui)); border-radius: 50%; background: var(--accent); color: var(--accent-ink, #160c08); font: var(--display-w) calc(16px * var(--ui)) / 1 var(--display); box-shadow: 0 0 0 calc(4px * var(--ui)) 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(calc(2px * var(--ui))); }
.gc-pm-blur { display: flex; gap: calc(20px * var(--ui)); align-items: flex-end; }
.gc-pm-blur img { height: calc(140px * var(--ui)); }

/* 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 calc(120px * var(--ui)) 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: calc(4px * var(--ui)) 0 calc(2px * var(--ui)); }
.hl-setup h2 { margin: calc(4px * var(--ui)) 0 calc(6px * var(--ui)); font: var(--display-w) calc(clamp(calc(30px * var(--ui)), 3.2vw, calc(44px * var(--ui))) * var(--display-scale)) / 1.05 var(--display); letter-spacing: var(--display-ls); }
.hl-setup > p { margin: 0 0 calc(22px * var(--ui)); font-size: calc(14px * var(--ui)); }
.hl-unis { display: grid; grid-template-columns: repeat(auto-fit, minmax(calc(108px * var(--ui)), 1fr)); gap: calc(12px * var(--ui)); width: 100%; perspective: calc(900px * var(--ui)); }
.hl-u { --rx: 0deg; --ry: 0deg; position: relative; aspect-ratio: 3 / 4; padding: 0; overflow: hidden; border: 0; border-radius: calc(12px * var(--ui)); background: var(--bg-2); color: #fff; text-align: left; cursor: pointer;
  box-shadow: 0 0 0 1px var(--line), 0 calc(14px * var(--ui)) calc(26px * var(--ui)) calc(-18px * var(--ui)) 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(calc(26px * var(--ui))) 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: calc(11px * var(--ui)); right: calc(11px * var(--ui)); bottom: calc(10px * var(--ui)); display: grid; gap: calc(2px * var(--ui)); }
.hl-u-txt small { font: 700 calc(9.5px * var(--ui)) var(--font); letter-spacing: .14em; text-transform: uppercase; color: var(--amber); }
.hl-u-txt b { font: var(--display-w) calc(calc(17px * var(--ui)) * var(--display-scale)) / 1.05 var(--display); letter-spacing: var(--display-ls); }
.hl-u-n { position: absolute; z-index: 3; top: calc(8px * var(--ui)); left: calc(8px * var(--ui)); padding: calc(2px * var(--ui)) calc(7px * var(--ui)); border-radius: calc(999px * var(--ui)); background: rgba(0, 0, 0, .6); color: rgba(255, 255, 255, .78); font: 600 calc(10px * var(--ui)) var(--font); font-variant-numeric: tabular-nums; opacity: 0; transform: translateY(calc(-4px * var(--ui))); transition: opacity .2s, transform .2s; }
.hl-u-ok { position: absolute; z-index: 3; top: calc(8px * var(--ui)); right: calc(8px * var(--ui)); display: grid; place-items: center; width: calc(24px * var(--ui)); height: calc(24px * var(--ui)); 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: calc(13px * var(--ui)); height: calc(13px * var(--ui)); }
.hl-u:hover { box-shadow: 0 0 0 1px var(--line-2), 0 calc(22px * var(--ui)) calc(34px * var(--ui)) calc(-18px * var(--ui)) 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 calc(2px * var(--ui)) var(--accent), 0 calc(22px * var(--ui)) calc(40px * var(--ui)) calc(-16px * var(--ui)) 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) calc(92px * var(--ui)) / 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 calc(10px * var(--ui)), rgba(255, 255, 255, .025) calc(10px * var(--ui)) calc(11px * var(--ui))), #14110e; text-shadow: 0 calc(10px * var(--ui)) calc(30px * var(--ui)) 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: calc(22px * var(--ui)); min-height: calc(50px * var(--ui)); padding: 0 calc(34px * var(--ui)); gap: calc(10px * var(--ui)); font-size: calc(15px * var(--ui)); }
.hl-go .i { width: calc(16px * var(--ui)); height: calc(16px * var(--ui)); }
.hl-go.go { opacity: .7; pointer-events: none; }

/* dernières séries */
.hl-past { margin-top: calc(26px * var(--ui)); padding-top: calc(18px * var(--ui)); border-top: 1px solid var(--line); }
.hl-past-head { display: flex; align-items: baseline; gap: calc(12px * var(--ui)); margin-bottom: calc(12px * var(--ui)); }
.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(calc(250px * var(--ui)), 1fr)); gap: calc(10px * var(--ui)); }
.hl-pc { display: grid; grid-template-columns: calc(46px * var(--ui)) minmax(0, 1fr) auto; align-items: center; gap: calc(12px * var(--ui)); width: 100%; padding: calc(8px * var(--ui)) calc(12px * var(--ui)) calc(8px * var(--ui)) calc(8px * var(--ui)); border: 1px solid var(--line); border-radius: calc(11px * var(--ui)); 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(calc(-2px * var(--ui))); background: var(--surface-2); }
.hl-pc-img { width: calc(46px * var(--ui)); height: calc(58px * var(--ui)); border-radius: calc(7px * var(--ui)); 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: calc(30px * var(--ui)); }
.hl-pc-txt { display: grid; gap: 1px; min-width: 0; }
.hl-pc-txt b { font-size: calc(14px * var(--ui)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hl-pc-txt small { color: var(--faint); font-size: calc(11.5px * var(--ui)); 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: calc(3px * var(--ui)); }
.hl-pc-score b { font: var(--display-w) calc(calc(26px * var(--ui)) * var(--display-scale)) / 1 var(--display); font-variant-numeric: tabular-nums; }
.hl-pc-score i { padding: 1px calc(7px * var(--ui)); border-radius: calc(999px * var(--ui)); background: color-mix(in srgb, var(--green) 15%, transparent); color: var(--green); font: 700 calc(10.5px * var(--ui)) var(--font); font-style: normal; white-space: nowrap; }
.hl-pc.won .hl-pc-score b { color: var(--green); }
.modal.hl-detail-modal { width: min(calc(880px * var(--ui)), 96vw); }
.hl-detail { padding: calc(22px * var(--ui)) calc(24px * var(--ui)); }
.hl-detail-head { display: flex; align-items: center; gap: calc(16px * var(--ui)); margin-right: calc(40px * var(--ui)); }
.hl-detail-head img { width: calc(54px * var(--ui)); height: calc(72px * var(--ui)); border-radius: calc(8px * var(--ui)); object-fit: cover; }
.hl-detail-head h3 { margin: calc(2px * var(--ui)) 0 calc(2px * var(--ui)); font: var(--display-w) calc(calc(26px * var(--ui)) * var(--display-scale)) / 1.05 var(--display); letter-spacing: var(--display-ls); }
.hl-detail-head p { margin: 0; font-size: calc(13px * var(--ui)); }
.hl-detail .hl-recap { max-height: min(60vh, calc(520px * var(--ui))); overflow-y: auto; }

/* une manche : question, compteur, duel */
.hl-head { text-align: center; }
.hl-head .qz-kicker { margin: 0; }
.hl-head h2 { margin: calc(2px * var(--ui)) 0 0; font: var(--display-w) calc(clamp(calc(22px * var(--ui)), 2.4vw, calc(30px * var(--ui))) * 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, calc(270px * var(--ui))) calc(96px * var(--ui)) minmax(0, calc(270px * var(--ui))); justify-content: center; align-items: stretch; margin: calc(18px * var(--ui)) auto 0; }
.hl-card { display: grid; grid-template-rows: auto 1fr; border: 1px solid var(--line); border-radius: calc(16px * var(--ui)); overflow: hidden; background: var(--surface); transition: border-color .3s, background .3s, box-shadow .4s; }
.hl-img { position: relative; height: clamp(calc(170px * var(--ui)), calc(100vh - var(--top-h, calc(64px * var(--ui))) - calc(480px * var(--ui))), calc(280px * var(--ui))); 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: calc(14px * var(--ui)); right: calc(14px * var(--ui)); bottom: calc(11px * var(--ui)); display: grid; gap: calc(2px * var(--ui)); color: #fff; }
.hl-who b { font: var(--display-w) calc(calc(21px * var(--ui)) * var(--display-scale)) / 1.08 var(--display); letter-spacing: var(--display-ls); text-shadow: 0 calc(2px * var(--ui)) calc(10px * var(--ui)) rgba(0, 0, 0, .6); }
.hl-who small { color: rgba(255, 255, 255, .72); font-size: calc(12px * var(--ui)); line-height: 1.3; }
.hl-who .hl-from { color: var(--amber); font-size: calc(11px * var(--ui)); }
.hl-val { display: grid; align-content: start; gap: calc(10px * var(--ui)); padding: calc(12px * var(--ui)) calc(14px * var(--ui)) calc(14px * var(--ui)); min-height: calc(104px * var(--ui)); }
.hl-v { min-height: 1.15em; font: var(--display-w) calc(clamp(calc(20px * var(--ui)), 2.1vw, calc(27px * var(--ui))) * 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(calc(10px * var(--ui))) 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 calc(18px * var(--ui)) calc(40px * var(--ui)) calc(-20px * var(--ui)) 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 calc(18px * var(--ui)) calc(40px * var(--ui)) calc(-20px * var(--ui)) var(--red); }
.hl-card.ko .hl-v { color: var(--red); }
.hl-btns { display: grid; gap: calc(8px * var(--ui)); }
.hl-btns.gone { display: none; }
.hl-btns .btn { justify-content: flex-start; gap: calc(10px * var(--ui)); height: calc(42px * var(--ui)); transition: border-color .15s, background .15s, transform .15s; }
.hl-btns .btn:hover { transform: translateX(calc(3px * var(--ui))); }
.hl-btns kbd { margin-left: auto; padding: 1px calc(6px * var(--ui)); border: 1px solid var(--line-2); border-radius: calc(5px * var(--ui)); font: 600 calc(10.5px * var(--ui)) var(--font); color: var(--faint); }
.hl-arrow { font-size: calc(11px * var(--ui)); }
.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: calc(2px * var(--ui)); }
.hl-stats li { display: grid; grid-template-columns: calc(74px * var(--ui)) minmax(0, 1fr) calc(26px * var(--ui)); align-items: center; gap: calc(6px * var(--ui)); font-size: calc(10.5px * var(--ui)); color: var(--muted); }
.hl-stats i { height: calc(4px * var(--ui)); border-radius: calc(2px * var(--ui)); 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: calc(64px * var(--ui)); height: calc(64px * var(--ui)); }
.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(calc(20px * var(--ui)) * var(--display-scale)) / 1 var(--display); font-variant-numeric: tabular-nums; }
.hl-ring b .i { width: calc(24px * var(--ui)); height: calc(24px * var(--ui)); }
.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: calc(14px * var(--ui)); }

/* 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(calc(-40px * var(--ui))) rotate(-3deg); } }
@keyframes hlFlip { from { opacity: 0; transform: perspective(calc(900px * var(--ui))) rotateY(-75deg) translateX(calc(30px * var(--ui))); } }
@keyframes hlRingIn { from { opacity: 0; transform: scale(.3) rotate(-90deg); } }
.hl-duel.slide .hl-a { opacity: 0; transform: translateX(calc(-60px * var(--ui))) rotate(-4deg); transition: opacity .35s, transform .42s; }
.hl-duel.slide .hl-b { transform: translateX(calc(-100% - calc(96px * var(--ui)))); 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(calc(-8px * var(--ui))) rotate(-1deg); } 35%, 75% { transform: translateX(calc(8px * var(--ui))) rotate(1deg); } }

/* fin de série */
.hl-end-box { max-width: calc(900px * var(--ui)); margin: 0 auto; }
.hl-end-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: calc(22px * var(--ui)); }
.hl-end-score { display: grid; justify-items: center; min-width: calc(96px * var(--ui)); padding: calc(12px * var(--ui)) calc(16px * var(--ui)); border: 1px solid var(--line); border-radius: calc(16px * var(--ui)); background: var(--surface); }
.hl-end-score b { font: var(--display-w) calc(calc(48px * var(--ui)) * var(--display-scale)) / 1 var(--display); font-variant-numeric: tabular-nums; }
.hl-end-score span { font: 700 calc(9.5px * var(--ui)) var(--font); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); text-align: center; }
.hl-end-t h2 { margin: calc(2px * var(--ui)) 0 calc(4px * var(--ui)); font: var(--display-w) calc(clamp(calc(28px * var(--ui)), 3.2vw, calc(40px * var(--ui))) * var(--display-scale)) / 1.05 var(--display); letter-spacing: var(--display-ls); }
.hl-end-t p { margin: 0; font-size: calc(13.5px * var(--ui)); }
.hl-end-head .hl-gain { flex-direction: column; align-items: center; margin: 0; padding: calc(12px * var(--ui)) calc(18px * var(--ui)); border-radius: calc(16px * var(--ui)); }
.hl-end-head .hl-gain b { font-size: calc(calc(34px * var(--ui)) * 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, calc(420px * var(--ui))); overflow-y: auto; margin-top: calc(18px * var(--ui)); padding-right: calc(4px * var(--ui)); }
.hl-end .wt-acts { justify-content: center; margin-top: calc(18px * var(--ui)); }

/* récapitulatif : personnage A | réponse au milieu | personnage B */
.hl-recap { list-style: none; margin: calc(16px * var(--ui)) 0 0; padding: 0; display: grid; gap: calc(6px * var(--ui)); }
.hl-recap li { position: relative; display: grid; grid-template-columns: calc(22px * var(--ui)) minmax(0, 1fr) calc(150px * var(--ui)) minmax(0, 1fr); align-items: center; gap: calc(12px * var(--ui)); padding: calc(8px * var(--ui)) calc(12px * var(--ui)); border-radius: calc(10px * var(--ui)); background: var(--surface); font-size: calc(13px * var(--ui));
  border-left: calc(3px * var(--ui)) 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(calc(10px * var(--ui))); } }
.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 calc(11px * var(--ui)) var(--font); font-variant-numeric: tabular-nums; }
.hl-rc { display: grid; grid-template-columns: calc(36px * var(--ui)) minmax(0, 1fr); column-gap: calc(10px * var(--ui)); align-items: center; min-width: 0; }
.hl-rc img { width: calc(36px * var(--ui)); height: calc(44px * var(--ui)); border-radius: calc(6px * var(--ui)); 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: calc(11px * var(--ui)); color: var(--faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hl-rc em { font-style: normal; font-size: calc(12px * var(--ui)); 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: calc(3px * var(--ui)); text-align: center; }
.hl-rc-mid small { color: var(--faint); font-size: calc(10px * var(--ui)); letter-spacing: .1em; text-transform: uppercase; }
.hl-pick { display: inline-flex; align-items: center; gap: calc(6px * var(--ui)); padding: calc(3px * var(--ui)) calc(11px * var(--ui)); border-radius: calc(999px * var(--ui)); font: 700 calc(12px * var(--ui)) 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) calc(70px * var(--ui)) minmax(0, 1fr); }
  .hl-img { height: calc(170px * var(--ui)); }
  .hl-duel.slide .hl-b { transform: translateX(calc(-100% - calc(70px * var(--ui)))); }
  .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: calc(8px * var(--ui)); }
  .hl-recap li { grid-template-columns: minmax(0, 1fr) calc(96px * var(--ui)) 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: calc(14px * var(--ui)); margin: calc(14px * var(--ui)) auto 0; width: fit-content; max-width: 100%; }
.hl-cnt { display: flex; align-items: baseline; gap: calc(6px * var(--ui)); font: 700 calc(10.5px * var(--ui)) var(--font); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.hl-cnt b { font: var(--display-w) calc(calc(24px * var(--ui)) * 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: calc(6px * var(--ui)); padding: calc(6px * var(--ui)) calc(10px * var(--ui)); border: 1px solid var(--line); border-radius: calc(999px * var(--ui)); background: var(--surface); min-height: calc(34px * var(--ui)); }
.hl-dots i { display: grid; place-items: center; width: calc(20px * var(--ui)); height: calc(20px * var(--ui)); border-radius: 50%; font: 700 calc(11px * var(--ui))/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: calc(2px * var(--ui)) 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 calc(4px * var(--ui)) 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: calc(20px * var(--ui)); padding: 0;
  --h: clamp(calc(56px * var(--ui)), calc((100vh - var(--top-h, calc(64px * var(--ui))) - calc(360px * var(--ui))) / var(--n) - calc(8px * var(--ui))), calc(96px * var(--ui))); }
.hl-recap.big li { min-height: var(--h); grid-template-columns: calc(26px * var(--ui)) minmax(0, 1fr) calc(170px * var(--ui)) minmax(0, 1fr); padding: calc(8px * var(--ui)) calc(16px * var(--ui)); font-size: calc(15px * var(--ui)); }
.hl-recap.big .hl-rc { grid-template-columns: calc(var(--h) * .62) minmax(0, 1fr); column-gap: calc(14px * var(--ui)); }
.hl-recap.big .hl-rc img { width: calc(var(--h) * .62); height: calc(var(--h) - calc(16px * var(--ui))); border-radius: calc(8px * var(--ui)); }
.hl-recap.big .hl-rc b { font: var(--display-w) calc(calc(17px * var(--ui)) * var(--display-scale)) / 1.15 var(--display); }
.hl-recap.big .hl-rc i { font-size: calc(12.5px * var(--ui)); }
.hl-recap.big .hl-rc em { font: var(--display-w) calc(calc(18px * var(--ui)) * var(--display-scale)) / 1.2 var(--display); }
.hl-recap.big .hl-pick { padding: calc(5px * var(--ui)) calc(14px * var(--ui)); font-size: calc(13.5px * var(--ui)); }
.hl-recap.big .hl-rc-n { font-size: calc(13px * var(--ui)); }
.hl-recap.big.two { grid-template-columns: 1fr 1fr; grid-auto-flow: column; grid-template-rows: repeat(var(--n), auto); gap: calc(8px * var(--ui)) calc(10px * var(--ui)); }
.hl-recap.big.two li { grid-template-columns: calc(20px * var(--ui)) minmax(0, 1fr) calc(104px * var(--ui)) minmax(0, 1fr); gap: calc(8px * var(--ui)); padding: calc(6px * var(--ui)) calc(10px * var(--ui)); font-size: calc(13px * var(--ui)); }
.hl-recap.big.two .hl-rc b { font-size: calc(calc(14px * var(--ui)) * var(--display-scale)); }
.hl-recap.big.two .hl-rc em { font-size: calc(calc(14px * var(--ui)) * 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: calc(3px * var(--ui)) calc(9px * var(--ui)); font-size: calc(11.5px * var(--ui)); }
@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: calc(8px * var(--ui)); } .hl-dots { gap: calc(4px * var(--ui)); padding: calc(5px * var(--ui)) calc(7px * var(--ui)); } .hl-dots i { width: calc(16px * var(--ui)); height: calc(16px * var(--ui)); font-size: calc(9px * var(--ui)); }
  .hl-recap.big li, .hl-recap.big.two li { grid-template-columns: minmax(0, 1fr) calc(96px * var(--ui)) minmax(0, 1fr); }
}
.hl-end-box:has(.hl-recap.two) { max-width: calc(1160px * var(--ui)); }
.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: calc(14px * var(--ui)); margin: calc(-6px * var(--ui)) 0 calc(20px * var(--ui)); padding: calc(12px * var(--ui)) calc(16px * var(--ui)); border: 1px solid color-mix(in srgb, var(--amber) 35%, var(--line)); border-radius: calc(12px * var(--ui)); background: color-mix(in srgb, var(--amber) 7%, var(--surface)); text-align: left; animation: wtIn .45s both; }
.hl-lock > .i { width: calc(22px * var(--ui)); height: calc(22px * var(--ui)); color: var(--amber); }
.hl-lock > div { display: grid; gap: calc(2px * var(--ui)); }
.hl-lock b { font: var(--display-w) calc(calc(17px * var(--ui)) * var(--display-scale)) / 1.1 var(--display); }
.hl-lock small { color: var(--muted); font-size: calc(12.5px * var(--ui)); }
.hl-lock .btn { margin-left: calc(8px * var(--ui)); gap: calc(6px * var(--ui)); }
.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: calc(8px * var(--ui)); padding: calc(7px * var(--ui)) calc(12px * var(--ui)); min-height: 0; }
.hl-dots i { width: calc(16px * var(--ui)); height: calc(16px * var(--ui)); 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 calc(10px * var(--ui)) color-mix(in srgb, var(--green) 55%, transparent); }
.hl-dots i.ko { background: var(--red); box-shadow: 0 0 calc(10px * var(--ui)) color-mix(in srgb, var(--red) 55%, transparent); }
.hl-dots i.now { background: var(--surface-3); box-shadow: inset 0 0 0 calc(2px * var(--ui)) 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 calc(18px * var(--ui)) 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 calc(18px * var(--ui)) 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(calc(24px * var(--ui)), 2.6vw, calc(32px * var(--ui))) * 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: calc(8px * var(--ui)); margin-top: calc(16px * var(--ui)); 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: calc(12px * var(--ui)); margin: 0; font-size: calc(15px * var(--ui)); }
.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(calc(24px * var(--ui)) * var(--display-scale)) / 1 var(--display); font-style: normal; color: var(--muted); }
.hl-miss .btn { gap: calc(8px * var(--ui)); margin-top: calc(4px * var(--ui)); }
.hl-miss .btn .i { width: calc(16px * var(--ui)); height: calc(16px * var(--ui)); }

/* Plus ou moins : toute la série (20 pastilles) par groupes de 5, un groupe complet = 1 spin */
.hl-dots { gap: calc(10px * var(--ui)); padding: calc(6px * var(--ui)) calc(8px * var(--ui)); }
.hl-grp { display: flex; gap: calc(5px * var(--ui)); padding: calc(3px * var(--ui)); border-radius: calc(999px * var(--ui)); 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: calc(13px * var(--ui)); height: calc(13px * var(--ui)); }
@media (max-width: 560px) { .hl-dots { gap: calc(5px * var(--ui)); padding: calc(5px * var(--ui)) calc(6px * var(--ui)); } .hl-grp { gap: calc(3px * var(--ui)); padding: calc(2px * var(--ui)); } .hl-dots i { width: calc(9px * var(--ui)); height: calc(9px * var(--ui)); } }
/* 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(calc(130px * var(--ui)), calc(100vh - var(--top-h, calc(64px * var(--ui))) - calc(590px * var(--ui))), calc(230px * var(--ui))); }
.hl-duel:has(.hl-stats) .hl-val { gap: calc(6px * var(--ui)); padding-top: calc(10px * var(--ui)); }
.hl-duel:has(.hl-stats) + .hl-miss { margin-top: calc(10px * var(--ui)); }

/* 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: calc(1180px * var(--ui)); }
.hl-chain { list-style: none; margin: calc(20px * var(--ui)) 0 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: calc(8px * var(--ui)) calc(7px * var(--ui)); }
.hl-ch-t { display: grid; grid-template-columns: calc(46px * var(--ui)) minmax(0, 1fr); align-items: center; gap: calc(10px * var(--ui)); width: calc(196px * var(--ui)); height: calc(60px * var(--ui)); padding: calc(6px * var(--ui)) calc(10px * var(--ui)) calc(6px * var(--ui)) calc(6px * var(--ui)); border: 1px solid var(--line); border-radius: calc(11px * var(--ui)); 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: calc(46px * var(--ui)); height: calc(48px * var(--ui)); border-radius: calc(7px * var(--ui)); object-fit: cover; object-position: 50% 20%; }
.hl-ch-t > span { display: grid; min-width: 0; }
.hl-ch-t b { font-size: calc(14px * var(--ui)); font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hl-ch-t i { font-style: normal; font-size: calc(10.5px * var(--ui)); color: var(--faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hl-ch-t em { font-style: normal; font-size: calc(13.5px * var(--ui)); 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 calc(10px * var(--ui)) calc(24px * var(--ui)) calc(-14px * var(--ui)) 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: calc(24px * var(--ui)); height: calc(24px * var(--ui)); border-radius: 50%; font-size: calc(10px * var(--ui)); 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 calc(10px * var(--ui)) var(--font); letter-spacing: .14em; text-transform: uppercase; color: var(--faint); }
@keyframes hlChIn { from { opacity: 0; transform: translateY(calc(10px * var(--ui))) scale(.92); } }
.hl-detail .hl-chain { max-height: min(62vh, calc(560px * var(--ui))); 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: calc(10px * var(--ui)) calc(8px * var(--ui)); }
.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: calc(54px * var(--ui)) minmax(0, 1fr); width: calc(190px * var(--ui)); height: calc(64px * var(--ui)); }
.hl-chain.sz-s .hl-ch-t img { width: calc(54px * var(--ui)); height: calc(64px * var(--ui)); }
.hl-chain.sz-s .hl-ch-t > span { padding: 0 calc(10px * var(--ui)) 0 calc(11px * var(--ui)); }
/* 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: calc(122px * var(--ui)); }
.hl-chain.sz-m .hl-ch-t img { width: 100%; height: calc(96px * var(--ui)); }
.hl-chain.sz-l .hl-ch-t { width: calc(150px * var(--ui)); }
.hl-chain.sz-l .hl-ch-t img { width: 100%; height: calc(176px * var(--ui)); }
.hl-chain.sz-m .hl-ch-t > span, .hl-chain.sz-l .hl-ch-t > span { padding: calc(8px * var(--ui)) calc(10px * var(--ui)) calc(10px * var(--ui)); }
.hl-chain.sz-l .hl-ch-t b { font-size: calc(15px * var(--ui)); }
.hl-chain.sz-l .hl-ch-t em { font-size: calc(15px * var(--ui)); }
.hl-chain.sz-m .hl-ch-l, .hl-chain.sz-l .hl-ch-l { width: calc(28px * var(--ui)); height: calc(28px * var(--ui)); font-size: calc(11px * var(--ui)); }
/* l'erreur : bordure rouge à l'intérieur (plus de débordement de la photo) */
.hl-ch-t.ko { box-shadow: inset 0 0 0 calc(2px * var(--ui)) var(--red), 0 calc(12px * var(--ui)) calc(26px * var(--ui)) calc(-14px * var(--ui)) 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% - calc(22px * var(--ui))); }
  .hl-chain.sz-m .hl-ch-t, .hl-chain.sz-l .hl-ch-t { width: calc(33% - calc(24px * var(--ui))); }
  .hl-chain.sz-m .hl-ch-t img, .hl-chain.sz-l .hl-ch-t img { height: calc(110px * var(--ui)); }
}
.hl-chain.sz-l, .hl-chain.sz-m { gap: calc(8px * var(--ui)) calc(6px * var(--ui)); }
.hl-chain.sz-s { gap: calc(8px * var(--ui)) calc(5px * var(--ui)); }
.hl-chain.sz-s .hl-ch-l { width: calc(22px * var(--ui)); height: calc(22px * var(--ui)); }
.hl-chain.sz-s .hl-ch-t b { font-size: calc(13.5px * var(--ui)); }
.hl-chain.sz-s .hl-ch-t em { font-size: calc(13px * var(--ui)); }

/* --- 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(calc(300px * var(--ui)), calc(380px * var(--ui))); gap: clamp(calc(28px * var(--ui)), 5vw, calc(80px * var(--ui))); align-items: center; min-height: calc(100vh - var(--top-h) - calc(80px * var(--ui))); }
.wp3 .wheel { width: min(100%, calc((100vh - var(--top-h) - calc(110px * var(--ui))) * .9), calc(640px * var(--ui))); margin: 2% auto 7%; }
/* roue en relief (wheel3dHtml) : plateau incliné dans une scène en perspective. Le disque SVG tourne seul ;
   la tranche (14 calques empilés), la lumière, le moyeu et l'aiguille sont fixes, donc rien n'est repeint pendant un tour */
.w3d { --tilt: 0deg; container-type: inline-size; }
/* le disque est un carré tourné : ses coins (transparents) ne doivent pas élargir la page */
.wheel-stage:has(.w3d) { overflow-x: clip; }
.w3d-scene { position: absolute; inset: 0; perspective: 210cqw; perspective-origin: 50% 50%; }
.w3d-floor { position: absolute; left: 6%; right: 6%; bottom: -9%; height: 28%; border-radius: 50%; pointer-events: none; background: radial-gradient(closest-side, rgba(0, 0, 0, .72), rgba(0, 0, 0, .32) 58%, rgba(0, 0, 0, 0)); }
.w3d-tilt { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateX(calc(var(--tilt) + var(--px, 0deg))) rotateY(var(--py, 0deg)); }
.w3d-tilt > * { position: absolute; }
/* tranche : bois sombre, éclairée par la gauche */
.w3d-edge { inset: 0; border-radius: 50%; transform: translateZ(calc(var(--k) * -.5cqw)); background: linear-gradient(100deg, #6a5d4b, #3a3229 34%, #1b1814 68%, #2a241d); }
.w3d-edge:first-child { background: linear-gradient(100deg, #a08c70, #5c5040 34%, #2a251e 68%, #3e362c); }
.w3d-edge:nth-child(n+12) { background: linear-gradient(100deg, #3a3229, #1f1b16 34%, #0e0d0b 68%, #17140f); }
.w3d-edge:nth-child(14) { box-shadow: 0 1.5cqw 4cqw rgba(0, 0, 0, .55); }
.w3d-disc { inset: 0; border-radius: 50%; }
/* badges : pièces de métal en relief (4 calques de tranche, une face sertie), elles tournent avec le disque */
.w3d-coins { inset: 0; transform-style: preserve-3d; pointer-events: none; }
/* une pile par case : droite pour le joueur (rotate inverse de la roue), ombre fixe sur le disque ; au-dessus, le bloc qui
   oscille d'une pièce, posé assez haut (1,3cqw) pour que son bord ne plonge jamais dans le disque */
.w3d-stack { position: absolute; width: var(--g); aspect-ratio: 1; translate: -50% -50%; rotate: calc(var(--wa, 0) * -1deg); transform-style: preserve-3d; }
.w3d-shade { position: absolute; width: var(--d); aspect-ratio: 1; translate: -50% -50% .15cqw; border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 0, 0, .7), rgba(0, 0, 0, .35) 70%, rgba(0, 0, 0, 0)); scale: 1.12; }
.w3d-sway { position: absolute; inset: 0; translate: 0 0 1.3cqw; transform-style: preserve-3d; animation: w3dCoin 5.2s ease-in-out calc(var(--i) * -1.7s) infinite; }
@keyframes w3dCoin { 0%, 100% { transform: rotateX(4deg) rotateY(-5deg); } 33% { transform: rotateX(-3.5deg) rotateY(3.5deg); } 66% { transform: rotateX(2.5deg) rotateY(5deg); } }
.w3d-coin { position: absolute; width: var(--d); aspect-ratio: 1; translate: -50% -50% var(--lift, 0px); transform-style: preserve-3d; }
.w3d-coin > i, .w3d-coin > b { position: absolute; inset: 0; border-radius: 50%; }
.w3d-coin > i { background: var(--m1); }
.w3d-coin > i:nth-child(1) { transform: translateZ(.1cqw); box-shadow: 0 0 .8cqw rgba(0, 0, 0, .6); }
.w3d-coin > i:nth-child(2) { transform: translateZ(.45cqw); background: color-mix(in srgb, var(--m2) 55%, var(--m1)); }
.w3d-coin > i:nth-child(3) { transform: translateZ(.8cqw); background: color-mix(in srgb, var(--m2) 75%, var(--m1)); }
.w3d-coin > i:nth-child(4) { transform: translateZ(1.1cqw); background: var(--m2); }
.w3d-coin > b { display: block; padding: 4%; transform: translateZ(1.3cqw); }
.w3d-coin > b::after { content: ""; position: absolute; inset: 0; border-radius: 50%; pointer-events: none; background: radial-gradient(circle at 32% 24%, rgba(255, 255, 255, .32), rgba(255, 255, 255, .06) 30%, transparent 55%); mix-blend-mode: soft-light; }
.w3d-coin > b img { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 .08cqw rgba(0, 0, 0, .6); }
.w3d-svg { width: 100%; height: 100%; display: block; overflow: visible; filter: none; }
/* lumière fixe : reflet en haut à gauche, bord assombri, liseré de la couronne plus clair côté lumière */
.w3d-light { inset: 0; border-radius: 50%; pointer-events: none; transform: translateZ(.05cqw);
  background: radial-gradient(115% 80% at 28% 6%, rgba(255, 238, 214, .1), rgba(255, 238, 214, 0) 48%), radial-gradient(closest-side, rgba(0, 0, 0, 0) 78%, rgba(0, 0, 0, .3)), linear-gradient(172deg, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, .2)); }
.w3d-light::after { content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from -75deg, rgba(255, 240, 220, .4), rgba(255, 240, 220, 0) 22%, rgba(255, 240, 220, 0) 60%, rgba(255, 240, 220, .1) 78%, rgba(255, 240, 220, .4));
  -webkit-mask: radial-gradient(closest-side, transparent calc(100% - .5cqw), #000 calc(100% - .42cqw)); mask: radial-gradient(closest-side, transparent calc(100% - .5cqw), #000 calc(100% - .42cqw)); }
/* moyeu : un bouton rond en relief (trois calques de tranche, une face) */
.w3d-hub { left: 50%; top: 50%; width: 17cqw; height: 17cqw; margin: -8.5cqw 0 0 -8.5cqw; padding: 0; border: 0; border-radius: 50%; background: none; transform-style: preserve-3d; cursor: pointer; }
.w3d-hub > i, .w3d-cap { position: absolute; inset: 0; border-radius: 50%; }
.w3d-hub > i { background: linear-gradient(100deg, #d9502d, #9c3419 45%, #5e1f0e); }
.w3d-hub > i:nth-child(1) { transform: translateZ(.8cqw); box-shadow: 0 .6cqw 2.4cqw rgba(0, 0, 0, .7); }
.w3d-hub > i:nth-child(2) { transform: translateZ(1.6cqw); }
.w3d-hub > i:nth-child(3) { transform: translateZ(2.4cqw); }
.w3d-cap { display: grid; place-items: center; transform: translateZ(3cqw); background: radial-gradient(110% 110% at 30% 18%, #ff7652, var(--accent) 48%, #ee522d); color: var(--accent-ink); font: 700 9.4cqw/1 var(--jp); box-shadow: inset 0 .25cqw .3cqw rgba(255, 255, 255, .22), inset 0 -.4cqw .8cqw rgba(0, 0, 0, .2); transition: transform .12s, filter .15s; }
.w3d-hub:hover .w3d-cap { filter: brightness(1.07); }
.w3d-cap b { transform: rotate(-4deg); }
.w3d-hub:active .w3d-cap { transform: translateZ(2.6cqw); }
.w3d-hub:focus-visible { outline: none; }
.w3d-hub:focus-visible .w3d-cap { outline: calc(2px * var(--ui)) solid var(--text); outline-offset: calc(3px * var(--ui)); }
.w3d.spinning .w3d-hub { cursor: default; }
/* aiguille : battant vermillon debout au-dessus de la couronne, pivot sombre ; elle tourne autour de son axe */
.w3d-pin { left: 50%; top: -7.7cqw; width: 7.6cqw; height: 12.2cqw; margin-left: -3.8cqw; transform-origin: 50% 100%; transform: translateZ(2.6cqw) rotateX(calc(var(--tilt) * -.85)); pointer-events: none; }
.w3d-needle { position: absolute; inset: 0; transform-origin: 50% 23.4%; filter: drop-shadow(0 .8cqw .6cqw rgba(0, 0, 0, .55)); }
.w3d-needle svg { display: block; width: 100%; height: 100%; overflow: visible; }
.w3d-needle .n-body { fill: var(--accent); }
.w3d-needle .n-shade { fill: rgba(0, 0, 0, .2); }
.w3d-needle .n-axle { fill: #1a1814; stroke: rgba(255, 240, 220, .35); stroke-width: 1.2; }
/* face du disque */
.w3d-band { fill: none; stroke: #0b0a09; stroke-width: 14; }
.w3d-ticks line { stroke: #3d372e; stroke-width: .55; }
.w3d-pegs circle { fill: url(#wg-peg); stroke: #050504; stroke-width: .6; }
.w3d-rim-in { fill: none; stroke: #4a4337; stroke-width: .7; }
.w3d-rim-out { fill: none; stroke: rgba(255, 240, 220, .1); stroke-width: .6; }
.w3d-well { fill: #0a0908; stroke: #2b2721; stroke-width: .8; }
.w3d-svg .wheel-seps line { stroke: #3e382f; stroke-width: .7; }
.w3d-svg .ws path { stroke: none; }
.w3d-svg .ws-glow { fill: var(--accent); opacity: 0; transition: opacity .4s; }
.w3d-svg .ws.hit .ws-glow { opacity: .14; animation: w3dHit 1.1s ease-in-out 2; }
@keyframes w3dHit { 50% { opacity: .3; } }
.w3d-svg .ws > g > image { filter: drop-shadow(0 0 calc(1.4px * var(--ui)) rgba(0, 0, 0, .85)); }
.w3d-svg .ws > g > image.ws-back { filter: brightness(.8) drop-shadow(0 0 calc(1.4px * var(--ui)) rgba(0, 0, 0, .85)); }
.w3d-svg .ws-coin-rim { fill: #2a261f; stroke: #5b5244; stroke-width: .6; }
.w3d-svg .ws-coin-lip { fill: none; stroke: rgba(0, 0, 0, .45); stroke-width: .8; }
.w3d-svg .ws-label { font: 600 calc(5.2px * var(--ui)) var(--font); letter-spacing: .16em; fill: var(--muted); }
.w3d-svg .ws-badge2 .ws-label, .w3d-svg .ws-chibi2 .ws-label { fill: var(--text); }
.w3d-svg .ws-miss .ws-label { fill: var(--faint); }
.w3d-svg .ws.hit .ws-label { fill: var(--accent); }
.w3d-svg .ws-x { stroke: var(--faint); stroke-width: 1.6; stroke-linecap: round; fill: none; }
@media (prefers-reduced-motion: reduce) { .w3d-sway, .w3d-svg .ws.hit .ws-glow { animation: 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: calc(10px * var(--ui)); }
.w3-title { margin: 0 0 calc(26px * var(--ui)); font: var(--display-w) calc(clamp(calc(34px * var(--ui)), 3.6vw, calc(48px * var(--ui))) * var(--display-scale)) / 1 var(--display); letter-spacing: var(--display-ls); display: flex; align-items: baseline; }
.w3-title .jp { font-size: calc(13px * var(--ui)); margin-left: calc(12px * var(--ui)); }
.w3-spin { display: flex; flex-direction: column; gap: calc(14px * var(--ui)); padding: 0 0 calc(26px * var(--ui)); border-bottom: 1px solid var(--line); }
.w3-count { display: flex; align-items: baseline; gap: calc(10px * var(--ui)); }
.wp3 .spin-n { font: var(--display-w) calc(calc(64px * var(--ui)) * 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: calc(14px * var(--ui)); }
.wp3 .spin-btn { height: calc(52px * var(--ui)); font-size: calc(16px * var(--ui)); }
.wp3 .spin-result:empty { display: none; }
.wp3 .won-head { margin: calc(4px * var(--ui)) 0 calc(10px * var(--ui)); }
.w3-odds { padding-top: calc(22px * var(--ui)); }
.w3-odds ul { list-style: none; margin: calc(8px * var(--ui)) 0 calc(22px * var(--ui)); padding: 0; }
.w3-odds ul:last-child { margin-bottom: 0; }
.w3-odd { display: grid; grid-template-columns: calc(8px * var(--ui)) calc(128px * var(--ui)) 1fr calc(64px * var(--ui)); align-items: center; gap: calc(12px * var(--ui)); padding: calc(7px * var(--ui)) 0; border-top: 1px solid var(--line); font-size: calc(13.5px * var(--ui)); color: var(--muted); }
.w3-odd:last-child { border-bottom: 1px solid var(--line); }
.w3-odd i { width: calc(8px * var(--ui)); height: calc(8px * var(--ui)); border-radius: calc(2px * var(--ui)); 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: calc(2px * var(--ui)); 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: calc(5px * var(--ui)); border-radius: calc(3px * var(--ui)); background: rgba(242, 196, 106, .2); }
.w3-odd.odd-tier.r-signe em::after { min-width: calc(16px * var(--ui)); border-radius: calc(3px * var(--ui)); background: #f2c46a; box-shadow: 0 0 calc(9px * var(--ui)) rgba(242, 196, 106, .8); }
@media (min-width: 901px) {
  body[data-page="roue"] { height: 100vh; overflow-y: hidden; }
  body[data-page="roue"] .wheel-page { height: 100vh; padding-top: calc(var(--top-h) + calc(18px * var(--ui))); padding-bottom: calc(18px * var(--ui)); }
  .wp3 .wp-main { height: calc(100vh - var(--top-h) - calc(36px * var(--ui))); min-height: 0; grid-template-columns: minmax(0, 1fr) minmax(calc(410px * var(--ui)), calc(480px * var(--ui))); }
  .wp3 .wheel { width: min(100%, calc((100vh - var(--top-h) - calc(52px * var(--ui))) * .86), calc(640px * var(--ui))); }
  .wp3 .back-games { margin-bottom: calc(4px * var(--ui)); }
  .w3-title { margin-bottom: calc(14px * var(--ui)); }
  .w3-spin { gap: calc(8px * var(--ui)); padding-bottom: calc(14px * var(--ui)); }
  .wp3 .spin-n { font-size: calc(calc(54px * var(--ui)) * var(--display-scale)); }
  .wp3 .spin-btn { height: calc(46px * var(--ui)); }
  .w3-odds { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 calc(24px * var(--ui)); padding-top: calc(14px * var(--ui)); }
  .w3-odds > .qz-kicker:first-of-type { grid-column: 1; grid-row: 1; }
  .w3-odds > ul:first-of-type { grid-column: 1; grid-row: 2; }
  .w3-odds > .qz-kicker:last-of-type { grid-column: 2; grid-row: 1; }
  .w3-odds > ul:last-of-type { grid-column: 2; grid-row: 2; }
  .w3-odds ul { margin: calc(5px * var(--ui)) 0 0; }
  .w3-odd { grid-template-columns: calc(7px * var(--ui)) minmax(0, 1fr) auto; gap: calc(8px * var(--ui)); padding: calc(4px * var(--ui)) 0; font-size: calc(12px * var(--ui)); }
  .w3-odd em { display: none; }
}
@media (max-width: 900px) {
  .wp3 .wp-main { grid-template-columns: 1fr; min-height: 0; }
  .wp3 .wheel-stage { order: 2; }
  .wp3 .wheel { width: min(100%, calc(520px * var(--ui))); margin-top: 9%; }
}

/* --- Réglages : sommaire collant à gauche, sections en lignes « libellé · réglage » séparées de filets */
.settings .page-head { margin-bottom: calc(36px * var(--ui)); }
.st-layout { display: grid; grid-template-columns: calc(180px * var(--ui)) minmax(0, 1fr); gap: clamp(calc(28px * var(--ui)), 5vw, calc(72px * var(--ui))); align-items: start; }
.st-nav { position: sticky; top: calc(var(--top-h) + calc(28px * var(--ui))); display: flex; flex-direction: column; border-left: 1px solid var(--line); }
.st-nav a { display: flex; align-items: baseline; justify-content: space-between; gap: calc(10px * var(--ui)); padding: calc(9px * var(--ui)) 0 calc(9px * var(--ui)) calc(16px * var(--ui)); margin-left: -1px; border-left: 1px solid transparent; color: var(--muted); font-size: calc(14px * var(--ui)); transition: color .15s, border-color .15s; }
.st-nav a small { font: calc(11px * var(--ui)) 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: calc(980px * var(--ui)); }
.st-sec { scroll-margin-top: calc(var(--top-h) + calc(24px * var(--ui))); margin-bottom: calc(48px * var(--ui)); }
.st-sec h2 { margin: 0 0 calc(4px * var(--ui)); font: 600 calc(11px * var(--ui)) var(--font); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.st-row { display: grid; grid-template-columns: minmax(calc(200px * var(--ui)), calc(300px * var(--ui))) minmax(0, 1fr); gap: calc(16px * var(--ui)) calc(40px * var(--ui)); align-items: center; padding: calc(22px * var(--ui)) 0; border-top: 1px solid var(--line); }
.st-row:last-child { border-bottom: 1px solid var(--line); }
.st-label b { display: block; font-size: calc(15px * var(--ui)); font-weight: 600; color: var(--text); }
.st-label p { margin: calc(4px * var(--ui)) 0 0; font-size: calc(13px * var(--ui)); 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(calc(170px * var(--ui)), 1fr)); gap: calc(8px * var(--ui)); }
.settings .font-pick { padding: calc(14px * var(--ui)) calc(14px * var(--ui)) calc(12px * var(--ui)); }
.settings .font-pick b { font-size: calc(22px * var(--ui)); }
.settings .font-pick.on { background: transparent; box-shadow: inset 0 0 0 1px var(--accent); border-color: var(--accent); }
.st-form { display: flex; gap: calc(8px * var(--ui)); width: 100%; max-width: calc(380px * var(--ui)); }
.st-form .input { flex: 1; min-width: 0; }
.settings .btn-row { display: flex; gap: calc(8px * var(--ui)); flex-wrap: wrap; justify-content: flex-end; }
.st-user { display: inline; font-size: calc(13px * var(--ui)); color: var(--text); font-weight: 600; }
.st-shortcut { width: 100%; display: flex; align-items: center; justify-content: flex-end; gap: calc(14px * var(--ui)) calc(20px * var(--ui)); flex-wrap: wrap; }
.st-shortcut-state { display: inline-flex; align-items: center; gap: calc(7px * var(--ui)); color: var(--muted); font-size: calc(12px * var(--ui)); white-space: nowrap; }
.st-shortcut-state i { width: calc(7px * var(--ui)); height: calc(7px * var(--ui)); border-radius: 50%; background: var(--faint); box-shadow: 0 0 0 calc(3px * var(--ui)) color-mix(in srgb, var(--faint) 15%, transparent); }
.st-shortcut-state.on { color: var(--text); }
.st-shortcut-state.on i { background: #5dc47a; box-shadow: 0 0 0 calc(3px * var(--ui)) rgba(93, 196, 122, .14); }
.shortcut-setup { padding: calc(16px * var(--ui)) calc(6px * var(--ui)) calc(4px * var(--ui)); text-align: center; }
.shortcut-mark { display: grid; place-items: center; width: calc(58px * var(--ui)); height: calc(58px * var(--ui)); margin: 0 auto calc(18px * var(--ui)); border-radius: calc(16px * var(--ui)); color: #fff; font-size: calc(31px * var(--ui)); line-height: 1; background: linear-gradient(145deg, #ff6848, #b82951); box-shadow: 0 calc(16px * var(--ui)) calc(34px * var(--ui)) rgba(232, 65, 72, .25); }
.shortcut-mark.android { background: linear-gradient(145deg, #72cf69, #168a62); box-shadow: 0 calc(16px * var(--ui)) calc(34px * var(--ui)) rgba(51, 180, 111, .22); font: 800 calc(27px * var(--ui))/1 var(--display); }
.shortcut-setup .eyebrow { margin: 0 0 calc(5px * var(--ui)); color: var(--accent); font-size: calc(10px * var(--ui)); font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.shortcut-setup h2 { margin: 0 0 calc(10px * var(--ui)); font-size: calc(25px * var(--ui)); }
.shortcut-setup > p:not(.eyebrow) { max-width: calc(470px * var(--ui)); margin: 0 auto calc(18px * var(--ui)); color: var(--muted); line-height: 1.55; }
.shortcut-code-label { display: block; max-width: calc(470px * var(--ui)); margin: 0 auto; text-align: left; color: var(--muted); font-size: calc(11px * var(--ui)); }
.shortcut-code { width: 100%; margin-top: calc(6px * var(--ui)); font: calc(12px * var(--ui)) var(--mono); letter-spacing: .02em; }
.shortcut-setup .shortcut-security { margin-top: calc(10px * var(--ui)) !important; font-size: calc(11px * var(--ui)); }
.shortcut-actions { display: flex; justify-content: center; gap: calc(8px * var(--ui)); margin-top: calc(22px * var(--ui)); }
.share-result .loader { margin: calc(22px * var(--ui)) auto calc(4px * var(--ui)); }
.share-candidates { display: grid; gap: calc(8px * var(--ui)); max-width: calc(500px * var(--ui)); margin: calc(18px * var(--ui)) auto 0; text-align: left; }
.share-candidates button { display: grid; grid-template-columns: calc(48px * var(--ui)) minmax(0, 1fr) auto; align-items: center; gap: calc(12px * var(--ui)); width: 100%; padding: calc(8px * var(--ui)); border: 1px solid var(--line); border-radius: calc(10px * var(--ui)); color: var(--text); background: var(--surface); cursor: pointer; text-align: left; }
.share-candidates button:hover { border-color: var(--accent); background: var(--surface-2); }
.share-candidates button:disabled { opacity: .55; cursor: wait; }
.share-candidates button.is-added:disabled { opacity: 1; cursor: default; border-color: color-mix(in srgb, #5dc47a 52%, var(--line)); background: color-mix(in srgb, #5dc47a 9%, var(--surface)); }
.share-candidates img { width: calc(48px * var(--ui)); height: calc(64px * var(--ui)); border-radius: calc(6px * var(--ui)); object-fit: cover; }
.share-candidates span { min-width: 0; }
.share-candidates b, .share-candidates small { display: block; }
.share-candidates b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.share-candidates small { margin-top: calc(4px * var(--ui)); color: var(--muted); }
.share-candidate-state { display: grid !important; place-items: center; color: var(--accent); }
.share-candidates .is-added .share-candidate-state { color: #5dc47a; }
.share-candidate-state .i { width: calc(17px * var(--ui)); height: calc(17px * var(--ui)); }
.share-tutorial { padding: calc(10px * var(--ui)) calc(6px * var(--ui)) calc(4px * var(--ui)); }
.share-tutorial .shortcut-mark { margin-bottom: calc(14px * var(--ui)); }
.share-tutorial > .eyebrow { margin: 0 0 calc(5px * var(--ui)); color: var(--accent); font-size: calc(10px * var(--ui)); font-weight: 700; letter-spacing: .16em; text-align: center; text-transform: uppercase; }
.share-tutorial h2 { margin: 0; text-align: center; font-size: calc(25px * var(--ui)); }
.share-tutorial-intro { max-width: calc(480px * var(--ui)); margin: calc(9px * var(--ui)) auto calc(20px * var(--ui)); color: var(--muted); line-height: 1.5; text-align: center; }
.share-tutorial ol { display: grid; gap: calc(4px * var(--ui)); max-width: calc(520px * var(--ui)); margin: 0 auto; padding: 0; list-style: none; counter-reset: none; }
.share-tutorial li { display: grid; grid-template-columns: calc(34px * var(--ui)) 1fr; gap: calc(12px * var(--ui)); padding: calc(11px * var(--ui)) calc(12px * var(--ui)); border-radius: calc(10px * var(--ui)); text-align: left; }
.share-tutorial li > span { display: grid; place-items: center; width: calc(30px * var(--ui)); height: calc(30px * var(--ui)); border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--line)); border-radius: 50%; color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, transparent); font-size: calc(12px * var(--ui)); font-weight: 750; }
.share-tutorial li b { display: block; margin: calc(2px * var(--ui)) 0 calc(3px * var(--ui)); font-size: calc(14px * var(--ui)); }
.share-tutorial li p { margin: 0; color: var(--muted); font-size: calc(12.5px * var(--ui)); line-height: 1.5; }
.share-tutorial-tip { display: flex; align-items: flex-start; gap: calc(8px * var(--ui)); max-width: calc(500px * var(--ui)); margin: calc(16px * var(--ui)) auto 0; padding: calc(10px * var(--ui)) calc(12px * var(--ui)); border: 1px solid var(--line); border-radius: calc(9px * var(--ui)); color: var(--muted); background: var(--surface-2); font-size: calc(11.5px * var(--ui)); line-height: 1.45; }
.share-tutorial-tip .i { width: calc(15px * var(--ui)); min-width: calc(15px * var(--ui)); margin-top: 1px; color: var(--accent); }
/* interrupteur : piste fine, pastille qui glisse, vermillon quand c'est activé */
.st-switch { position: relative; width: calc(44px * var(--ui)); height: calc(24px * var(--ui)); padding: 0; border-radius: calc(999px * var(--ui)); border: 1px solid var(--line-2); background: var(--surface-2); cursor: pointer; transition: background .2s, border-color .2s; }
.st-switch i { position: absolute; top: calc(3px * var(--ui)); left: calc(3px * var(--ui)); width: calc(16px * var(--ui)); height: calc(16px * var(--ui)); 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(calc(20px * var(--ui))); background: var(--accent-ink); }
.st-switch:focus-visible { outline: calc(2px * var(--ui)) solid var(--accent); outline-offset: calc(2px * var(--ui)); }
.st-vol { display: flex; align-items: center; gap: calc(12px * var(--ui)); width: min(calc(260px * var(--ui)), 100%); }
.st-vol output { min-width: 3.5em; text-align: right; color: var(--muted); font: 500 calc(13px * var(--ui)) var(--mono); }
.settings .credit { margin-top: 0; }
@media (max-width: 820px) {
  .st-layout { grid-template-columns: 1fr; gap: calc(8px * var(--ui)); }
  .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 calc(-16px * var(--ui)); padding: 0 calc(16px * var(--ui)); }
  .st-nav a { padding: calc(12px * var(--ui)) calc(14px * var(--ui)) calc(11px * var(--ui)); 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: calc(12px * var(--ui)); }
  .st-ctl { justify-content: flex-start; }
  .st-shortcut { justify-content: flex-start; }
  .settings .btn-row { justify-content: flex-start; }
  .st-sec { margin-bottom: calc(32px * var(--ui)); }
}
@media (max-width: 520px) {
  .shortcut-actions { flex-direction: column-reverse; }
  .shortcut-actions .btn { width: 100%; justify-content: center; }
}
.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: calc(12px * var(--ui)); }
  .settings .font-pick b { font-size: calc(18px * var(--ui)); }
}
/* 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: calc(18px * var(--ui)); }
  .wp3 .wheel-stage { order: 2; margin-bottom: calc(22px * var(--ui)); }
  .wp3 .w3-spin { order: 3; }
  .wp3 .w3-odds { order: 4; }
  .wp3 .spin-n { font-size: calc(calc(48px * var(--ui)) * 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: calc(220px * var(--ui)); 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: calc(2px * var(--ui)) solid var(--accent); border-radius: calc(12px * var(--ui));
  background: linear-gradient(135deg, rgba(255,255,255,.035), transparent 48%);
  box-shadow: 0 0 0 calc(4px * var(--ui)) rgba(255, 90, 54, .15), 0 0 calc(28px * var(--ui)) rgba(255, 90, 54, .42), inset 0 0 calc(18px * var(--ui)) 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 calc(5px * var(--ui)) rgba(147, 201, 138, .2), 0 0 calc(34px * var(--ui)) 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 calc(9px * var(--ui)) rgba(255, 90, 54, .11), 0 0 calc(38px * var(--ui)) rgba(255, 90, 54, .6), inset 0 0 calc(20px * var(--ui)) rgba(255, 90, 54, .1); } }
.tour-pointer {
  position: fixed; z-index: 3; display: grid; place-items: center; width: calc(30px * var(--ui)); height: calc(30px * var(--ui)); margin-left: calc(-15px * var(--ui));
  color: var(--accent); filter: drop-shadow(0 calc(4px * var(--ui)) calc(6px * var(--ui)) 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: calc(28px * var(--ui)); height: calc(28px * var(--ui)); stroke-width: 2.5; }
@keyframes tourPointUp { to { translate: 0 calc(-6px * var(--ui)); } }
@keyframes tourPointDown { to { translate: 0 calc(6px * var(--ui)); } }
@keyframes tourPointLeft { to { translate: calc(-6px * var(--ui)) 0; } }
@keyframes tourPointRight { to { translate: calc(6px * var(--ui)) 0; } }
.tour-card {
  position: fixed; z-index: 4; box-sizing: border-box; max-width: calc(100vw - calc(12px * var(--ui))); pointer-events: auto; padding: calc(20px * var(--ui)); border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--line-2)); border-radius: calc(16px * var(--ui));
  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 calc(28px * var(--ui)) calc(80px * var(--ui)) rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.025), 0 calc(12px * var(--ui)) calc(35px * var(--ui)) rgba(255,90,54,.08);
  backdrop-filter: blur(calc(18px * var(--ui))); 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 calc(18px * var(--ui)) auto; height: calc(2px * var(--ui)); border-radius: 0 0 calc(99px * var(--ui)) calc(99px * var(--ui)); background: linear-gradient(90deg, transparent, var(--accent), transparent); opacity: .75; }
.tour-card.nudge { animation: tourNudge .4s ease; }
@keyframes tourCardIn { from { opacity: 0; transform: translateY(calc(8px * var(--ui))) scale(.98); } }
@keyframes tourNudge { 20%, 60% { transform: translateX(calc(-6px * var(--ui))); } 40%, 80% { transform: translateX(calc(6px * var(--ui))); } }
.tour-top { display: flex; align-items: center; justify-content: space-between; gap: calc(16px * var(--ui)); }
.tour-kicker { display: inline-flex; align-items: center; min-height: calc(22px * var(--ui)); padding: 0 calc(8px * var(--ui)); border: 1px solid rgba(255,90,54,.3); border-radius: calc(99px * var(--ui)); background: rgba(255,90,54,.08); color: var(--accent); font: 700 calc(10px * var(--ui)) var(--font); letter-spacing: .14em; text-transform: uppercase; }
.tour-top-act { display: flex; align-items: center; gap: calc(14px * var(--ui)); }
.tour-restart { display: inline-flex; align-items: center; gap: calc(5px * var(--ui)); border: 0; padding: calc(4px * var(--ui)) 0; background: transparent; color: var(--muted); font: 500 calc(13px * var(--ui)) var(--font); cursor: pointer; }
.tour-restart .i { width: calc(13px * var(--ui)); height: calc(13px * var(--ui)); }
.tour-restart:hover { color: var(--text); }
.tour-skip, .tour-pass { border: 0; padding: calc(4px * var(--ui)) 0; background: transparent; color: var(--muted); font: 500 calc(13px * var(--ui)) var(--font); cursor: pointer; }
.tour-skip:hover, .tour-pass:hover { color: var(--text); }
.tour-pass { text-decoration: underline; text-underline-offset: calc(3px * var(--ui)); }
/* fil d'Ariane : chapitres de la visite, grisés tant qu'une étape dont ils dépendent n'est pas faite */
.tour-crumbs { display: flex; gap: calc(2px * var(--ui)); margin: calc(14px * var(--ui)) calc(-4px * var(--ui)) 0; overflow-x: auto; scrollbar-width: none; mask-image: linear-gradient(90deg, transparent, #000 calc(10px * var(--ui)), #000 calc(100% - calc(10px * var(--ui))), transparent); }
.tour-crumbs::-webkit-scrollbar { display: none; }
.tour-crumbs button { flex: none; display: inline-flex; align-items: center; gap: calc(4px * var(--ui)); padding: calc(3px * var(--ui)) calc(4px * var(--ui)); border: 0; background: none; color: var(--faint); font: 500 calc(12px * var(--ui)) var(--font); white-space: nowrap; cursor: pointer; }
.tour-crumbs button + button::before { content: '›'; margin-right: calc(4px * var(--ui)); color: var(--faint); }
.tour-crumbs button.on { color: var(--muted); }
.tour-crumbs button.now { color: var(--accent); font-weight: 700; }
.tour-crumbs button:not(.locked):hover span { color: var(--text); text-decoration: underline; text-underline-offset: calc(3px * var(--ui)); }
.tour-crumbs button.locked { cursor: not-allowed; opacity: .45; }
.tour-crumbs .i { width: calc(11px * var(--ui)); height: calc(11px * var(--ui)); }
.tour-progress { display: grid; gap: calc(4px * var(--ui)); margin: calc(10px * var(--ui)) 0 calc(10px * var(--ui)); }
.tour-progress button { display: block; height: calc(13px * var(--ui)); padding: calc(5px * var(--ui)) 0; border: 0; background: none; cursor: pointer; }
.tour-progress button.locked { cursor: not-allowed; }
.tour-progress i { display: block; height: calc(3px * var(--ui)); border-radius: calc(99px * var(--ui)); background: var(--line-2); transition: transform .12s ease; }
.tour-progress button:not(.locked):hover i { transform: scaleY(2); }
.tour-progress button.locked i { opacity: .35; }
.tour-progress .on i { background: var(--accent); }
.tour-progress .now i { 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: calc(4px * var(--ui)); color: var(--faint); font: 600 calc(11px * var(--ui)) var(--mono); font-variant-numeric: tabular-nums; }
.tour-card h2 { margin: 0 0 calc(8px * var(--ui)); font: var(--display-w) calc(calc(24px * var(--ui)) * var(--display-scale))/1.15 var(--display); letter-spacing: var(--display-ls); }
.tour-card p { margin: 0; color: var(--muted); font-size: calc(14px * var(--ui)); line-height: 1.55; }
.tour-actions { display: flex; align-items: center; justify-content: space-between; gap: calc(10px * var(--ui)); margin-top: calc(18px * var(--ui)); min-height: calc(38px * var(--ui)); }
.tour-actions .btn { min-width: calc(102px * var(--ui)); }
.tour-go { display: flex; gap: calc(8px * var(--ui)); }
.tour-go .tour-more { min-width: 0; }
.tour-wait { display: flex; align-items: center; gap: calc(4px * var(--ui)); margin-top: calc(16px * var(--ui)); color: var(--accent); font: 500 calc(13px * var(--ui)) var(--font); }
.tour-wait > span { margin-left: calc(6px * var(--ui)); }
.tour-wait i { width: calc(6px * var(--ui)); height: calc(6px * var(--ui)); 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(calc(-3px * var(--ui))); } }
.tour-bravo { display: inline-flex; align-items: center; gap: calc(8px * var(--ui)); color: #93c98a; font: 700 calc(16px * var(--ui)) var(--font); animation: tourBravo .45s cubic-bezier(.2,1.6,.4,1); }
.tour-bravo .i { width: calc(22px * var(--ui)); height: calc(22px * var(--ui)); 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; }
/* bandeau cookies et barre du compte d’exemple passeraient par-dessus la carte ou la cible : ils reviennent à la fin de la visite */
body.tour-open .cookie-notice, body.tour-open .demo-bar { display: none; }
/* les messages (point du fil d'Ariane encore bloqué…) passent au-dessus du voile de la visite */
body.tour-open #toasts { z-index: 310; }
@media (max-width: 640px) {
  .tour-card { padding: calc(14px * var(--ui)); }
  .tour-spotlight { border-radius: calc(9px * var(--ui)); }
  .tour-progress { gap: calc(3px * var(--ui)); }
}
@media (max-height: 520px) {
  .tour-card { padding: calc(12px * var(--ui)) calc(14px * var(--ui)); }
  .tour-crumbs { margin-top: calc(7px * var(--ui)); }
  .tour-progress { margin: calc(4px * var(--ui)) 0 calc(4px * var(--ui)); }
  .tour-card h2 { font-size: calc(calc(20px * var(--ui)) * var(--display-scale)); margin-bottom: calc(5px * var(--ui)); }
  .tour-card p { font-size: calc(12.5px * var(--ui)); line-height: 1.38; }
  .tour-wait { margin-top: calc(8px * var(--ui)); }
  .tour-actions { position: sticky; bottom: calc(-12px * var(--ui)); margin: calc(9px * var(--ui)) calc(-2px * var(--ui)) calc(-12px * var(--ui)); padding: calc(8px * var(--ui)) calc(2px * var(--ui)) calc(12px * var(--ui)); 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 .now i, .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: calc(14px * var(--ui)); margin-bottom: calc(10px * var(--ui)); }
.ep-head h3 { margin: 0; }
.ep-heading { display: flex; align-items: baseline; gap: calc(12px * var(--ui)); }
.ep-count { font: 500 calc(13px * var(--ui)) var(--mono); color: var(--muted); font-variant-numeric: tabular-nums; }
.ep-head .ep-season { margin-left: auto; }
.ep-pages button { font-variant-numeric: tabular-nums; }
.ep-progress { height: calc(4px * var(--ui)); overflow: hidden; border-radius: calc(99px * var(--ui)); background: var(--surface-2); margin-bottom: calc(13px * var(--ui)); }
.ep-progress i { display: block; height: 100%; border-radius: inherit; background: var(--accent); transition: width .3s ease; }
.ep-toolbar { display: flex; align-items: center; justify-content: space-between; gap: calc(12px * var(--ui)); padding-bottom: calc(10px * var(--ui)); }
.ep-season { display: block; color: var(--muted); font: 600 calc(10px * var(--ui)) var(--font); letter-spacing: .09em; text-transform: uppercase; }
.ep-season select { min-width: calc(145px * var(--ui)); height: calc(36px * var(--ui)); padding: calc(5px * var(--ui)) calc(34px * var(--ui)) calc(5px * var(--ui)) calc(11px * var(--ui)); font-size: calc(12px * var(--ui)); }
.ep-nav { display: flex; gap: calc(7px * var(--ui)); margin-left: auto; }
.ep-nav button { display: grid; place-items: center; width: calc(36px * var(--ui)); height: calc(36px * var(--ui)); 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: calc(15px * var(--ui)); height: calc(15px * var(--ui)); }
.ep-grid { display: flex; gap: calc(14px * var(--ui)); overflow-x: auto; overflow-y: hidden; padding: calc(2px * var(--ui)) calc(2px * var(--ui)) calc(12px * var(--ui)); scroll-snap-type: x mandatory; scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; }
.ep-card { position: relative; display: flex; flex: 0 0 clamp(calc(250px * var(--ui)), 23.5vw, calc(350px * var(--ui))); flex-direction: column; min-width: 0; scroll-snap-align: start; transition: transform .2s; }
.ep-card:hover { transform: translateY(calc(-2px * var(--ui))); }
.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(calc(2px * var(--ui))) brightness(.45) saturate(.8); transform: scale(1.08); }
.ep-big { position: absolute; inset: 0; display: grid; place-items: center; font: var(--display-w) calc(calc(40px * var(--ui)) * var(--display-scale)) / 1 var(--display); color: var(--text); opacity: .85; }
.ep-thumb:hover img { transform: scale(1.04); }
.ep-thumb:focus-visible { outline: calc(2px * var(--ui)) solid var(--accent); outline-offset: calc(2px * var(--ui)); }
.ep-bar { position: absolute; left: 0; right: 0; bottom: 0; height: calc(3px * var(--ui)); background: var(--accent); }
.ep-up { position: absolute; top: calc(8px * var(--ui)); left: calc(8px * var(--ui)); padding: calc(2px * var(--ui)) calc(8px * var(--ui)); border-radius: calc(999px * var(--ui)); background: var(--text); color: var(--bg); font: 600 calc(10.5px * var(--ui)) 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(calc(14px * var(--ui))) brightness(.55) saturate(.8); transform: scale(1.15); }
:root[data-nospoil] .ep-card.soon:not(.ns-off) .ep-thumb img { filter: blur(calc(14px * var(--ui))) 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: calc(4px * var(--ui)) calc(10px * var(--ui)); border-radius: calc(12px * var(--ui)); background: rgba(14, 13, 11, .7); color: var(--text); font: 600 calc(10.5px * var(--ui)) / 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 calc(2px * var(--ui)) 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: calc(3px * var(--ui)); min-width: 0; padding: calc(10px * var(--ui)) calc(2px * var(--ui)) 0; }
.ep-k { display: flex; align-items: center; gap: calc(6px * var(--ui)); font: 600 calc(11px * var(--ui)) var(--font); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.ep-k em { font-style: normal; padding: 0 calc(5px * var(--ui)); border-radius: calc(3px * var(--ui)); border: 1px solid var(--line-2); color: var(--faint); letter-spacing: .06em; font-size: calc(10px * var(--ui)); }
.ep-title { font-size: calc(14px * var(--ui)); 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: calc(12px * var(--ui)); color: var(--faint); }
.ep-summary { margin: calc(4px * var(--ui)) 0 0; color: var(--muted); font-size: calc(12px * var(--ui)); 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: calc(3px * var(--ui)); border-radius: calc(3px * var(--ui)); }
.ep-summary-popover { position: fixed; z-index: 1000; width: min(calc(360px * var(--ui)), calc(100vw - calc(24px * var(--ui)))); max-height: min(calc(240px * var(--ui)), calc(100vh - calc(24px * var(--ui)))); overflow: auto; padding: calc(12px * var(--ui)) calc(14px * var(--ui)); border: 1px solid var(--line-2); border-radius: calc(9px * var(--ui)); background: color-mix(in srgb, var(--surface) 96%, transparent); color: var(--text); box-shadow: 0 calc(16px * var(--ui)) calc(42px * var(--ui)) rgba(0,0,0,.45); backdrop-filter: blur(calc(12px * var(--ui))); font-size: calc(13px * var(--ui)); line-height: 1.55; }
.ep-actions { position: absolute; z-index: 3; top: calc(8px * var(--ui)); right: calc(8px * var(--ui)); display: flex; flex-direction: column; gap: calc(6px * var(--ui)); }
.ep-watch, .ep-toggle { width: calc(30px * var(--ui)); height: calc(30px * var(--ui)); 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(calc(5px * var(--ui))); }
.ep-watch:hover, .ep-toggle:hover { border-color: var(--text); background: rgba(14, 13, 11, .95); }
.ep-toggle .i, .ep-watch .i { width: calc(14px * var(--ui)); height: calc(14px * var(--ui)); }
.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; }
@media (max-width: 640px) {
  .ep-head { align-items: flex-start; }
  .ep-heading { min-width: 0; flex-wrap: wrap; gap: calc(3px * var(--ui)) calc(10px * var(--ui)); }
  .ep-head .ep-season { flex-shrink: 0; }
  .ep-pages { min-width: 0; overflow-x: auto; flex-wrap: nowrap; }
  .ep-season select { min-width: calc(118px * var(--ui)); }
  .ep-card { flex-basis: min(82vw, calc(320px * var(--ui))); }
  .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: calc(6px * var(--ui)); justify-items: center; padding-top: calc(12px * var(--ui)); border-top: 1px solid var(--line); font-size: calc(14px * var(--ui)); }
.demo-try .btn { border-color: var(--line-2); }
.demo-bar {
  position: fixed; left: 50%; bottom: calc(16px * var(--ui)); z-index: 90; transform: translateX(-50%);
  display: flex; align-items: center; gap: calc(14px * var(--ui)); width: max-content; max-width: calc(100vw - calc(32px * var(--ui)));
  padding: calc(8px * var(--ui)) calc(8px * var(--ui)) calc(8px * var(--ui)) calc(16px * var(--ui)); border: 1px solid var(--line-2); border-radius: calc(999px * var(--ui)); background: var(--surface-2); box-shadow: 0 calc(10px * var(--ui)) calc(30px * var(--ui)) #0008;
}
.demo-bar p { margin: 0; font-size: calc(13px * var(--ui)); color: var(--muted); }
.demo-bar b { color: var(--text); margin-right: calc(6px * var(--ui)); }
.demo-bar .btn { flex: none; padding: calc(7px * var(--ui)) calc(14px * var(--ui)); font-size: calc(13px * var(--ui)); }
.st-zone { display: inline-flex; padding: calc(7px * var(--ui)) calc(10px * var(--ui)); border: 1px solid var(--line); border-radius: calc(7px * var(--ui)); color: var(--text); font: 500 calc(12px * var(--ui)) var(--mono); }
.cookie-notice { position: fixed; z-index: 1200; right: calc(18px * var(--ui)); bottom: calc(18px * var(--ui)); width: min(calc(460px * var(--ui)), calc(100% - calc(36px * var(--ui)))); padding: calc(16px * var(--ui)); border: 1px solid var(--line-2); border-radius: calc(12px * var(--ui)); background: #171513; box-shadow: 0 calc(18px * var(--ui)) calc(55px * var(--ui)) rgba(0,0,0,.48); }
.cookie-notice p { margin: 0; color: var(--muted); font-size: calc(13px * var(--ui)); line-height: 1.5; }
.cookie-notice div { display: flex; align-items: center; justify-content: flex-end; gap: calc(14px * var(--ui)); margin-top: calc(12px * var(--ui)); }
.cookie-notice a { color: var(--text); font-size: calc(13px * var(--ui)); text-decoration: underline; text-underline-offset: calc(3px * var(--ui)); }
.cookie-notice button { padding: calc(8px * var(--ui)) calc(14px * var(--ui)); border: 0; border-radius: calc(7px * var(--ui)); color: var(--accent-ink); background: var(--accent); font-weight: 700; cursor: pointer; }
@media (max-width: 640px) {
  .demo-bar { bottom: calc(calc(76px * var(--ui)) + env(safe-area-inset-bottom)); left: calc(12px * var(--ui)); right: calc(76px * var(--ui)); transform: none; width: auto; justify-content: space-between; border-radius: calc(14px * var(--ui)); }
  .demo-bar span { display: none; }
  .cookie-notice { right: calc(12px * var(--ui)); bottom: calc(calc(76px * var(--ui)) + env(safe-area-inset-bottom)); width: calc(100% - calc(24px * var(--ui))); }
}

/* ---------- Abonnements et fil d'activité ---------- */
.nav a.has-dot::before, .bottom-nav a.has-dot::after { content: ""; position: absolute; width: calc(7px * var(--ui)); height: calc(7px * var(--ui)); border-radius: 50%; background: var(--accent); }
.nav a.has-dot::before { top: calc(18px * var(--ui)); right: calc(6px * var(--ui)); }
.bottom-nav a.has-dot::after { top: calc(6px * var(--ui)); left: calc(50% + calc(8px * var(--ui))); }
.is-following .fl-off { display: none; }
@media (hover: hover) { .is-following:hover .fl-on { display: none; } .is-following:hover .fl-off { display: inline; color: var(--red); } }
.pf-follow { display: flex; flex-wrap: wrap; align-items: center; gap: calc(4px * var(--ui)) calc(16px * var(--ui)); margin: calc(6px * var(--ui)) 0 calc(12px * var(--ui)); }
.pf-follow .link { text-transform: none; letter-spacing: 0; font: 400 calc(13px * var(--ui)) var(--font); gap: calc(5px * var(--ui)); }
.pf-follow .link b { color: var(--text); font-weight: 600; }
.pf-follow .link:hover span { color: var(--text); }
.pf-follows-you { padding: calc(2px * var(--ui)) calc(8px * var(--ui)); border: 1px solid var(--line-2); border-radius: calc(5px * var(--ui)); font-size: calc(12px * var(--ui)); color: var(--muted); }
.follow-list h2 { margin: 0 0 calc(14px * var(--ui)); font-size: calc(18px * var(--ui)); }
.fl-body { display: grid; gap: calc(2px * var(--ui)); max-height: 60vh; overflow: auto; }
.fl-row { display: flex; align-items: center; gap: calc(10px * var(--ui)); padding: calc(7px * var(--ui)) 0; }
.fl-row > a, .fl-who { flex: 1; min-width: 0; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fl-who { display: flex; flex-direction: column; }
.fl-who small { color: var(--faint); font-weight: 400; font-size: calc(12px * var(--ui)); }
.fl-row .btn { flex: none; }

.feed-layout { display: grid; grid-template-columns: minmax(0, calc(680px * var(--ui))) minmax(0, calc(300px * var(--ui))); gap: calc(40px * var(--ui)); align-items: start; }
.feed-list { border-top: 1px solid var(--line); }
.fd-item { display: grid; grid-template-columns: calc(36px * var(--ui)) minmax(0, 1fr) auto; gap: calc(12px * var(--ui)); padding: calc(14px * var(--ui)) 0; border-bottom: 1px solid var(--line); }
.fd-av .social-avatar { width: calc(36px * var(--ui)); height: calc(36px * var(--ui)); }
.fd-line { margin: 0; line-height: 1.45; color: var(--muted); }
.fd-user { color: var(--text); font-weight: 600; }
.fd-anime { color: var(--text); font-weight: 500; }
.fd-user:hover, .fd-anime:hover { text-decoration: underline; text-underline-offset: calc(3px * var(--ui)); }
.fd-score { display: inline-flex; align-items: center; gap: calc(3px * var(--ui)); color: var(--star); font-weight: 600; white-space: nowrap; }
.fd-score .i { width: calc(13px * var(--ui)); height: calc(13px * var(--ui)); fill: currentColor; }
.fd-quote { display: block; margin-top: calc(8px * var(--ui)); padding: calc(2px * var(--ui)) 0 calc(2px * var(--ui)) calc(12px * var(--ui)); border-left: calc(2px * var(--ui)) solid var(--line-2); color: var(--text); white-space: pre-line; overflow-wrap: anywhere; transition: filter .2s; }
.fd-quote:hover { border-color: var(--accent); }
.spoiler-blur { filter: blur(calc(5px * var(--ui))); cursor: pointer; user-select: none; }
.fd-time { display: block; margin-top: calc(4px * var(--ui)); font-size: calc(12px * var(--ui)); color: var(--faint); }
.fd-actions { margin-top: calc(8px * var(--ui)); }
.fd-cover { width: calc(44px * var(--ui)); height: calc(62px * var(--ui)); border-radius: calc(4px * var(--ui)); overflow: hidden; background: var(--c, var(--surface-2)); }
.fd-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.feed-more { display: flex; margin: calc(20px * var(--ui)) auto 0; }
.feed-side { position: sticky; top: calc(var(--top-h) + calc(24px * var(--ui))); }
.feed-side:empty { display: none; }
.feed-suggest { display: grid; gap: calc(4px * var(--ui)); }
.feed-suggest .qz-kicker { margin-bottom: calc(6px * var(--ui)); }
@media (max-width: 960px) {
  .feed-layout { grid-template-columns: 1fr; gap: calc(28px * var(--ui)); }
  .feed-side { position: static; order: -1; }
}

/* ---------- Discussion sous la fiche ---------- */
.ep-talk { height: calc(30px * var(--ui)); min-width: calc(30px * var(--ui)); display: inline-flex; align-items: center; justify-content: center; gap: calc(4px * var(--ui)); padding: 0 calc(8px * var(--ui)); border-radius: calc(15px * var(--ui)); border: 1px solid rgba(255,255,255,.18); background: rgba(14, 13, 11, .78); color: var(--text); font-size: calc(12px * var(--ui)); font-weight: 600; cursor: pointer; backdrop-filter: blur(calc(5px * var(--ui))); }
.ep-talk[hidden] { display: none; }
.ep-talk:hover { border-color: var(--text); }
.ep-talk .i { width: calc(13px * var(--ui)); height: calc(13px * var(--ui)); }
.talk-head { display: flex; align-items: center; justify-content: space-between; gap: calc(12px * var(--ui)); flex-wrap: wrap; margin-bottom: calc(10px * var(--ui)); }
.talk-head h3 { margin: 0; }
.talk-tabs button span:empty { display: none; }
.talk-tabs button span { color: var(--faint); font-weight: 400; }
.talk-panel.episode-feedback-section { margin: 0; padding: 0; border: 0; }
.tk-bar { display: flex; align-items: center; gap: calc(10px * var(--ui)); flex-wrap: wrap; margin-bottom: calc(14px * var(--ui)); }
.tk-bar select { width: auto; min-width: calc(220px * var(--ui)); max-width: 100%; }
.tk-warn { display: flex; align-items: center; gap: calc(8px * var(--ui)); margin: 0 0 calc(10px * var(--ui)); font-size: calc(13px * var(--ui)); color: var(--amber); }
.tk-warn .i { width: calc(16px * var(--ui)); height: calc(16px * var(--ui)); flex: none; }
.tk-form { display: grid; gap: calc(8px * var(--ui)); margin-bottom: calc(18px * var(--ui)); }
.tk-form textarea { resize: vertical; min-height: 0; font: inherit; line-height: 1.5; }
.tk-form-bar { display: flex; align-items: center; justify-content: flex-end; gap: calc(14px * var(--ui)); }
.tk-left { margin-right: auto; color: var(--faint); font-size: calc(12px * var(--ui)); }
/* erreur d'envoi sous le champ (mot interdit…), voir formError() */
.form-err { margin: 0; color: var(--red); font-size: calc(13px * var(--ui)); line-height: 1.4; }
.tk-list { border-top: 1px solid var(--line); }
.tk-empty { padding: calc(28px * var(--ui)) 0; text-align: center; }
.tk-empty p { margin: 0 0 calc(4px * var(--ui)); }
.tk-post { display: grid; grid-template-columns: calc(36px * var(--ui)) minmax(0, 1fr); gap: calc(12px * var(--ui)); padding: calc(16px * var(--ui)) 0; border-bottom: 1px solid var(--line); }
.tk-post.deleted { display: block; }
.tk-post.flash { animation: tkFlash 2s ease-out; }
@keyframes tkFlash { 0%, 40% { background: color-mix(in srgb, var(--accent) 12%, transparent); } 100% { background: transparent; } }
.tk-av .social-avatar { width: calc(36px * var(--ui)); height: calc(36px * var(--ui)); }
.tk-main header { display: flex; align-items: baseline; gap: calc(10px * var(--ui)); flex-wrap: wrap; }
.tk-main header time, .tk-main header small { font-size: calc(12px * var(--ui)); color: var(--faint); }
.tk-body { margin: calc(4px * var(--ui)) 0 0; white-space: pre-line; overflow-wrap: anywhere; line-height: 1.55; }
.tk-actions { display: flex; align-items: center; gap: calc(16px * var(--ui)); margin-top: calc(8px * var(--ui)); }
.tk-like { display: inline-flex; align-items: center; gap: calc(5px * var(--ui)); padding: 0; border: 0; background: none; color: var(--muted); font-size: calc(13px * var(--ui)); cursor: pointer; transition: color .15s; }
.tk-like .i { width: calc(16px * var(--ui)); height: calc(16px * var(--ui)); }
.tk-like:hover { color: var(--text); }
.tk-like.on { color: var(--accent); }
.tk-like.on .i { fill: currentColor; }
.tk-replies:not(:empty) { margin-top: calc(10px * var(--ui)); padding-left: calc(14px * var(--ui)); border-left: 1px solid var(--line-2); }
.tk-reply { padding: calc(10px * var(--ui)) 0; border-bottom: 0; grid-template-columns: calc(28px * var(--ui)) minmax(0, 1fr); gap: calc(10px * var(--ui)); }
.tk-reply .tk-av .social-avatar { width: calc(28px * var(--ui)); height: calc(28px * var(--ui)); }
.tk-replies .tk-form { margin: calc(10px * var(--ui)) 0 0; }
@media (max-width: 640px) {
  .tk-bar select { flex: 1; min-width: 0; }
}

/* ---------- Actualités ---------- */
.news-page .rel-head { border-bottom: 0; margin-bottom: calc(6px * var(--ui)); align-items: center; }
.news-page .rel-head h1 { padding-bottom: 0; }
.nw-tabs { display: flex; gap: calc(4px * var(--ui)); margin: 0 0 calc(26px * var(--ui)); border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.nw-tabs::-webkit-scrollbar { display: none; }
.nw-tabs a { position: relative; display: inline-flex; align-items: center; gap: calc(6px * var(--ui)); padding: calc(12px * var(--ui)) calc(14px * var(--ui)); color: var(--muted); font-weight: 500; white-space: nowrap; transition: color .15s; }
.nw-tabs a:hover, .nw-tabs a.on { color: var(--text); }
.nw-tabs a.on::after { content: ""; position: absolute; left: calc(14px * var(--ui)); right: calc(14px * var(--ui)); bottom: -1px; height: calc(2px * var(--ui)); background: var(--accent); }
.nw-tabs i { font-style: normal; font-size: calc(11px * var(--ui)); font-weight: 700; min-width: calc(18px * var(--ui)); height: calc(18px * var(--ui)); padding: 0 calc(5px * var(--ui)); border-radius: calc(9px * var(--ui)); display: inline-grid; place-items: center; background: var(--accent); color: var(--accent-ink); }
.nw-tabs i:empty { display: none; }

/* carte */
.nw-card { position: relative; display: flex; flex-direction: column; min-width: 0; }
.nw-hit { display: flex; flex-direction: column; gap: calc(12px * var(--ui)); color: inherit; }
.nw-img { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: calc(8px * var(--ui)); overflow: hidden; background: var(--surface-2); }
.nw-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s cubic-bezier(.2, .8, .2, 1); }
.nw-hit:hover .nw-img img { transform: scale(1.04); }
.nw-body { display: flex; flex-direction: column; gap: calc(6px * var(--ui)); min-width: 0; }
.nw-when { display: inline-flex; flex-wrap: wrap; align-items: center; gap: calc(2px * var(--ui)) calc(8px * var(--ui)); font-size: calc(12px * var(--ui)); color: var(--faint); }
.nw-when > span:first-child { color: var(--muted); font-weight: 500; }
.nw-when i { font-style: normal; padding: 0 calc(5px * var(--ui)); border: 1px solid var(--line-2); border-radius: calc(4px * var(--ui)); font-size: calc(10.5px * var(--ui)); letter-spacing: .04em; }
/* sur l'image : source et date dans un cartouche sombre */
.nw-img .nw-when { position: absolute; left: calc(10px * var(--ui)); bottom: calc(10px * var(--ui)); max-width: calc(100% - calc(20px * var(--ui))); padding: calc(4px * var(--ui)) calc(9px * var(--ui)); border-radius: calc(6px * var(--ui)); background: rgba(14, 13, 11, .8); backdrop-filter: blur(calc(6px * var(--ui))); color: rgba(238, 234, 225, .75); }
.nw-img .nw-when > span:first-child { color: #eeeae1; }
.nw-img .nw-when i { border-color: rgba(238, 234, 225, .3); }
.nw-card:not(.text) .nw-body > .nw-when { display: none; }
.nw-meta { display: flex; flex-wrap: wrap; align-items: center; gap: calc(4px * var(--ui)) calc(10px * var(--ui)); font-size: calc(12px * var(--ui)); color: var(--faint); }
.nw-meta > span:nth-of-type(1) { color: var(--muted); font-weight: 500; }
.nw-meta i { font-style: normal; padding: 0 calc(5px * var(--ui)); border: 1px solid var(--line-2); border-radius: calc(4px * var(--ui)); font-size: calc(10.5px * var(--ui)); letter-spacing: .04em; }
.nw-cat { font-size: calc(11px * var(--ui)); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.nw-cat.c-manga { color: var(--blue); }
.nw-cat.c-trailer { color: var(--amber); }
.nw-cat.c-other { color: var(--violet); }
.nw-kind { align-self: flex-start; padding: calc(3px * var(--ui)) calc(7px * var(--ui)); border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); border-radius: calc(5px * var(--ui)); color: var(--accent); font-size: calc(10.5px * var(--ui)); font-weight: 750; letter-spacing: .07em; line-height: 1; text-transform: uppercase; }
.nw-kind.archive { border-color: var(--line-2); color: var(--faint); }
.nw-title { font-weight: 600; font-size: calc(15.5px * var(--ui)); line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.nw-hit:hover .nw-title { text-decoration: underline; text-underline-offset: calc(3px * var(--ui)); text-decoration-color: var(--faint); }
.nw-excerpt { color: var(--muted); font-size: calc(14px * var(--ui)); line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* carte texte (sans image, ou brève) */
.nw-card.text { padding: calc(18px * var(--ui)); border: 1px solid var(--line); border-radius: calc(8px * var(--ui)); background: var(--surface); }
.nw-card.text .nw-title { font-size: calc(16.5px * var(--ui)); -webkit-line-clamp: 4; }
.nw-card.text .nw-excerpt { -webkit-line-clamp: 7; }
/* extrait toujours présent : visible sur les cartes texte (et si l'image ne charge pas), la une et les grands articles */
.nw-card:not(.text):not(.hero):not(.big) .nw-excerpt { display: none; }
/* la carte prend la hauteur de la rangée ; la pastille anime reste collée en bas */
.nw-card.text > .nw-hit { flex: 1 1 auto; }
.nw-card.text > .nw-animes { margin-top: auto; padding-top: calc(14px * var(--ui)); }
.nw-card.brief { padding: calc(14px * var(--ui)) 0; border: 0; border-top: 1px solid var(--line); border-radius: 0; background: none; }
.nw-card.brief .nw-title { font-size: calc(15px * var(--ui)); -webkit-line-clamp: 3; }
.nw-card.brief .nw-excerpt { font-size: calc(13.5px * var(--ui)); -webkit-line-clamp: 2; }

/* anime de la bibliothèque : une pastille (sur l'image), tous les animes dans la petite fenêtre */
.nw-animes { position: absolute; z-index: 3; top: calc(10px * var(--ui)); left: calc(10px * var(--ui)); display: inline-flex; align-items: center; gap: calc(4px * var(--ui)); max-width: calc(100% - calc(20px * var(--ui))); outline: none; }
.nw-card.text .nw-animes, .nw-card.side .nw-animes { position: static; margin-top: calc(10px * var(--ui)); max-width: 100%; }
.nw-chip { display: inline-flex; align-items: center; gap: calc(6px * var(--ui)); min-width: 0; height: calc(26px * var(--ui)); padding: 0 calc(10px * var(--ui)) 0 calc(3px * var(--ui)); border-radius: calc(13px * var(--ui)); font-size: calc(12px * var(--ui)); font-weight: 500; color: #eeeae1; background: rgba(14, 13, 11, .82); backdrop-filter: blur(calc(6px * var(--ui))); border: 1px solid rgba(238, 234, 225, .16); }
.nw-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nw-chip img { width: calc(20px * var(--ui)); height: calc(20px * var(--ui)); border-radius: 50%; object-fit: cover; flex: none; }
.nw-card.text .nw-chip, .nw-card.side .nw-chip { color: var(--muted); background: none; border-color: var(--line-2); backdrop-filter: none; }
.nw-chip:hover { border-color: var(--text); }
.nw-more { height: calc(26px * var(--ui)); padding: 0 calc(8px * var(--ui)); display: inline-grid; place-items: center; border-radius: calc(13px * var(--ui)); font-size: calc(12px * var(--ui)); font-weight: 600; color: #eeeae1; background: rgba(14, 13, 11, .82); border: 1px solid rgba(238, 234, 225, .16); cursor: default; }
.nw-card.text .nw-more, .nw-card.side .nw-more { color: var(--muted); background: none; border-color: var(--line-2); }
.nw-pop { position: fixed; z-index: 60; width: calc(260px * var(--ui)); display: flex; flex-direction: column; gap: calc(2px * var(--ui)); padding: calc(8px * var(--ui)); border: 1px solid var(--line-2); border-radius: calc(10px * var(--ui)); background: var(--bg-2); box-shadow: 0 calc(18px * var(--ui)) calc(44px * var(--ui)) rgba(0, 0, 0, .55); opacity: 0; visibility: hidden; transform: translateY(calc(4px * var(--ui))); transition: opacity .15s, transform .15s, visibility 0s .15s; }
.nw-pop small { padding: calc(2px * var(--ui)) calc(6px * var(--ui)) calc(6px * var(--ui)); font-size: calc(11px * var(--ui)); letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
/* la fenêtre ne s'ouvre qu'au survol de la pastille (ou d'elle-même), pas de toute la ligne */
.nw-animes:has(.nw-chip:hover, .nw-more:hover) .nw-pop, .nw-pop:hover, .nw-animes:focus-within .nw-pop { opacity: 1; visibility: visible; transform: none; transition: opacity .15s, transform .15s; }
.nw-pop-item { display: grid; grid-template-columns: calc(34px * var(--ui)) minmax(0, 1fr); gap: calc(10px * var(--ui)); align-items: center; padding: calc(6px * var(--ui)); border-radius: calc(7px * var(--ui)); }
.nw-pop-item:hover { background: var(--surface-2); }
.nw-pop-item img { width: calc(34px * var(--ui)); height: calc(48px * var(--ui)); border-radius: calc(4px * var(--ui)); object-fit: cover; }
.nw-pop-item > span { display: flex; flex-direction: column; min-width: 0; }
.nw-pop-item b { font-size: calc(13px * var(--ui)); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nw-pop-item > span > span { font-size: calc(12px * var(--ui)); color: var(--faint); }

/* une : titre et image visibles sans défiler, colonne de droite remplie jusqu'en bas */
.nw-front { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); gap: calc(36px * var(--ui)); padding-bottom: calc(34px * var(--ui)); border-bottom: 1px solid var(--line); }
.nw-card.hero .nw-img { aspect-ratio: auto; height: clamp(calc(220px * var(--ui)), calc(100svh - calc(470px * var(--ui))), calc(560px * var(--ui))); }
.nw-card.hero .nw-title { font-family: var(--display); font-weight: var(--display-w); letter-spacing: var(--display-ls); font-size: clamp(calc(24px * var(--ui)), 2.5vw, calc(36px * var(--ui))); line-height: 1.1; -webkit-line-clamp: 3; }
.nw-card.hero .nw-excerpt { font-size: calc(15px * var(--ui)); -webkit-line-clamp: 2; }
.nw-side { position: relative; display: flex; flex-direction: column; min-height: 0; }
.nw-side .qz-kicker { margin-bottom: calc(4px * var(--ui)); }
.nw-side-in { position: absolute; top: calc(26px * var(--ui)); left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; overflow: hidden; }
.nw-card.side { flex: none; padding: calc(12px * var(--ui)) 0; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: none; }
.nw-card.side:last-child { border-bottom: 0; }
.nw-card.side:not(.text) .nw-hit { display: grid; grid-template-columns: calc(112px * var(--ui)) minmax(0, 1fr); gap: calc(14px * var(--ui)); align-items: start; }
.nw-card.side .nw-img { aspect-ratio: 4 / 3; border-radius: calc(6px * var(--ui)); }
.nw-card.side .nw-img .nw-when { display: none; }
.nw-card.side .nw-body > .nw-when { display: inline-flex; }
.nw-card.side .nw-title { font-size: calc(14.5px * var(--ui)); -webkit-line-clamp: 3; }
.nw-card.side .nw-excerpt { font-size: calc(13px * var(--ui)); -webkit-line-clamp: 2; }
.nw-card.side .nw-hit { gap: calc(6px * var(--ui)); }

/* rubriques */
.nw-section { padding: calc(28px * var(--ui)) 0; border-bottom: 1px solid var(--line); }
.nw-section:last-child { border-bottom: 0; }
.nw-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: calc(12px * var(--ui)); margin-bottom: calc(18px * var(--ui)); }
.nw-section-head h2 { margin: 0; font-size: calc(22px * var(--ui)); font-family: var(--display); font-weight: var(--display-w); letter-spacing: var(--display-ls); }
.nw-section-head h2 small { margin-left: calc(10px * var(--ui)); font: 400 calc(13px * var(--ui)) var(--font); letter-spacing: 0; color: var(--faint); }
.nw-section-head h2 a:hover { text-decoration: underline; text-underline-offset: calc(4px * var(--ui)); }
.nw-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, calc(250px * var(--ui))), 1fr)); gap: calc(26px * var(--ui)) calc(24px * var(--ui)); }
.nw-grid-lead .nw-card.big { grid-column: span 2; }
.nw-grid-lead .nw-card.big .nw-title { font-family: var(--display); font-weight: var(--display-w); letter-spacing: var(--display-ls); font-size: clamp(calc(20px * var(--ui)), 2vw, calc(28px * var(--ui))); line-height: 1.15; }
.nw-sec-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(26px * var(--ui)) calc(24px * var(--ui)); align-items: stretch; }
.nw-sec-grid > .nw-briefs { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 calc(32px * var(--ui)); }
@media (min-width: 1280px) {
  .nw-sec-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.15fr); }
  .nw-sec-grid > .nw-briefs { grid-column: auto; display: flex; flex-direction: column; }
  /* trois brèves à côté, et les cartes illustrées grandissent jusqu'à la même hauteur */
  .nw-briefs > .nw-card:nth-child(n+4) { display: none; }
  .nw-sec-grid > .nw-card:not(.text) > .nw-hit { flex: 1 1 auto; }
  .nw-sec-grid > .nw-card:not(.text) .nw-img { flex: 1 1 auto; aspect-ratio: auto; min-height: calc(220px * var(--ui)); }
  .nw-briefs .nw-card.brief:first-child { border-top: 0; padding-top: 0; }
}
@media (max-width: 760px) {
  .nw-sec-grid { grid-template-columns: 1fr; }
  .nw-sec-grid > .nw-briefs { grid-template-columns: 1fr; }
}
.nw-brief-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, calc(300px * var(--ui))), 1fr)); gap: 0 calc(32px * var(--ui)); }
.nw-strip { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(calc(240px * var(--ui)), calc(280px * var(--ui))); align-items: stretch; gap: calc(24px * var(--ui)); overflow-x: auto; overflow-y: hidden; padding-bottom: calc(8px * var(--ui)); scroll-snap-type: x proximity; scrollbar-width: thin; }
.nw-strip > * { scroll-snap-align: start; }
.anime-news .nw-card.uniform { height: 100%; }
.anime-news .nw-card.uniform .nw-hit { height: 100%; }
.anime-news .nw-card.uniform .nw-body { flex: 1; }
.anime-news .nw-card.uniform .nw-img-fallback { position: absolute; inset: 0; display: grid; place-items: center; color: var(--faint); background: linear-gradient(135deg, var(--surface-2), var(--surface)); }
.anime-news .nw-card.uniform .nw-img-fallback svg { width: calc(34px * var(--ui)); height: calc(34px * var(--ui)); opacity: .55; }
.anime-news .nw-card.uniform .nw-img img { position: relative; z-index: 1; }
.anime-news .nw-card.uniform .nw-img .nw-when { z-index: 2; }
.anime-news .nw-card.uniform .nw-img.missing img { display: none; }
.news-credit { margin-top: calc(32px * var(--ui)); font-size: calc(12.5px * var(--ui)); }
.news-credit a { color: var(--text); text-decoration: underline; text-underline-offset: calc(3px * var(--ui)); }
.anime-news:empty { display: none; }

/* aperçu */
.modal.nw-modal { padding: 0; overflow: hidden; max-width: calc(880px * var(--ui)); }
.nw-preview { max-height: min(90vh, calc(920px * var(--ui))); overflow: auto; }
.nwp-top { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
.nwp-top:not(:has(.nwp-img)) { grid-template-columns: 1fr; }
.nwp-img { position: relative; background: var(--surface-2); min-height: 100%; max-height: calc(440px * var(--ui)); }
.nwp-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.nwp-body { display: flex; flex-direction: column; gap: calc(12px * var(--ui)); padding: calc(28px * var(--ui)) calc(28px * var(--ui)) calc(24px * var(--ui)); }
.nwp-title { margin: 0; font-family: var(--display); font-weight: var(--display-w); letter-spacing: var(--display-ls); font-size: calc(26px * var(--ui)); line-height: 1.15; }
.nwp-text { margin: 0; color: var(--muted); line-height: 1.65; }
.nwp-animes { display: flex; flex-direction: column; gap: calc(4px * var(--ui)); }
.nwp-animes .nw-animes { position: static; margin-top: calc(4px * var(--ui)); align-self: flex-start; }
.nwp-animes .nw-chip, .nwp-animes .nw-more { color: var(--muted); background: none; border-color: var(--line-2); backdrop-filter: none; }
.nwp-actions { display: flex; flex-wrap: wrap; align-items: center; gap: calc(10px * var(--ui)); margin-top: auto; padding-top: calc(10px * var(--ui)); }

@media (max-width: 900px) {
  .nw-front { grid-template-columns: 1fr; gap: calc(20px * var(--ui)); }
  .nw-side-in { position: static; }
  .nw-card.hero .nw-img { height: auto; aspect-ratio: 16 / 9; }
  .nwp-top { grid-template-columns: 1fr; }
  .nwp-img { aspect-ratio: 16 / 9; min-height: 0; }
}
@media (max-width: 640px) {
  .nw-grid-lead .nw-card.big { grid-column: auto; }
  .nw-card.side:not(.text) .nw-hit { grid-template-columns: calc(96px * var(--ui)) minmax(0, 1fr); }
  .nw-strip { grid-auto-columns: 78%; }
  .nwp-body { padding: calc(20px * var(--ui)) calc(18px * var(--ui)); }
  .nwp-title { font-size: calc(21px * var(--ui)); }
}

/* ---------- Publicité ---------- */
.ad-slot { margin: calc(48px * var(--ui)) 0 0; padding-top: calc(12px * var(--ui)); border-top: 1px solid var(--line); min-height: calc(120px * var(--ui)); }
.ad-slot small { display: block; margin-bottom: calc(8px * var(--ui)); font-size: calc(11px * var(--ui)); letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
.ad-slot ins[data-ad-status="unfilled"] { display: none !important; }
.ad-slot:has(ins[data-ad-status="unfilled"]) { display: none; }

/* ---------- Barre du haut : navigation centrée, recherche repliée en loupe (ordinateur) ---------- */
@media (min-width: 901px) {
  .topbar > .nav { position: absolute; left: 50%; top: 0; transform: translateX(-50%); }
  .top-search { width: calc(38px * var(--ui)); flex: none; z-index: 2; transition: width .25s cubic-bezier(.2, .8, .2, 1); }
  .top-search > .i { left: calc(11px * var(--ui)); color: var(--muted); transition: color .15s; }
  .top-search input { padding: 0 0 0 calc(38px * var(--ui)); border-color: transparent; background: transparent; cursor: pointer; transition: border-color .15s, background .15s, padding .25s; }
  .top-search input::placeholder { color: transparent; }
  .top-search:hover > .i { color: var(--text); }
  /* au survol ou en tapant : la barre s'ouvre vers la gauche, par-dessus la navigation */
  .top-search:hover, .top-search:focus-within { width: min(calc(360px * var(--ui)), 32vw); }
  .top-search:hover input, .top-search:focus-within input { padding-right: calc(14px * var(--ui)); border-color: var(--line-2); background: var(--surface-2); cursor: text; box-shadow: 0 calc(10px * var(--ui)) calc(30px * var(--ui)) calc(-10px * var(--ui)) rgba(0, 0, 0, .7); }
  .top-search:hover input::placeholder, .top-search:focus-within input::placeholder { color: var(--faint); }
}

/* ---------- Actus : statuts Lu / J'aime ---------- */
.nw-lu { display: none; align-items: center; gap: calc(3px * var(--ui)); color: var(--green); font-weight: 600; }
.nw-lu .i { width: calc(12px * var(--ui)); height: calc(12px * var(--ui)); }
.nw-card.read .nw-lu { display: inline-flex; }
/* article lu : image et texte assombris */
.nw-card.read .nw-img img { filter: brightness(.42) saturate(.55); }
.nw-card.read .nw-hit:hover .nw-img img { filter: brightness(.6) saturate(.7); }
.nw-card.read .nw-title { color: var(--faint); }
.nw-card.read .nw-excerpt, .nw-card.read .nw-when, .nw-card.read .nw-cat { opacity: .55; }
.nw-card.read.text { background: transparent; }
.nw-like.on .i, .nwp-like.on .i { fill: currentColor; }
.nwp-like.on { color: var(--accent); border-color: rgba(255, 90, 54, .45); }

/* langue de l'article : badge dans le coin haut droit ; le cœur se range à sa gauche */

/* ---------- Actus : compteurs publics, Enregistrer, conversation ---------- */
.nw-cc { display: inline-flex; align-items: center; gap: calc(4px * var(--ui)); color: var(--muted); }
.nw-cc[hidden] { display: none; }
.nw-cc .i { width: calc(12px * var(--ui)); height: calc(12px * var(--ui)); }
.nwp-social { display: flex; flex-wrap: wrap; align-items: center; gap: calc(10px * var(--ui)); padding-top: calc(12px * var(--ui)); border-top: 1px solid var(--line); }
.nwp-like .nw-n { margin-left: calc(2px * var(--ui)); }
.nwp-save.on { color: var(--text); border-color: var(--text); }
.nwp-save.on .i { fill: currentColor; }
.nwp-likers { display: inline-flex; align-items: center; gap: calc(8px * var(--ui)); font-size: calc(13px * var(--ui)); color: var(--muted); }
.nwp-likers a { color: var(--text); font-weight: 600; }
.nwp-avs { display: inline-flex; }
.nwp-avs .social-avatar { width: calc(24px * var(--ui)); height: calc(24px * var(--ui)); margin-left: calc(-6px * var(--ui)); border: calc(2px * var(--ui)) solid var(--bg-2); }
.nwp-avs .social-avatar:first-child { margin-left: 0; }
.nwp-talk { padding: calc(22px * var(--ui)) calc(28px * var(--ui)) calc(26px * var(--ui)); border-top: 1px solid var(--line); }
.nwp-talk h3 { margin: 0 0 calc(14px * var(--ui)); font-size: calc(17px * var(--ui)); }
.nwp-talk h3 small { color: var(--faint); font-weight: 400; margin-left: calc(6px * var(--ui)); }
@media (max-width: 640px) { .nwp-talk { padding: calc(18px * var(--ui)) calc(16px * var(--ui)) calc(22px * var(--ui)); } }

/* fil : article aimé ou commenté */
.fd-article { display: grid; grid-template-columns: calc(132px * var(--ui)) minmax(0, 1fr); gap: calc(14px * var(--ui)); width: 100%; margin-top: calc(10px * var(--ui)); padding: calc(10px * var(--ui)); border: 1px solid var(--line); border-radius: calc(10px * var(--ui)); background: var(--surface); color: inherit; font: inherit; text-align: left; cursor: pointer; transition: border-color .15s, background .15s; }
.fd-article:not(:has(.fd-art-img)) { grid-template-columns: 1fr; }
.fd-article:hover { border-color: var(--line-2); background: var(--surface-2); }
.fd-art-img { display: block; aspect-ratio: 16 / 10; border-radius: calc(6px * var(--ui)); overflow: hidden; background: var(--surface-2); }
.fd-art-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fd-art-text { display: flex; flex-direction: column; gap: calc(3px * var(--ui)); min-width: 0; }
.fd-art-text small { color: var(--faint); font-size: calc(12px * var(--ui)); }
.fd-art-text b { font-weight: 600; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.fd-art-text > span:last-child { color: var(--muted); font-size: calc(13px * var(--ui)); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.fd-cquote { white-space: pre-line; }
@media (max-width: 640px) { .fd-article { grid-template-columns: calc(96px * var(--ui)) minmax(0, 1fr); } }
.pu-articles { margin-top: calc(6px * var(--ui)); }

/* Fil dans Actus */
.nw-tabs a.has-dot::before { content: ""; position: absolute; top: calc(10px * var(--ui)); right: calc(4px * var(--ui)); width: calc(7px * var(--ui)); height: calc(7px * var(--ui)); border-radius: 50%; background: var(--accent); }
.feed-scope { margin-bottom: calc(18px * var(--ui)); }
.nw-animes { width: max-content; }

/* coin haut droit des cartes : cœur (avec compteur) et langue, même hauteur, alignés */
.nw-corner { position: absolute; z-index: 3; top: calc(10px * var(--ui)); right: calc(10px * var(--ui)); display: flex; align-items: center; gap: calc(6px * var(--ui)); }
.nw-like, .nw-lang { height: calc(28px * var(--ui)); display: inline-flex; align-items: center; justify-content: center; border-radius: calc(14px * var(--ui)); border: 1px solid rgba(238, 234, 225, .16); background: rgba(14, 13, 11, .8); backdrop-filter: blur(calc(6px * var(--ui))); color: #eeeae1; }
.nw-like { min-width: calc(28px * var(--ui)); gap: calc(5px * var(--ui)); padding: 0 calc(8px * var(--ui)); cursor: pointer; opacity: 0; transition: opacity .15s, color .15s, border-color .15s; }
.nw-like .i { width: calc(14px * var(--ui)); height: calc(14px * var(--ui)); flex: none; }
.nw-like .nw-n { font-size: calc(12px * var(--ui)); font-weight: 600; line-height: 1; }
.nw-like .nw-n:empty { display: none; }
.nw-card:hover .nw-like, .nw-like:focus-visible, .nw-like.on, .nw-like.has-n { opacity: 1; }
.nw-like:hover { border-color: rgba(238, 234, 225, .5); }
.nw-like.on { color: var(--accent); border-color: rgba(255, 90, 54, .45); }
.nw-like.on .i { fill: currentColor; }
.nw-lang { padding: 0 calc(9px * var(--ui)); font-style: normal; font-size: calc(11px * var(--ui)); font-weight: 700; letter-spacing: .06em; }
@media (hover: none) { .nw-like { opacity: 1; } }
/* cartes texte et colonne « À suivre » : le coin s'aligne sur la première ligne, sans fond */
.nw-card.text .nw-corner { top: calc(14px * var(--ui)); right: calc(14px * var(--ui)); }
.nw-card.brief .nw-corner { top: calc(12px * var(--ui)); right: 0; }
.nw-card.side .nw-corner { top: calc(10px * var(--ui)); right: 0; }
.nw-card.text .nw-like, .nw-card.text .nw-lang, .nw-card.side .nw-like, .nw-card.side .nw-lang { background: none; backdrop-filter: none; border-color: var(--line-2); color: var(--muted); }
.nw-card.text .nw-like.on, .nw-card.side .nw-like.on { color: var(--accent); border-color: rgba(255, 90, 54, .45); }
.nw-card.text .nw-body, .nw-card.side .nw-body { padding-right: calc(44px * var(--ui)); }
.nw-card.text:has(.nw-lang) .nw-body, .nw-card.side:has(.nw-lang) .nw-body { padding-right: calc(92px * var(--ui)); }

/* aperçu : cœur posé sur l'image, flèches de part et d'autre de la fenêtre */
.nwp-heart { position: absolute; top: calc(14px * var(--ui)); left: calc(14px * var(--ui)); }
.nwp-heart .nw-like { opacity: 1; height: calc(34px * var(--ui)); min-width: calc(34px * var(--ui)); padding: 0 calc(11px * var(--ui)); border-radius: calc(17px * var(--ui)); }
.nwp-heart .nw-like .i { width: calc(16px * var(--ui)); height: calc(16px * var(--ui)); }
.nwp-heart .nw-like .nw-n { font-size: calc(13px * var(--ui)); }
.nwp-social:not(:has(*:not(:empty))) { display: none; }
.nwp-likers:empty { display: none; }
.nwp-empty { margin: calc(10px * var(--ui)) 0 0; font-size: calc(13.5px * var(--ui)); }
.nwp-talk .tk-form { margin-bottom: calc(4px * var(--ui)); }
.nwp-arrow { position: fixed; z-index: 2; top: 50%; width: calc(48px * var(--ui)); height: calc(48px * var(--ui)); margin-top: calc(-24px * var(--ui)); display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line-2); background: var(--bg-2); color: var(--text); cursor: pointer; transition: background .15s, border-color .15s, opacity .15s; }
.nwp-arrow .i { width: calc(20px * var(--ui)); height: calc(20px * var(--ui)); }
.nwp-arrow:hover { border-color: var(--text); }
.nwp-arrow:disabled { opacity: .3; cursor: default; }
.nwp-arrow.prev { left: max(calc(12px * var(--ui)), calc(50vw - calc(440px * var(--ui)) - calc(72px * var(--ui)))); }
.nwp-arrow.next { right: max(calc(12px * var(--ui)), calc(50vw - calc(440px * var(--ui)) - calc(72px * var(--ui)))); }
@media (max-width: 1060px) { .nwp-arrow { top: auto; bottom: calc(16px * var(--ui)); margin-top: 0; } .nwp-arrow.prev { left: calc(50vw - calc(56px * var(--ui))); } .nwp-arrow.next { right: calc(50vw - calc(56px * var(--ui))); } }

/* cœur de la colonne « À suivre » : de la marge pour qu'il ne soit pas rogné au survol */
.nw-side-in { right: calc(-6px * var(--ui)); padding-right: calc(6px * var(--ui)); }
.nw-card.side .nw-corner { right: calc(2px * var(--ui)); }

/* onglets personnels : groupe à part, à droite, séparé des rubriques */
.nw-tabs-me { display: flex; gap: calc(4px * var(--ui)); margin-left: auto; padding-left: calc(14px * var(--ui)); border-left: 1px solid var(--line); }
.nw-tabs-me a .i { width: calc(15px * var(--ui)); height: calc(15px * var(--ui)); }
.nw-tabs-me a.on .i { color: var(--accent); }
.nw-tabs-me a[data-tab="aimes"].on .i { fill: currentColor; }

/* ---------- Fil en cartes ---------- */
.fdg { display: grid; grid-template-columns: minmax(0, 1fr) calc(290px * var(--ui)); gap: calc(32px * var(--ui)); align-items: start; }
.fdg-cards { columns: calc(300px * var(--ui)); column-gap: calc(20px * var(--ui)); }
.fdg-cards.is-empty { columns: auto; }
.fdg-card { break-inside: avoid; margin: 0 0 calc(20px * var(--ui)); border: 1px solid var(--line); border-radius: calc(12px * var(--ui)); background: var(--surface); overflow: hidden; }
.fdg-head { display: flex; flex-direction: column; width: 100%; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.fdg-img { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--surface-2); }
.fdg-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s; }
.fdg-head:hover .fdg-img img { transform: scale(1.03); }
.fdg-txt { display: flex; flex-direction: column; gap: calc(3px * var(--ui)); padding: calc(12px * var(--ui)) calc(14px * var(--ui)) calc(4px * var(--ui)); min-width: 0; }
.fdg-txt small { color: var(--faint); font-size: calc(12px * var(--ui)); }
.fdg-txt b { font-weight: 600; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.fdg-head:hover .fdg-txt b { text-decoration: underline; text-underline-offset: calc(3px * var(--ui)); text-decoration-color: var(--faint); }
.fdg-anime .fdg-head { flex-direction: row; align-items: center; gap: calc(12px * var(--ui)); padding: calc(12px * var(--ui)) calc(14px * var(--ui)) calc(4px * var(--ui)); }
.fdg-anime .fdg-txt { padding: 0; }
.fdg-cover { width: calc(46px * var(--ui)); height: calc(64px * var(--ui)); flex: none; border-radius: calc(5px * var(--ui)); overflow: hidden; background: var(--c, var(--surface-2)); }
.fdg-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fdg-sum { display: flex; align-items: center; gap: calc(8px * var(--ui)); padding: calc(8px * var(--ui)) calc(14px * var(--ui)) 0; font-size: calc(13px * var(--ui)); color: var(--muted); }
.fdg-sum-head { padding-top: calc(12px * var(--ui)); color: var(--text); }
.fdg-sum-head .i { width: calc(16px * var(--ui)); height: calc(16px * var(--ui)); color: var(--muted); }
.fdg-avs { display: inline-flex; }
.fdg-avs .social-avatar { width: calc(22px * var(--ui)); height: calc(22px * var(--ui)); margin-left: calc(-6px * var(--ui)); border: calc(2px * var(--ui)) solid var(--surface); }
.fdg-avs .social-avatar:first-child { margin-left: 0; }
.fdg-names { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fdg-counts { display: inline-flex; gap: calc(10px * var(--ui)); margin-left: auto; flex: none; }
.fdg-counts span { display: inline-flex; align-items: center; gap: calc(4px * var(--ui)); }
.fdg-counts .i { width: calc(13px * var(--ui)); height: calc(13px * var(--ui)); }
.fdg-lines { list-style: none; margin: calc(8px * var(--ui)) 0 0; padding: 0 calc(14px * var(--ui)) calc(12px * var(--ui)); }
.fdg-line { display: grid; grid-template-columns: calc(26px * var(--ui)) minmax(0, 1fr); gap: calc(10px * var(--ui)); padding: calc(8px * var(--ui)) 0; border-top: 1px solid var(--line); }
.fdg-line:first-child { border-top: 0; }
.fdg-av .social-avatar { width: calc(26px * var(--ui)); height: calc(26px * var(--ui)); }
.fdg-line p { margin: 0; font-size: calc(13.5px * var(--ui)); line-height: 1.45; color: var(--muted); }
.fdg-line time { margin-left: calc(8px * var(--ui)); font-size: calc(11.5px * var(--ui)); color: var(--faint); white-space: nowrap; }
.fdg-line .btn { margin-top: calc(6px * var(--ui)); }
.fdg-quote { margin: calc(4px * var(--ui)) 0 0 !important; padding: calc(2px * var(--ui)) 0 calc(2px * var(--ui)) calc(10px * var(--ui)); border-left: calc(2px * var(--ui)) solid var(--line-2); color: var(--text) !important; white-space: pre-line; overflow-wrap: anywhere; cursor: pointer; }
.fdg-quote:hover { border-color: var(--accent); }
.fdg-more { margin: calc(-4px * var(--ui)) calc(14px * var(--ui)) calc(12px * var(--ui)); font-size: calc(12.5px * var(--ui)); }
.fdg-more-wrap { column-span: all; display: flex; justify-content: center; padding: calc(6px * var(--ui)) 0 calc(10px * var(--ui)); }
.fdg-side { position: sticky; top: calc(var(--top-h) + calc(20px * var(--ui))); display: flex; flex-direction: column; gap: calc(22px * var(--ui)); }
.fdg-scopes { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: calc(12px * var(--ui)); overflow: hidden; }
.fdg-scopes a { display: flex; flex-direction: column; gap: calc(2px * var(--ui)); padding: calc(12px * var(--ui)) calc(14px * var(--ui)); border-top: 1px solid var(--line); color: var(--muted); transition: background .15s, color .15s; }
.fdg-scopes a:first-child { border-top: 0; }
.fdg-scopes a b { color: var(--text); font-weight: 600; font-size: calc(14px * var(--ui)); }
.fdg-scopes a small { font-size: calc(12px * var(--ui)); color: var(--faint); }
.fdg-scopes a:hover { background: var(--surface); }
.fdg-scopes a.on { background: var(--surface-2); box-shadow: inset calc(3px * var(--ui)) 0 0 var(--accent); }
.fdg-stats div { display: flex; flex-wrap: wrap; gap: calc(8px * var(--ui)) calc(16px * var(--ui)); margin-top: calc(8px * var(--ui)); }
.fdg-stats span { display: inline-flex; align-items: center; gap: calc(6px * var(--ui)); font-size: calc(13px * var(--ui)); color: var(--muted); }
.fdg-stats b { color: var(--text); font-size: calc(15px * var(--ui)); }
.fdg-stats .i { width: calc(14px * var(--ui)); height: calc(14px * var(--ui)); }
@media (max-width: 1000px) {
  .fdg { grid-template-columns: 1fr; }
  .fdg-side { position: static; order: -1; }
  .fdg-scopes { flex-direction: row; }
  .fdg-scopes a { flex: 1; border-top: 0; border-left: 1px solid var(--line); }
  .fdg-scopes a:first-child { border-left: 0; }
  .fdg-scopes a small { display: none; }
  #feed-side, .fdg-stats { display: none; }
}
@media (max-width: 640px) {
  .nw-tabs-me { padding-left: calc(8px * var(--ui)); }
  .nw-tabs-me a span { display: none; }
}

/* aperçu : Enregistrer posé en bas à gauche de l'image, discret tant que l'article n'est pas enregistré */
.nwp-save-img { position: absolute; left: calc(14px * var(--ui)); bottom: calc(14px * var(--ui)); }
.nwp-chip { height: calc(34px * var(--ui)); display: inline-flex; align-items: center; gap: calc(7px * var(--ui)); padding: 0 calc(13px * var(--ui)); border-radius: calc(17px * var(--ui)); border: 1px solid rgba(238, 234, 225, .22); background: rgba(14, 13, 11, .45); backdrop-filter: blur(calc(6px * var(--ui))); color: rgba(238, 234, 225, .78); font: 600 calc(13px * var(--ui)) var(--font); cursor: pointer; opacity: .8; transition: opacity .15s, background .15s, color .15s, border-color .15s; }
.nwp-chip .i { width: calc(15px * var(--ui)); height: calc(15px * var(--ui)); }
.nwp-chip:hover { opacity: 1; background: rgba(14, 13, 11, .75); color: #eeeae1; }
.nwp-chip.on { opacity: 1; background: rgba(14, 13, 11, .88); border-color: rgba(238, 234, 225, .5); color: #eeeae1; }
.nwp-chip.on .i { fill: currentColor; }

/* ---------- Mangas : ligne qui relie un anime et son manga, interface animes ou mangas ---------- */
.cross-link { display: flex; align-items: center; gap: calc(12px * var(--ui)); padding: calc(10px * var(--ui)) calc(12px * var(--ui)); border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); transition: border-color .15s; }
.cross-link:hover { border-color: var(--line-2); }
.cross-link img { width: calc(34px * var(--ui)); height: calc(48px * var(--ui)); object-fit: cover; border-radius: calc(4px * var(--ui)); flex: none; }
.cross-link span { display: flex; flex-direction: column; gap: calc(2px * var(--ui)); min-width: 0; flex: 1; }
.cross-link small { font: 500 calc(10.5px * var(--ui)) var(--mono); text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }
.cross-link b { overflow: hidden; font-size: calc(14px * var(--ui)); font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.cross-link em { font-style: normal; font-size: calc(12.5px * var(--ui)); color: var(--muted); }
.cross-link > .i { width: calc(16px * var(--ui)); height: calc(16px * var(--ui)); flex: none; color: var(--faint); }
a.src { color: inherit; }
a.src:hover b { color: var(--accent); }
.manga-sort select { min-width: calc(150px * var(--ui)); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 900px) { .detail-side .cross-link { grid-column: 1 / -1; } }
.manga-fallback { display: flex; align-items: center; gap: calc(8px * var(--ui)); }
.manga-fallback .i { width: calc(14px * var(--ui)); height: calc(14px * var(--ui)); flex: none; }
/* interface animes ou mangas : menu du logo (« Komacal ▾ ») */
.logo-wrap { position: relative; z-index: 3; display: flex; align-items: center; gap: calc(2px * var(--ui)); flex: none; }
.mode-btn { display: grid; place-items: center; width: calc(26px * var(--ui)); height: calc(26px * var(--ui)); border: 0; border-radius: calc(6px * var(--ui)); background: none; color: var(--muted); cursor: pointer; transition: color .15s, background .15s; }
.mode-btn:hover, .mode-btn[aria-expanded="true"] { color: var(--text); background: var(--surface-3); }
.mode-btn .i { width: calc(15px * var(--ui)); height: calc(15px * var(--ui)); transition: transform .2s; }
.mode-btn[aria-expanded="true"] .i { transform: rotate(180deg); }
.mode-menu { position: absolute; left: 0; top: calc(100% + calc(14px * var(--ui))); z-index: 70; width: calc(290px * var(--ui)); padding: calc(6px * var(--ui)); border-radius: calc(10px * var(--ui)); background: #1a1916; border: 1px solid var(--line-2); box-shadow: 0 calc(18px * var(--ui)) calc(40px * var(--ui)) calc(-12px * var(--ui)) rgba(0, 0, 0, 0.8); animation: pmIn .18s cubic-bezier(.2, .8, .2, 1) both; transform-origin: top left; }
.mode-menu button { display: flex; align-items: center; gap: calc(12px * var(--ui)); width: 100%; padding: calc(10px * var(--ui)); border: 0; border-radius: calc(7px * var(--ui)); background: none; color: var(--text); text-align: left; cursor: pointer; }
.mode-menu button:hover, .mode-menu button:focus-visible { background: var(--surface-2); }
.mode-menu button .seal { width: calc(34px * var(--ui)); height: calc(34px * var(--ui)); font-size: calc(19px * var(--ui)); background: var(--surface-3); color: var(--muted); transform: none; }
.mode-menu button[aria-checked="true"] .seal { background: var(--accent); color: var(--accent-ink); transform: rotate(-4deg); }
.mode-menu b { display: block; font-size: calc(14px * var(--ui)); }
.mode-menu small { display: block; margin-top: calc(2px * var(--ui)); font-size: calc(12px * var(--ui)); color: var(--muted); }
/* Sorties de l'interface mangas : derniers chapitres */
.mrel-intro { margin: calc(-12px * var(--ui)) 0 calc(18px * var(--ui)); }
.mrel-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, calc(420px * var(--ui))), 1fr)); gap: 0 calc(32px * var(--ui)); border-top: 1px solid var(--line); }
.mrel { display: grid; grid-template-columns: calc(64px * var(--ui)) minmax(0, 1fr) auto; align-items: center; gap: calc(16px * var(--ui)); padding: calc(14px * var(--ui)) 0; border-bottom: 1px solid var(--line); }
.mrel-cover img { display: block; width: calc(64px * var(--ui)); height: calc(92px * var(--ui)); object-fit: cover; border-radius: calc(5px * var(--ui)); }
.mrel-main { display: flex; flex-direction: column; gap: calc(6px * var(--ui)); min-width: 0; }
.mrel-title { overflow: hidden; font-weight: 600; font-size: calc(15px * var(--ui)); text-overflow: ellipsis; white-space: nowrap; }
.mrel-title:hover { color: var(--accent); }
.mrel-latest { display: flex; flex-wrap: wrap; gap: calc(4px * var(--ui)) calc(10px * var(--ui)); margin: 0; font-size: calc(13.5px * var(--ui)); }
.mrel-latest span { color: var(--muted); }
.mrel-prev { display: flex; flex-wrap: wrap; gap: calc(4px * var(--ui)) calc(10px * var(--ui)); margin: 0; color: var(--muted); font-size: calc(12px * var(--ui)); }
.mrel-prev span + span::before { content: "\00b7  "; }
.mrel .btn { white-space: nowrap; }
@media (max-width: 600px) { .mrel { grid-template-columns: calc(52px * var(--ui)) minmax(0, 1fr); } .mrel-cover img { width: calc(52px * var(--ui)); height: calc(75px * var(--ui)); } .mrel .btn { grid-column: 2; justify-self: start; } }
/* Tomes d'un manga : couvertures en rangée défilante, tomes lus en couleur avec une coche */
.vol-head { display: flex; align-items: baseline; justify-content: space-between; gap: calc(12px * var(--ui)); }
.vol-count { font: 500 calc(12px * var(--ui)) var(--mono); color: var(--muted); }
.vol-bar { margin: calc(10px * var(--ui)) 0 calc(14px * var(--ui)); }
.vol-grid { display: grid; grid-auto-flow: column; grid-auto-columns: calc(96px * var(--ui)); gap: calc(12px * var(--ui)); overflow-x: auto; padding-bottom: calc(8px * var(--ui)); scroll-snap-type: x proximity; }
.vol { display: flex; flex-direction: column; gap: calc(6px * var(--ui)); padding: 0; border: 0; background: none; color: var(--muted); text-align: left; cursor: pointer; scroll-snap-align: start; }
.vol-cover { position: relative; display: grid; place-items: center; aspect-ratio: 2 / 3; overflow: hidden; border-radius: calc(5px * var(--ui)); border: 1px solid var(--line); background: var(--surface-2); }
.vol-cover img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(.85) brightness(.55); opacity: 0; transition: opacity .45s ease, filter .2s; }
.vol-cover img.ok { opacity: 1; }
/* couverture pas encore chargée (ou source de secours en cours d'essai) : reflet de chargement */
.vol-cover.sk, .vol-cover:has(> img:not(.ok)), .card-cover:has(> img:not(.ok)) { background: linear-gradient(100deg, var(--surface) 30%, var(--surface-2) 50%, var(--surface) 70%); background-size: 300% 100%; animation: shimmer 1.4s infinite linear; }
.vol-cover b { font: 600 calc(22px * var(--ui)) var(--display); color: var(--faint); }
.vol-cover i { position: absolute; right: calc(5px * var(--ui)); bottom: calc(5px * var(--ui)); display: grid; place-items: center; width: calc(22px * var(--ui)); height: calc(22px * var(--ui)); border-radius: 50%; background: var(--accent); color: var(--accent-ink); }
.vol-cover i .i { width: calc(13px * var(--ui)); height: calc(13px * var(--ui)); }
.vol.read .vol-cover img, .vol:hover .vol-cover img { filter: none; }
.vol.read { color: var(--text); }
.vol.last .vol-cover { border-color: var(--accent); }
.vol-n { font: 500 calc(12px * var(--ui)) var(--mono); }
@media (max-width: 600px) { .vol-grid { grid-auto-columns: calc(78px * var(--ui)); } }

/* --- 1v1 : salons, mises, bandeau du duel pendant la partie */
.duel-open { text-decoration: none; }
.nav [data-nav="jeu"], .bottom-nav [data-nav="jeu"] { position: relative; }
.nav-duel-todo { min-width: calc(18px * var(--ui)); height: calc(18px * var(--ui)); padding: 0 calc(5px * var(--ui)); display: inline-grid; place-items: center; border-radius: calc(999px * var(--ui)); background: var(--accent); color: var(--accent-ink); font: 700 calc(10px * var(--ui))/1 var(--mono); }
.nav-duel-todo[hidden] { display: none; }
.bottom-nav .nav-duel-todo { position: absolute; top: calc(3px * var(--ui)); left: calc(50% + calc(5px * var(--ui))); box-shadow: 0 0 0 calc(2px * var(--ui)) var(--bg); }
.duel-intro { max-width: calc(640px * var(--ui)); margin: calc(-6px * var(--ui)) 0 calc(26px * var(--ui)); }
.duel-grid { display: grid; grid-template-columns: minmax(calc(300px * var(--ui)), calc(380px * var(--ui))) 1fr; gap: calc(28px * var(--ui)); align-items: start; }
.duel-new { position: sticky; top: calc(var(--top-h) + calc(16px * var(--ui))); padding: calc(20px * var(--ui)); border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-2); display: grid; gap: calc(16px * var(--ui)); }
.duel-create { justify-content: center; }
.duel-err { margin: calc(-6px * var(--ui)) 0 0; min-height: 1em; color: var(--red); font-size: calc(13px * var(--ui)); }
.duel-err:empty { display: none; }
.duel-lists { display: grid; gap: calc(28px * var(--ui)); min-width: 0; }
.duel-sec-h { display: flex; align-items: baseline; gap: calc(10px * var(--ui)); margin-bottom: calc(10px * var(--ui)); }
.duel-list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.duel-row { display: grid; grid-template-columns: calc(150px * var(--ui)) 1fr auto; align-items: center; gap: calc(14px * var(--ui)); padding: calc(12px * var(--ui)) calc(14px * var(--ui)); border-top: 1px solid var(--line); }
.duel-row:first-child { border-top: 0; }
.duel-row.invite, .duel-row.todo { background: var(--bg-2); box-shadow: inset calc(3px * var(--ui)) 0 0 var(--accent); }
.duel-game { display: grid; }
.duel-game b { font-weight: 600; }
.duel-game .jp { font-family: var(--jp); font-size: calc(11px * var(--ui)); color: var(--faint); }
.duel-meta { display: flex; align-items: center; flex-wrap: wrap; gap: calc(8px * var(--ui)) calc(14px * var(--ui)); min-width: 0; }
.duel-who { display: inline-flex; align-items: center; gap: calc(8px * var(--ui)); min-width: 0; }
.duel-who b { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.duel-who .social-avatar { width: calc(28px * var(--ui)); height: calc(28px * var(--ui)); }
.duel-chips { display: inline-flex; gap: calc(6px * var(--ui)); }
.duel-chips i { white-space: nowrap; font-style: normal; font-size: calc(12px * var(--ui)); padding: calc(2px * var(--ui)) calc(8px * var(--ui)); border-radius: calc(999px * var(--ui)); border: 1px solid var(--line-2); color: var(--muted); }
.duel-chips i.st { color: var(--amber); border-color: color-mix(in srgb, var(--amber) 40%, transparent); }
.duel-act { display: flex; align-items: center; justify-content: flex-end; gap: calc(8px * var(--ui)); flex-wrap: wrap; }
.duel-wait, .duel-go { display: inline-flex; align-items: center; gap: calc(6px * var(--ui)); font-size: calc(13px * var(--ui)); color: var(--muted); }
.duel-go { color: var(--text); font-weight: 600; }
.duel-wait .i, .duel-go .i { width: calc(15px * var(--ui)); height: calc(15px * var(--ui)); }
.duel-go .i { color: var(--accent); }
.duel-res { display: inline-grid; justify-items: end; text-decoration: none; line-height: 1.2; }
.duel-res b { font-weight: 700; }
.duel-res small { font-size: calc(12px * var(--ui)); color: var(--muted); }
.duel-res.win b { color: var(--green); }
.duel-res.lose b { color: var(--red); }
.duel-res.draw b, .duel-res.refund b { color: var(--muted); }
.duel-empty { padding: calc(14px * var(--ui)); border: 1px dashed var(--line-2); border-radius: var(--radius); margin: 0; }
/* bandeau en haut du jeu */
.duel-bar.pop { animation: duel-pop .5s ease; }
@keyframes duel-pop { 40% { transform: scale(1.015); border-color: var(--accent); } }
.duel-state { display: flex; align-items: center; justify-content: flex-end; gap: calc(12px * var(--ui)); flex-wrap: wrap; }
.duel-state .duel-res b { font-size: calc(18px * var(--ui)); }
/* pendant un duel, les gains en spins des jeux ne s'affichent pas (la mise se règle à la fin) */
.mg-duel .px-pot, .mg-duel .mg-done-n, .mg-duel .wt-gain, .mg-duel .mg-replay, .mg-duel .mg-done-t small, .mg-duel .px-hist { display: none !important; }
/* ni « Retour » en fin de partie : il sortait du duel (on attend le verdict sur la page) */
.mg-duel .wt-acts, .mg-duel .btn-row:has(> a[href="#/jeu"]) { display: none !important; }
/* page du résultat */
@media (max-width: 900px) {
  .duel-grid { grid-template-columns: 1fr; }
  .duel-new { position: static; }
  .duel-lists { order: -1; }
}
@media (max-width: 620px) {
  .duel-row { grid-template-columns: 1fr; gap: calc(8px * var(--ui)); }
  .duel-act { justify-content: flex-start; }
  .duel-state { grid-column: 1 / -1; justify-content: space-between; }
  .mg-head-r .duel-open span { display: none; }
}

/* Arène 1v1 — identité visuelle et hiérarchie de la page */
.duels-page { --duel-glow: color-mix(in srgb, var(--accent) 24%, transparent); }
.duel-head { display: flex; align-items: flex-end; justify-content: space-between; gap: calc(24px * var(--ui)); margin: calc(14px * var(--ui)) 0 calc(28px * var(--ui)); padding: 0 0 calc(20px * var(--ui)); border-bottom: 1px solid var(--line); }
.duel-head-copy { min-width: 0; }
.duel-head h1 { display: flex; align-items: baseline; gap: calc(10px * var(--ui)); margin: 0 0 calc(6px * var(--ui)); font: var(--display-w) clamp(calc(34px * var(--ui)), 5vw, calc(50px * var(--ui)))/1 var(--display); letter-spacing: var(--display-ls); }
.duel-head h1 .jp { color: var(--faint); font: 500 calc(15px * var(--ui)) var(--jp); letter-spacing: .06em; }
.duel-head-copy p { max-width: calc(760px * var(--ui)); margin: 0; line-height: 1.5; }
.duel-head-meta { display: flex; align-items: center; gap: calc(10px * var(--ui)); flex: none; }
.duel-head-meta > span { display: grid; min-width: calc(70px * var(--ui)); padding: calc(8px * var(--ui)) calc(12px * var(--ui)); border: 1px solid var(--line); border-radius: calc(10px * var(--ui)); background: var(--bg-2); }
.duel-head-meta b { font: 750 calc(17px * var(--ui)) var(--display); font-variant-numeric: tabular-nums; }
.duel-head-meta small { color: var(--faint); font: 600 calc(9px * var(--ui)) var(--mono); text-transform: uppercase; letter-spacing: .05em; }
.duel-grid { grid-template-columns: 1fr; gap: calc(22px * var(--ui)); }
.duel-new { position: static; grid-template-columns: 1fr; align-items: stretch; gap: calc(14px * var(--ui)); min-height: calc(218px * var(--ui)); padding: calc(18px * var(--ui)); overflow: hidden; border-color: color-mix(in srgb, var(--accent) 28%, var(--line)); border-radius: calc(var(--radius) * 1.35); background: linear-gradient(155deg, color-mix(in srgb, var(--bg-2) 96%, var(--accent)), var(--bg-2)); box-shadow: 0 calc(18px * var(--ui)) calc(50px * var(--ui)) rgba(0,0,0,.08); }
.duel-new::before { content: ''; grid-column: 1 / -1; height: calc(3px * var(--ui)); margin: calc(-18px * var(--ui)) calc(-18px * var(--ui)) 0; background: linear-gradient(90deg, var(--accent), var(--amber), transparent); }
.duel-step-actions { display: flex; align-items: center; justify-content: flex-end; gap: calc(8px * var(--ui)); flex: none; }
.duel-step-actions .btn { min-height: calc(38px * var(--ui)); border-radius: calc(9px * var(--ui)); }
.duel-create { min-height: calc(38px * var(--ui)); padding-inline: calc(16px * var(--ui)); border-radius: calc(9px * var(--ui)); box-shadow: 0 calc(10px * var(--ui)) calc(28px * var(--ui)) var(--duel-glow); white-space: nowrap; }
.duel-err { margin: calc(-7px * var(--ui)) 0 0; }
/* Création d'un salon : écran de combat (toi · 対 · adversaire) sur trame manga, rounds, jeton de mise */
.duel-new.arena { grid-template-columns: minmax(0, 1fr); gap: 0; min-height: 0; padding: 0; background: var(--bg-2); }
.duel-new.arena::before { display: none; }
.ar-stage { position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: calc(12px * var(--ui)); min-height: calc(210px * var(--ui)); padding: calc(34px * var(--ui)) clamp(calc(16px * var(--ui)), 5vw, calc(64px * var(--ui))) calc(26px * var(--ui)); overflow: hidden;
  background: linear-gradient(104deg, color-mix(in srgb, var(--accent) 20%, transparent) 0 46%, transparent 46% 54%, color-mix(in srgb, var(--blue) 13%, transparent) 54%), var(--bg); }
.ar-stage::before { content: ''; position: absolute; inset: -30% auto -30% calc(50% - calc(2px * var(--ui))); z-index: -1; width: calc(4px * var(--ui)); background: linear-gradient(var(--accent), var(--amber)); box-shadow: 0 0 calc(26px * var(--ui)) var(--accent); transform: rotate(14deg); }
.ar-stage::after { content: ''; position: absolute; inset: 0; z-index: -2; background: radial-gradient(circle, rgba(255, 255, 255, .09) calc(1.1px * var(--ui)), transparent calc(1.5px * var(--ui))) 0 0 / calc(7px * var(--ui)) calc(7px * var(--ui)); mask: linear-gradient(90deg, #000, transparent 32% 68%, #000); }
.ar-kicker { position: absolute; top: calc(14px * var(--ui)); left: calc(18px * var(--ui)); }
.ar-watermark { position: absolute; right: calc(14px * var(--ui)); top: 50%; z-index: -1; translate: 0 -50%; writing-mode: vertical-rl; white-space: nowrap; color: transparent; font: 900 clamp(calc(48px * var(--ui)), 6vw, calc(76px * var(--ui)))/1 var(--jp); -webkit-text-stroke: 1px rgba(255, 255, 255, .08); pointer-events: none; }
.ar-side { display: grid; justify-items: center; gap: calc(3px * var(--ui)); min-width: 0; text-align: center; }
.ar-side .social-avatar, .ar-ghost { width: calc(76px * var(--ui)); height: calc(76px * var(--ui)); margin-bottom: calc(9px * var(--ui)); border-radius: 50%; font-size: calc(26px * var(--ui)); }
.ar-side .social-avatar .i { width: calc(30px * var(--ui)); height: calc(30px * var(--ui)); }
.ar-me .social-avatar { box-shadow: 0 0 0 calc(3px * var(--ui)) var(--bg), 0 0 0 calc(5px * var(--ui)) var(--accent), 0 calc(14px * var(--ui)) calc(34px * var(--ui)) var(--duel-glow); }
.ar-opp .social-avatar, .ar-ghost { box-shadow: 0 0 0 calc(3px * var(--ui)) var(--bg), 0 0 0 calc(5px * var(--ui)) var(--blue), 0 calc(14px * var(--ui)) calc(34px * var(--ui)) color-mix(in srgb, var(--blue) 22%, transparent); }
.ar-ghost { display: grid; place-items: center; background: repeating-linear-gradient(-45deg, var(--surface-2) 0 calc(6px * var(--ui)), var(--surface) calc(6px * var(--ui)) calc(12px * var(--ui))); color: var(--muted); font: 800 calc(30px * var(--ui)) var(--display); }
.ar-side small { color: var(--faint); font: 800 calc(10px * var(--ui)) var(--font); letter-spacing: .16em; text-transform: uppercase; }
.ar-side b { max-width: 100%; overflow: hidden; font: var(--display-w) calc(20px * var(--ui))/1.15 var(--display); letter-spacing: var(--display-ls); text-overflow: ellipsis; white-space: nowrap; }
.ar-tag { margin-top: calc(5px * var(--ui)); padding: calc(3px * var(--ui)) calc(10px * var(--ui)); border-radius: calc(99px * var(--ui)); background: rgba(0, 0, 0, .4); color: var(--muted); font-size: calc(11px * var(--ui)); font-weight: 600; }
.ar-me .ar-tag { color: var(--amber); }
.ar-vs { display: grid; justify-items: center; gap: calc(8px * var(--ui)); }
.ar-kanji { color: var(--text); font: 900 clamp(calc(60px * var(--ui)), 8vw, calc(92px * var(--ui)))/.95 var(--jp); text-shadow: calc(4px * var(--ui)) calc(4px * var(--ui)) 0 var(--accent), calc(-3px * var(--ui)) calc(-3px * var(--ui)) 0 color-mix(in srgb, var(--blue) 75%, transparent); transform: rotate(-7deg); }
.ar-setup { display: flex; align-items: center; gap: calc(6px * var(--ui)); color: var(--muted); font-size: calc(11px * var(--ui)); white-space: nowrap; }
.ar-setup b { color: var(--text); font-size: calc(12px * var(--ui)); }
.ar-setup span { padding: calc(2px * var(--ui)) calc(7px * var(--ui)); border: 1px solid var(--line-2); border-radius: calc(99px * var(--ui)); }
.ar-pot { display: flex; align-items: baseline; gap: calc(5px * var(--ui)); padding: calc(6px * var(--ui)) calc(13px * var(--ui)); border: 1px solid color-mix(in srgb, var(--amber) 50%, transparent); border-radius: calc(99px * var(--ui)); background: rgba(0, 0, 0, .5); white-space: nowrap; }
.ar-pot small { color: var(--muted); font-size: calc(11px * var(--ui)); }
.ar-pot b { color: var(--amber); font: 800 calc(20px * var(--ui))/1 var(--display); font-variant-numeric: tabular-nums; }
.ar-rounds { display: grid; grid-template-columns: repeat(3, 1fr); border-block: 1px solid var(--line); }
.ar-rounds button { position: relative; display: grid; gap: 1px; padding: calc(11px * var(--ui)) clamp(calc(12px * var(--ui)), 2.4vw, calc(22px * var(--ui))); border: 0; background: none; color: var(--faint); font: inherit; text-align: left; cursor: pointer; transition: color .2s, background .2s; }
.ar-rounds button + button { border-left: 1px solid var(--line); }
.ar-rounds small { font: 800 calc(9px * var(--ui)) var(--font); letter-spacing: .18em; text-transform: uppercase; }
.ar-rounds b { font-size: calc(13px * var(--ui)); font-weight: 650; }
.ar-rounds button::after { content: ''; position: absolute; left: 0; bottom: -1px; width: 0; height: calc(2px * var(--ui)); background: var(--accent); transition: width .35s ease; }
.ar-rounds button:hover { color: var(--text); }
.ar-rounds .on { background: linear-gradient(transparent, var(--duel-glow)); color: var(--text); }
.ar-rounds .on small { color: var(--accent); }
.ar-rounds .on::after { width: 100%; }
.ar-rounds .done { color: var(--muted); }
.ar-rounds .done::after { width: 100%; background: color-mix(in srgb, var(--accent) 40%, transparent); }
.ar-body { min-height: calc(128px * var(--ui)); padding: calc(18px * var(--ui)) clamp(calc(16px * var(--ui)), 3vw, calc(24px * var(--ui))) calc(4px * var(--ui)); }
.ar-locked { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: calc(14px * var(--ui)); padding: calc(20px * var(--ui)) clamp(calc(16px * var(--ui)), 3vw, calc(24px * var(--ui))); border-top: 1px solid var(--line); background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 10%, transparent), transparent); }
.ar-locked-icon { display: grid; place-items: center; width: calc(42px * var(--ui)); height: calc(42px * var(--ui)); border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--line)); border-radius: 50%; background: var(--duel-glow); color: var(--accent); }
.ar-locked-icon .i { width: calc(18px * var(--ui)); height: calc(18px * var(--ui)); }
.ar-locked-copy { display: grid; gap: calc(3px * var(--ui)); min-width: 0; }
.ar-locked-copy .qz-kicker { margin-bottom: calc(2px * var(--ui)); }
.ar-locked-copy b { font-size: calc(14px * var(--ui)); }
.ar-locked-copy small { color: var(--muted); line-height: 1.4; }
.ar-locked-acts { display: flex; gap: calc(8px * var(--ui)); }
.ar-locked .btn { white-space: nowrap; }
.ar-games { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: calc(10px * var(--ui)); }
.ar-game { position: relative; display: grid; align-content: end; justify-items: start; gap: calc(9px * var(--ui)); min-height: calc(108px * var(--ui)); padding: calc(12px * var(--ui)); overflow: hidden; border: 1px solid var(--line); border-radius: calc(12px * var(--ui)); background: var(--surface); color: var(--muted); font: inherit; text-align: left; cursor: pointer; transition: transform .18s ease, border-color .18s, background .18s; }
.ar-game-jp { position: absolute; top: calc(9px * var(--ui)); right: calc(7px * var(--ui)); writing-mode: vertical-rl; white-space: nowrap; color: var(--surface-3); font: 800 calc(19px * var(--ui))/1 var(--jp); letter-spacing: .04em; transition: color .18s; }
.ar-game i { display: grid; place-items: center; width: calc(30px * var(--ui)); height: calc(30px * var(--ui)); border-radius: calc(8px * var(--ui)); background: var(--surface-2); color: var(--muted); transition: transform .18s, background .18s, color .18s; }
.ar-game i .i { width: calc(15px * var(--ui)); height: calc(15px * var(--ui)); }
.ar-game b { position: relative; color: var(--text); font-size: calc(13px * var(--ui)); font-weight: 650; line-height: 1.15; }
.ar-game:hover { transform: translateY(calc(-2px * var(--ui))); border-color: var(--line-2); }
.ar-game.on { border-color: var(--accent); background: linear-gradient(160deg, var(--duel-glow), var(--surface) 70%); }
.ar-game.on .ar-game-jp { color: color-mix(in srgb, var(--accent) 55%, transparent); }
.ar-game.on i { background: var(--accent); color: var(--accent-ink); transform: rotate(-6deg); }
.ar-rules { display: grid; grid-template-columns: repeat(auto-fit, minmax(calc(240px * var(--ui)), 1fr)); gap: calc(18px * var(--ui)) calc(28px * var(--ui)); }
.ar-field { display: grid; align-content: start; gap: calc(9px * var(--ui)); }
.ar-field > small { line-height: 1.4; }
.ar-lbl { color: var(--faint); font: 800 calc(10px * var(--ui)) var(--font); letter-spacing: .16em; text-transform: uppercase; }
.ar-levels { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(8px * var(--ui)); }
.ar-level { display: grid; justify-items: center; gap: calc(5px * var(--ui)); padding: calc(11px * var(--ui)) calc(6px * var(--ui)) calc(10px * var(--ui)); border: 1px solid var(--line); border-radius: calc(12px * var(--ui)); background: var(--surface); color: var(--muted); font: inherit; cursor: pointer; transition: border-color .18s, color .18s, background .18s; }
.ar-level span { color: var(--surface-3); font: 800 calc(26px * var(--ui))/1 var(--jp); transition: color .18s; }
.ar-level b { font-size: calc(12px * var(--ui)); font-weight: 650; }
.ar-level i { display: flex; gap: calc(3px * var(--ui)); }
.ar-level em { width: calc(10px * var(--ui)); height: calc(3px * var(--ui)); border-radius: calc(2px * var(--ui)); background: currentColor; opacity: .55; }
.ar-level:hover { border-color: var(--line-2); color: var(--text); }
.ar-level.on { border-color: var(--accent); background: linear-gradient(var(--duel-glow), var(--surface)); color: var(--text); }
.ar-level.on span { color: var(--accent); }
.ar-level.on em { background: var(--accent); opacity: 1; }
.ar-chips { display: flex; align-items: center; gap: calc(14px * var(--ui)); }
.ar-chip-btn { display: grid; place-items: center; width: calc(38px * var(--ui)); height: calc(38px * var(--ui)); border: 1px solid var(--line-2); border-radius: 50%; background: var(--surface); color: var(--text); cursor: pointer; transition: border-color .15s, color .15s; }
.ar-chip-btn .i { width: calc(15px * var(--ui)); height: calc(15px * var(--ui)); }
.ar-chip-btn:hover:not(:disabled) { border-color: var(--amber); color: var(--amber); }
.ar-chip-btn:disabled { opacity: .35; cursor: default; }
/* jeton de mise : tranche crantée dorée, face sombre gravée d'un double filet, chiffre en or */
.ar-coin { position: relative; isolation: isolate; display: grid; place-items: center; align-content: center; gap: calc(2px * var(--ui)); width: calc(52px * var(--ui)); height: calc(52px * var(--ui)); border-radius: 50%; background: repeating-conic-gradient(var(--amber) 0 5deg, color-mix(in srgb, var(--amber) 55%, #000) 5deg 10deg); box-shadow: 0 calc(2px * var(--ui)) 0 color-mix(in srgb, var(--amber) 35%, #000), 0 calc(6px * var(--ui)) calc(14px * var(--ui)) calc(-6px * var(--ui)) rgba(0, 0, 0, .6); color: var(--amber); }
.ar-coin::before { content: ""; position: absolute; inset: calc(3.5px * var(--ui)); z-index: -1; border-radius: 50%; background: var(--surface); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--amber) 60%, transparent), inset 0 0 0 calc(3px * var(--ui)) var(--surface), inset 0 0 0 calc(4px * var(--ui)) color-mix(in srgb, var(--amber) 22%, transparent); }
.ar-coin b { font: 800 calc(19px * var(--ui))/1 var(--display); font-variant-numeric: tabular-nums; }
.ar-coin small { color: var(--muted); font: 700 calc(6px * var(--ui)) var(--font); letter-spacing: .16em; text-transform: uppercase; }
.ar-targets { display: grid; grid-template-columns: repeat(auto-fit, minmax(calc(190px * var(--ui)), 1fr)); gap: calc(10px * var(--ui)); }
.ar-target { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: calc(2px * var(--ui)) calc(12px * var(--ui)); padding: calc(14px * var(--ui)); border: 1px solid var(--line); border-radius: calc(12px * var(--ui)); background: var(--surface); color: var(--text); font: inherit; text-align: left; cursor: pointer; transition: border-color .18s, background .18s; }
.ar-target i { grid-row: span 2; display: grid; place-items: center; width: calc(38px * var(--ui)); height: calc(38px * var(--ui)); border-radius: 50%; background: var(--surface-2); color: var(--muted); transition: background .18s, color .18s; }
.ar-target i .i { width: calc(16px * var(--ui)); height: calc(16px * var(--ui)); }
.ar-target b { font-size: calc(14px * var(--ui)); font-weight: 650; }
.ar-target small { color: var(--muted); font-size: calc(11.5px * var(--ui)); line-height: 1.35; }
.ar-target:hover { border-color: var(--line-2); }
.ar-target.on { border-color: var(--blue); background: linear-gradient(160deg, color-mix(in srgb, var(--blue) 15%, transparent), var(--surface) 70%); }
.ar-target.on i { background: var(--blue); color: var(--bg); }
.ar-target.bot.on { border-color: var(--accent); background: linear-gradient(160deg, var(--duel-glow), var(--surface) 70%); }
.ar-target.bot.on i { background: var(--accent); color: var(--accent-ink); }
.ar-friend { margin-top: calc(12px * var(--ui)); }
.ar-foot { display: flex; align-items: center; justify-content: space-between; gap: calc(14px * var(--ui)); padding: calc(14px * var(--ui)) clamp(calc(16px * var(--ui)), 3vw, calc(24px * var(--ui))) calc(18px * var(--ui)); }
.ar-foot .duel-err { margin: 0; }
.ar-foot .duel-step-actions { margin-left: auto; }
@media (max-width: 760px) {
  .ar-games { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: calc(112px * var(--ui)); overflow-x: auto; padding-bottom: calc(4px * var(--ui)); scroll-snap-type: x proximity; }
  .ar-game { scroll-snap-align: start; }
}
@media (max-width: 620px) {
  .ar-stage { gap: calc(6px * var(--ui)); min-height: 0; padding: calc(40px * var(--ui)) calc(12px * var(--ui)) calc(20px * var(--ui)); }
  .ar-side .social-avatar, .ar-ghost { width: calc(54px * var(--ui)); height: calc(54px * var(--ui)); margin-bottom: calc(6px * var(--ui)); }
  .ar-side b { font-size: calc(15px * var(--ui)); }
  .ar-tag { font-size: calc(10px * var(--ui)); }
  .ar-kanji { font-size: calc(52px * var(--ui)); }
  .ar-watermark { display: none; }
  .ar-setup span { display: none; }
  .ar-pot small:first-child:not(:only-child) { display: none; }
  .ar-rounds small { letter-spacing: .1em; }
  .ar-rounds b { font-size: calc(12px * var(--ui)); }
  .ar-locked { grid-template-columns: auto minmax(0, 1fr); }
  .ar-locked-acts { grid-column: 1 / -1; }
  .ar-locked-acts .btn { flex: 1; justify-content: center; }
  .ar-foot { align-items: stretch; flex-direction: column-reverse; }
  .ar-foot .btn { flex: 1; justify-content: center; }
}
.duel-lists { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: calc(22px * var(--ui)); }
.duel-sec { min-width: 0; }
.duel-sec-h { align-items: center; justify-content: space-between; margin-bottom: calc(9px * var(--ui)); }
.duel-sec-h > span { display: inline-flex; align-items: center; gap: calc(8px * var(--ui)); }
.duel-sec-h > small { display: grid; place-items: center; min-width: calc(25px * var(--ui)); height: calc(25px * var(--ui)); padding: 0 calc(7px * var(--ui)); border: 1px solid var(--line); border-radius: calc(99px * var(--ui)); color: var(--muted); font: 700 calc(11px * var(--ui)) var(--mono); }
.duel-sec-icon { display: grid; place-items: center; width: calc(28px * var(--ui)); height: calc(28px * var(--ui)); border-radius: calc(8px * var(--ui)); background: var(--surface-2); color: var(--accent); }
.duel-sec-icon .i { width: calc(14px * var(--ui)); height: calc(14px * var(--ui)); }
.duel-list { display: grid; gap: calc(9px * var(--ui)); overflow: visible; border: 0; border-radius: 0; }
.duel-row { position: relative; grid-template-columns: minmax(calc(150px * var(--ui)), .75fr) minmax(calc(210px * var(--ui)), 1fr) auto; min-height: calc(82px * var(--ui)); padding: calc(13px * var(--ui)) calc(14px * var(--ui)); overflow: hidden; border: 1px solid var(--line); border-radius: calc(14px * var(--ui)); background: var(--bg-2); transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.duel-row:first-child { border-top: 1px solid var(--line); }
.duel-row:hover { z-index: 1; transform: translateY(calc(-2px * var(--ui))); border-color: var(--line-2); box-shadow: 0 calc(12px * var(--ui)) calc(30px * var(--ui)) rgba(0,0,0,.08); }
.duel-row.invite, .duel-row.todo { background: linear-gradient(100deg, var(--duel-glow), var(--bg-2) 38%); box-shadow: inset calc(3px * var(--ui)) 0 0 var(--accent); }
.duel-game { display: flex; align-items: center; gap: calc(10px * var(--ui)); }
.duel-game > span { display: grid; }
.duel-game-mark { display: grid; place-items: center; width: calc(38px * var(--ui)); height: calc(38px * var(--ui)); flex: none; border-radius: calc(11px * var(--ui)); background: var(--surface-2); color: var(--accent); }
.duel-game-mark .i { width: calc(18px * var(--ui)); height: calc(18px * var(--ui)); }
.duel-who .social-avatar { width: calc(34px * var(--ui)); height: calc(34px * var(--ui)); }
.duel-resume { display: inline-flex; align-items: center; justify-content: flex-end; gap: calc(6px * var(--ui)); padding: calc(5px * var(--ui)) 0; color: var(--accent); font-size: calc(12px * var(--ui)); font-weight: 750; text-decoration: none; }
.duel-resume .i { width: calc(14px * var(--ui)); height: calc(14px * var(--ui)); transition: transform .18s ease; }
.duel-resume:hover .i { transform: translateX(calc(3px * var(--ui))); }
.duel-empty { display: flex; align-items: center; gap: calc(14px * var(--ui)); min-height: calc(78px * var(--ui)); padding: calc(14px * var(--ui)) calc(18px * var(--ui)); border-radius: calc(14px * var(--ui)); background: linear-gradient(105deg, color-mix(in srgb, var(--surface) 54%, transparent), transparent); }
.duel-empty b { color: color-mix(in srgb, var(--accent) 38%, var(--faint)); font: 600 calc(30px * var(--ui)) var(--jp); }
.duel-empty span { color: var(--muted); font-size: calc(13px * var(--ui)); }
@media (max-width: 1040px) {
  .duel-row { grid-template-columns: 1fr auto; }
  .duel-row .duel-meta { grid-column: 1; }
  .duel-row .duel-act { grid-column: 2; grid-row: 1 / span 2; }
}
@media (max-width: 900px) {
  .duel-lists { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .duel-head { align-items: flex-start; flex-direction: column; gap: calc(14px * var(--ui)); margin-bottom: calc(22px * var(--ui)); }
  .duel-head-meta { width: 100%; }
  .duel-head-meta > span { flex: 1; }
  .duel-new { min-height: 0; }
  .duel-step-actions .btn { flex: 1; justify-content: center; }
  .duel-row { grid-template-columns: 1fr; }
  .duel-row .duel-meta, .duel-row .duel-act { grid-column: 1; grid-row: auto; }
  .duel-act { justify-content: stretch; }
  .duel-act .btn { flex: 1; justify-content: center; }
  .duel-resume { width: 100%; justify-content: flex-end; }
}

/* 1v1 en direct : salle d'attente, compte à rebours, partie de l'adversaire */
.duel-dot { display: inline-block; width: calc(8px * var(--ui)); height: calc(8px * var(--ui)); border-radius: 50%; background: var(--faint); flex: none; }
.duel-dot.on { background: var(--green); box-shadow: 0 0 0 calc(3px * var(--ui)) color-mix(in srgb, var(--green) 25%, transparent); }
@keyframes duel-count { from { transform: scale(1.6); opacity: 0; } 30% { opacity: 1; } to { transform: scale(1); } }
.duel-opp.ping { animation: duel-ping .7s ease; }
@keyframes duel-ping { 30% { border-color: var(--accent); } }
.duel-opp-sc { margin-left: auto; font-weight: 600; }
.duel-opp-b { display: flex; align-items: center; gap: calc(12px * var(--ui)); flex-wrap: wrap; }
.duel-opp.ping .duel-opp-chips li:last-child, .duel-opp.ping .duel-wt-row:last-child { animation: duel-chip .35s ease both; }
.duel-opp-chips li.ok { color: var(--green); }
.duel-opp-chips li.ko span { text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--red) 70%, transparent); }
@keyframes duel-chip { from { transform: scale(.8); opacity: 0; } }
.duel-opp-n { display: inline-flex; align-items: baseline; gap: calc(6px * var(--ui)); }
.duel-opp-n b { font: 700 calc(22px * var(--ui)) var(--display); }
.duel-opp-n small { color: var(--muted); }
.duel-wt { display: flex; flex-wrap: wrap; gap: calc(6px * var(--ui)) calc(12px * var(--ui)); }
.duel-wt-row { display: inline-flex; gap: calc(2px * var(--ui)); }
.duel-wt-row i { width: calc(20px * var(--ui)); height: calc(22px * var(--ui)); display: grid; place-items: center; border-radius: calc(3px * var(--ui)); font: 700 calc(12px * var(--ui)) var(--font); font-style: normal; color: #fff; background: #2b5d9c; }
.duel-wt-row i.r { background: #d6342b; }
.duel-wt-row i.y { background: #b98a10; border-radius: 50%; }

/* quiz en 1v1 : cases de l'adversaire, résumé de fin */
.duel-qz-dots { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: calc(4px * var(--ui)); }
.duel-qz-dots li { width: calc(24px * var(--ui)); height: calc(24px * var(--ui)); display: grid; place-items: center; border-radius: calc(6px * var(--ui)); border: 1px solid var(--line-2); font-size: calc(11px * var(--ui)); color: var(--faint); }
.duel-qz-dots li .i { width: calc(13px * var(--ui)); height: calc(13px * var(--ui)); }
.duel-qz-dots li.answered { border-color: var(--amber); color: var(--amber); }
.duel-qz-dots li.ok { border-color: transparent; background: color-mix(in srgb, var(--green) 22%, transparent); color: var(--green); }
.duel-qz-dots li.ko { border-color: transparent; background: color-mix(in srgb, var(--red) 18%, transparent); color: var(--red); }
.qz-progress { margin: 0 0 calc(12px * var(--ui)); }
.qd-sum { display: grid; justify-items: center; gap: calc(4px * var(--ui)); padding: calc(10px * var(--ui)) 0 calc(18px * var(--ui)); }
.qd-sum .mg-score { font: 800 calc(56px * var(--ui))/1 var(--display); }
.qd-sum .mg-score small { font-size: calc(22px * var(--ui)); color: var(--muted); }
.qd-recap { list-style: none; margin: 0 auto; padding: 0; max-width: calc(680px * var(--ui)); display: grid; gap: calc(6px * var(--ui)); }
.qd-recap li { display: grid; grid-template-columns: calc(18px * var(--ui)) 1fr auto; align-items: center; gap: calc(10px * var(--ui)); padding: calc(8px * var(--ui)) calc(12px * var(--ui)); border: 1px solid var(--line); border-radius: var(--radius-sm); font-size: calc(14px * var(--ui)); }
.qd-recap li .i { width: calc(16px * var(--ui)); height: calc(16px * var(--ui)); }
.qd-recap li.ok .i { color: var(--green); }
.qd-recap li.ko .i { color: var(--red); }
.qd-recap li b { font-weight: 600; font-size: calc(13px * var(--ui)); color: var(--muted); text-align: right; }
@media (max-width: 620px) { .qd-recap li { grid-template-columns: calc(18px * var(--ui)) 1fr; } .qd-recap li b { grid-column: 2; text-align: left; } }
/* Écran de combat hors création : salle d'attente, résultat (mêmes .ar-stage), bandeau compact pendant la partie */
.duel-arena { max-width: calc(880px * var(--ui)); margin: 0 auto; }
.duel-arena .ar-stage { min-height: calc(260px * var(--ui)); }
.ar-note { margin: 0; padding: calc(12px * var(--ui)) calc(20px * var(--ui)); text-align: center; }
.ar-note + .ar-foot { padding-top: 0; }
.duel-arena .ar-foot { justify-content: center; }
.ar-verdict { font: var(--display-w) calc(15px * var(--ui)) var(--display); letter-spacing: var(--display-ls); text-align: center; }
.ar-count { color: var(--amber); font: 900 clamp(calc(64px * var(--ui)), 9vw, calc(96px * var(--ui)))/.95 var(--display); font-variant-numeric: tabular-nums; text-shadow: calc(4px * var(--ui)) calc(4px * var(--ui)) 0 var(--accent); }
.ar-count.pop { animation: duel-count .9s ease-out; }
.ar-side .ar-tag { display: inline-flex; align-items: center; gap: calc(6px * var(--ui)); }
.ar-side .ar-score { display: grid; justify-items: center; gap: 1px; max-width: 100%; padding: calc(6px * var(--ui)) calc(12px * var(--ui)); border-radius: calc(12px * var(--ui)); }
.ar-side .ar-score b { max-width: none; overflow: visible; color: var(--text); font: 650 calc(13px * var(--ui))/1.25 var(--font); letter-spacing: 0; white-space: normal; }
.ar-score small { color: var(--faint); font: 600 calc(11px * var(--ui)) var(--font); letter-spacing: 0; text-transform: none; }
.ar-side { position: relative; transition: filter .4s, opacity .4s; }
.ar-side.ar-lost { filter: grayscale(.9) brightness(.7); }
.ar-stamp { position: absolute; top: calc(-6px * var(--ui)); left: calc(50% + calc(18px * var(--ui))); z-index: 2; display: grid; place-items: center; width: calc(50px * var(--ui)); height: calc(50px * var(--ui)); border: calc(3px * var(--ui)) solid var(--accent); border-radius: 50%; background: color-mix(in srgb, var(--bg) 70%, transparent); color: var(--accent); font: 900 calc(25px * var(--ui))/1 var(--jp); box-shadow: 0 0 0 calc(2px * var(--ui)) color-mix(in srgb, var(--accent) 30%, transparent), 0 calc(8px * var(--ui)) calc(20px * var(--ui)) rgba(0, 0, 0, .4); transform: rotate(-12deg); animation: stampIn .5s .35s cubic-bezier(.3, 1.6, .5, 1) both; }
.duel-final.win .ar-verdict-kanji { color: var(--green); text-shadow: calc(4px * var(--ui)) calc(4px * var(--ui)) 0 color-mix(in srgb, var(--green) 35%, var(--bg)), calc(-3px * var(--ui)) calc(-3px * var(--ui)) 0 var(--accent); }
.duel-final.lose .ar-verdict-kanji { color: var(--red); }
.duel-final.draw .ar-verdict-kanji, .duel-final.refund .ar-verdict-kanji, .duel-final.wait .ar-verdict-kanji { color: var(--muted); text-shadow: calc(3px * var(--ui)) calc(3px * var(--ui)) 0 var(--surface-3); }
.duel-final.win .ar-verdict { color: var(--green); }
.duel-final.lose .ar-verdict { color: var(--red); }
.duel-final .ar-verdict { font-size: calc(22px * var(--ui)); }
.duel-final .ar-pot b { font-size: calc(16px * var(--ui)); }
.duel-final.wait .ar-verdict-kanji { animation: txt 1.8s ease-in-out infinite; }
@media (max-width: 620px) {
  .duel-arena .ar-stage { min-height: 0; }
  .ar-stamp { width: calc(38px * var(--ui)); height: calc(38px * var(--ui)); font-size: calc(19px * var(--ui)); left: calc(50% + calc(10px * var(--ui))); }
  .ar-side .ar-score b { font-size: calc(11px * var(--ui)); }
  .duel-final .ar-verdict { font-size: calc(17px * var(--ui)); }
  .duel-arena .ar-foot { flex-direction: column-reverse; }
}
/* Page 1v1 sur un seul écran : intro dans l'infobulle « ? », en-tête et panneau compacts, listes à droite sur grand écran */
/* infobulle accrochée au titre (pas au « ? ») et jamais plus large que l'écran : sinon, même cachée, elle élargit la page sur téléphone */
.duel-help { position: static; align-self: center; margin-left: calc(2px * var(--ui)); }
.duel-head h1 { position: relative; }
.duel-help .qz-help-tip { top: calc(100% + calc(8px * var(--ui))); left: 0; right: auto; width: min(calc(290px * var(--ui)), calc(100vw - calc(32px * var(--ui)))); color: var(--muted); font: 400 calc(13px * var(--ui))/1.5 var(--font); letter-spacing: 0; }
.duel-help .qz-help-tip .qz-kicker { display: block; margin: 0 0 calc(6px * var(--ui)); }
.duels-page.page { padding-top: calc(var(--top-h) + calc(14px * var(--ui))); padding-bottom: calc(24px * var(--ui)); }
.duel-head { align-items: center; margin: calc(4px * var(--ui)) 0 calc(16px * var(--ui)); padding: 0 0 calc(14px * var(--ui)); }
.duel-head h1 { align-items: center; margin: 0; font-size: clamp(calc(30px * var(--ui)), 4vw, calc(40px * var(--ui))); }
/* le trait du milieu s'interrompt derrière le texte central, posé sur des pastilles opaques */
.ar-stage::before { mask: linear-gradient(#000 0 46%, transparent 50% 78%, #000 82%); }
.ar-setup { padding: calc(3px * var(--ui)) calc(6px * var(--ui)) calc(3px * var(--ui)) calc(10px * var(--ui)); border-radius: calc(99px * var(--ui)); background: var(--bg); }
.ar-pot { background: var(--bg); }
.ar-verdict { padding: calc(2px * var(--ui)) calc(12px * var(--ui)); border-radius: calc(99px * var(--ui)); background: var(--bg); }
@media (min-width: 621px) {
  .duel-new:not(.duel-arena) .ar-stage { min-height: calc(172px * var(--ui)); padding-top: calc(30px * var(--ui)); padding-bottom: calc(18px * var(--ui)); }
  .duel-new:not(.duel-arena) .ar-side .social-avatar, .duel-new:not(.duel-arena) .ar-ghost { width: calc(62px * var(--ui)); height: calc(62px * var(--ui)); margin-bottom: calc(7px * var(--ui)); }
  .duel-new:not(.duel-arena) .ar-kanji { font-size: clamp(calc(52px * var(--ui)), 6vw, calc(74px * var(--ui))); }
  .ar-rounds button { padding-block: calc(9px * var(--ui)); }
  .ar-body { min-height: 0; padding-top: calc(14px * var(--ui)); }
  .ar-game { min-height: calc(90px * var(--ui)); }
  .ar-foot { padding-block: calc(12px * var(--ui)) calc(14px * var(--ui)); }
}
@media (min-width: 1100px) {
  .duel-grid { grid-template-columns: minmax(0, 1fr) minmax(calc(280px * var(--ui)), calc(340px * var(--ui))); align-items: start; }
  /* colonne à hauteur d'écran : seul l'historique « Terminés » défile (la colonne entière seulement s'il n'a plus de place) */
  .duel-lists { display: flex; flex-direction: column; gap: calc(16px * var(--ui)); max-height: calc(100dvh - var(--top-h) - calc(158px * var(--ui))); overflow-y: auto; scrollbar-width: thin; }
  .duel-lists > .duel-sec { flex: none; }
  .duel-lists > .duel-hist { display: flex; flex: 1 1 auto; flex-direction: column; min-height: calc(180px * var(--ui)); }
  .duel-lists .duel-hist-list { flex: 1 1 auto; min-height: 0; max-height: none; }
  .duel-lists .duel-row { grid-template-columns: 1fr; gap: calc(6px * var(--ui)); min-height: 0; padding: calc(10px * var(--ui)) calc(12px * var(--ui)); }
  .duel-lists .duel-game .jp { display: none; }
  .duel-lists .duel-game-mark { width: calc(30px * var(--ui)); height: calc(30px * var(--ui)); border-radius: calc(9px * var(--ui)); }
  .duel-lists .duel-row .duel-meta, .duel-lists .duel-row .duel-act { grid-column: 1; grid-row: auto; }
  .duel-lists .duel-empty { min-height: 0; padding: calc(12px * var(--ui)) calc(14px * var(--ui)); }
  .duel-lists .duel-empty b { font-size: calc(22px * var(--ui)); }
}
/* bande sombre du milieu : portée par le contenu central, donc toujours centrée sur lui et assez large ; plus de trait */
.ar-stage { background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 20%, transparent) 0 50%, color-mix(in srgb, var(--blue) 13%, transparent) 50%), var(--bg); }
.ar-stage::before { display: none; }
.ar-vs { position: relative; }
.ar-vs::before { content: ''; position: absolute; inset: calc(-400px * var(--ui)) calc(-30px * var(--ui)); z-index: -1; background: var(--bg); transform: skewX(-10deg); }
@media (max-width: 620px) {
  .duel-head { align-items: flex-start; }
}
/* Bandeau « en direct » pendant un duel : toi (rouge) · EN DIRECT, même partie en même temps · adversaire (bleu, mis à jour toutes les 1,5 s) */
.ar-live { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: stretch; margin: 0 0 calc(14px * var(--ui)); overflow: hidden; border: 1px solid var(--line); border-radius: calc(14px * var(--ui)); background: var(--bg); }
.ar-live-side { display: flex; align-items: center; gap: calc(10px * var(--ui)) calc(16px * var(--ui)); flex-wrap: wrap; min-width: 0; padding: calc(10px * var(--ui)) calc(16px * var(--ui)); }
.ar-live-side.ar-me { background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 20%, transparent), color-mix(in srgb, var(--accent) 6%, transparent)); }
.ar-live-side.ar-opp { flex-direction: row-reverse; text-align: right; background: linear-gradient(270deg, color-mix(in srgb, var(--blue) 15%, transparent), color-mix(in srgb, var(--blue) 4%, transparent)); }
.ar-live-side.pop { animation: duel-pop .5s ease; }
.ar-live-who { display: flex; align-items: center; gap: calc(10px * var(--ui)); min-width: 0; }
.ar-opp .ar-live-who { flex-direction: row-reverse; }
.ar-live-who > span { display: grid; min-width: 0; }
.ar-live-who small { color: var(--faint); font: 800 calc(9px * var(--ui)) var(--font); letter-spacing: .16em; text-transform: uppercase; }
.ar-live-who b { overflow: hidden; font: var(--display-w) calc(16px * var(--ui))/1.15 var(--display); letter-spacing: var(--display-ls); text-overflow: ellipsis; white-space: nowrap; }
.ar-live-who .social-avatar { width: calc(38px * var(--ui)); height: calc(38px * var(--ui)); flex: none; }
.ar-me .ar-live-who .social-avatar { box-shadow: 0 0 0 calc(2px * var(--ui)) var(--bg), 0 0 0 calc(4px * var(--ui)) var(--accent); }
.ar-opp .ar-live-who .social-avatar { box-shadow: 0 0 0 calc(2px * var(--ui)) var(--bg), 0 0 0 calc(4px * var(--ui)) var(--blue); }
.ar-live-state { display: flex; align-items: center; gap: calc(10px * var(--ui)); }
.ar-opp .ar-live-state { flex-direction: row-reverse; }
.ar-live-st { display: inline-flex; align-items: center; gap: calc(7px * var(--ui)); padding: calc(4px * var(--ui)) calc(10px * var(--ui)); border-radius: calc(99px * var(--ui)); background: rgba(0, 0, 0, .35); color: var(--muted); font-size: calc(12px * var(--ui)); font-weight: 600; white-space: nowrap; }
.ar-live-st .duel-dot.on { animation: live-dot 1.4s ease-in-out infinite; }
@keyframes live-dot { 50% { box-shadow: 0 0 0 calc(6px * var(--ui)) color-mix(in srgb, var(--green) 0%, transparent); } }
.ar-live .duel-opp-sc { font-size: calc(13px * var(--ui)); font-weight: 700; white-space: nowrap; }
.ar-live .duel-opp-b { flex: 1 1 100%; justify-content: flex-end; }
.ar-live .ar-me .duel-me-b { justify-content: flex-start; }
.ar-live .duel-opp-b:has(.duel-wt) { flex: 0 1 auto; }
.ar-live .duel-wt-row i { width: calc(14px * var(--ui)); height: calc(16px * var(--ui)); font-size: calc(9px * var(--ui)); }
.ar-live .duel-opp-chips { justify-content: flex-end; }
.ar-live-mid { position: relative; display: grid; justify-items: center; align-content: center; gap: calc(4px * var(--ui)); padding: calc(8px * var(--ui)) calc(26px * var(--ui)); text-align: center; }
.ar-live-mid::before { content: ''; position: absolute; inset: calc(-40px * var(--ui)) calc(-14px * var(--ui)); z-index: 0; background: var(--bg); transform: skewX(-10deg); }
.ar-live-mid > * { position: relative; }
.ar-live-mid small { color: var(--muted); font-size: calc(11px * var(--ui)); white-space: nowrap; }
.ar-live .ar-pot { padding: calc(2px * var(--ui)) calc(9px * var(--ui)); gap: calc(4px * var(--ui)); }
.ar-live .ar-pot b { font-size: calc(14px * var(--ui)); }
.ar-live .ar-pot small { font-size: calc(10px * var(--ui)); }
.mg-duel .back-games { margin-bottom: 0; }
.mg-duel .game-head { margin-bottom: calc(10px * var(--ui)); }
.mg-duel.page { padding-top: calc(var(--top-h) + calc(14px * var(--ui))); padding-bottom: calc(24px * var(--ui)); }
@media (max-width: 760px) {
  .ar-live { grid-template-columns: 1fr 1fr; }
  .ar-live-mid { grid-column: 1 / -1; grid-row: 1; grid-auto-flow: column; justify-content: center; align-items: center; gap: calc(10px * var(--ui)); padding: calc(6px * var(--ui)) calc(10px * var(--ui)); border-bottom: 1px solid var(--line); }
  .ar-live-mid::before { display: none; }
  .ar-live-side { padding: calc(8px * var(--ui)) calc(10px * var(--ui)); gap: calc(6px * var(--ui)); }
  .ar-live-who .social-avatar { width: calc(30px * var(--ui)); height: calc(30px * var(--ui)); }
  .ar-live-who b { font-size: calc(13px * var(--ui)); }
  .ar-live-st { padding: calc(3px * var(--ui)) calc(8px * var(--ui)); font-size: calc(11px * var(--ui)); }
  .ar-live-mid > small { display: none; }
}
/* clavier de Wordtaku sur téléphone : les largeurs minimales des touches (38 px × 10) dépassaient de l'écran */
@media (max-width: 520px) {
  .wt-zone.wt-play .wt-kb { width: 100%; gap: calc(5px * var(--ui)); }
  .wt-zone.wt-play .wt-kb div { gap: calc(4px * var(--ui)); }
  .wt-zone.wt-play .wt-kb button { min-width: 0; font-size: calc(14px * var(--ui)); }
  .wt-zone.wt-play .wt-kb button.wide { min-width: 0; font-size: calc(11px * var(--ui)); }
}
/* historique des duels terminés : lignes fines et discrètes, sans cartes */
.duel-hist .duel-sec-h { margin-bottom: calc(2px * var(--ui)); }
.duel-hist-list { display: grid; align-content: start; max-height: calc(420px * var(--ui)); margin: 0; padding: 0 calc(4px * var(--ui)) 0 0; overflow-y: auto; list-style: none; scrollbar-width: thin; }
.duel-hist-row { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto auto; align-items: center; gap: calc(8px * var(--ui)); padding: calc(7px * var(--ui)) calc(6px * var(--ui)); border-bottom: 1px solid var(--line); border-radius: calc(6px * var(--ui)); color: var(--muted); font-size: calc(12px * var(--ui)); text-decoration: none; transition: background .15s, color .15s; }
.duel-hist-list li:last-child .duel-hist-row { border-bottom: 0; }
.duel-hist-row:hover { background: var(--surface); color: var(--text); }
.duel-hist-row > i { display: grid; color: var(--faint); }
.duel-hist-row > i .i { width: calc(13px * var(--ui)); height: calc(13px * var(--ui)); }
.duel-hist-g { color: var(--text); font-weight: 600; white-space: nowrap; }
.duel-hist-who { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.duel-hist-row b { font-weight: 700; }
.duel-hist-row small { min-width: 4ch; color: var(--faint); font-size: calc(11px * var(--ui)); text-align: right; }
.duel-hist-row.win b { color: var(--green); }
.duel-hist-row.lose b { color: var(--red); }
.duel-hist-row.draw b, .duel-hist-row.refund b { color: var(--muted); }
/* choix de l'ami à défier : cartes avatar + pseudo, la carte choisie passe en bleu (couleur de l'adversaire) */
.ar-roster-h { display: flex; align-items: center; justify-content: space-between; gap: calc(12px * var(--ui)); margin-bottom: calc(8px * var(--ui)); }
.ar-roster-q { max-width: calc(220px * var(--ui)); height: calc(32px * var(--ui)); font-size: calc(13px * var(--ui)); }
.ar-roster { display: grid; grid-auto-flow: column; grid-auto-columns: calc(96px * var(--ui)); gap: calc(8px * var(--ui)); overflow-x: auto; padding: calc(4px * var(--ui)) calc(2px * var(--ui)) calc(6px * var(--ui)); scrollbar-width: thin; }
.ar-pal { display: grid; justify-items: center; gap: calc(6px * var(--ui)); min-width: 0; padding: calc(9px * var(--ui)) calc(6px * var(--ui)) calc(8px * var(--ui)); border: 1px solid var(--line); border-radius: calc(12px * var(--ui)); background: var(--surface); color: var(--muted); font: inherit; cursor: pointer; transition: transform .18s, border-color .18s, background .18s, color .18s; }
.ar-pal[hidden] { display: none; }
.ar-pal .social-avatar { width: calc(40px * var(--ui)); height: calc(40px * var(--ui)); box-shadow: 0 0 0 calc(2px * var(--ui)) var(--surface), 0 0 0 calc(3px * var(--ui)) var(--line-2); transition: box-shadow .18s; }
.ar-pal b { max-width: 100%; overflow: hidden; font-size: calc(12px * var(--ui)); font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.ar-pal:hover { transform: translateY(calc(-2px * var(--ui))); border-color: var(--line-2); color: var(--text); }
.ar-pal.on { border-color: var(--blue); background: linear-gradient(170deg, color-mix(in srgb, var(--blue) 18%, transparent), var(--surface) 75%); color: var(--text); }
.ar-pal.on .social-avatar { box-shadow: 0 0 0 calc(2px * var(--ui)) var(--surface), 0 0 0 calc(4px * var(--ui)) var(--blue), 0 calc(8px * var(--ui)) calc(20px * var(--ui)) color-mix(in srgb, var(--blue) 30%, transparent); }
/* 1v1 en plusieurs manches : choix 3 / 5, score du match (bandeau en direct, salle), récapitulatif des manches */
.ar-bo { grid-template-columns: repeat(2, 1fr); }
.ar-bo .ar-level span { font: 900 calc(26px * var(--ui))/1 var(--display); }
.ar-bo .ar-level small { color: var(--faint); font-size: calc(10.5px * var(--ui)); line-height: 1.3; text-align: center; }
.ar-round { display: inline-grid; justify-items: center; gap: calc(3px * var(--ui)); }
.ar-round small { color: var(--text); font: 800 calc(14px * var(--ui)) var(--font); letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; }
.ar-round b { display: inline-flex; align-items: baseline; gap: calc(6px * var(--ui)); font: 900 calc(22px * var(--ui))/1 var(--display); font-variant-numeric: tabular-nums; }
.ar-round b i { color: var(--faint); font-style: normal; font-weight: 600; }
.ar-live .ar-round b { font-size: calc(17px * var(--ui)); }
.duel-rounds { display: grid; gap: calc(4px * var(--ui)); max-width: calc(520px * var(--ui)); margin: calc(14px * var(--ui)) auto 0; padding: 0; list-style: none; counter-reset: none; }
.duel-rounds li { display: grid; grid-template-columns: calc(74px * var(--ui)) minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: calc(10px * var(--ui)); padding: calc(7px * var(--ui)) calc(12px * var(--ui)); border: 1px solid var(--line); border-radius: calc(10px * var(--ui)); background: var(--surface); font-size: calc(12.5px * var(--ui)); }
.duel-rounds li small { color: var(--faint); font: 800 calc(9.5px * var(--ui)) var(--font); letter-spacing: .12em; text-transform: uppercase; }
.duel-rounds li span:last-child { text-align: right; color: var(--muted); }
.duel-rounds li b { padding: calc(2px * var(--ui)) calc(9px * var(--ui)); border-radius: calc(99px * var(--ui)); background: var(--surface-3); color: var(--muted); font-size: calc(11px * var(--ui)); }
.duel-rounds li.win b { background: color-mix(in srgb, var(--green) 20%, transparent); color: var(--green); }
.duel-rounds li.lose b { background: color-mix(in srgb, var(--red) 18%, transparent); color: var(--red); }
@media (max-width: 520px) {
  .duel-rounds li { grid-template-columns: 1fr auto 1fr; gap: calc(6px * var(--ui)); }
  .duel-rounds li small { grid-column: 1 / -1; }
}

/* verdict plein écran (fin de manche, fin du duel) : le sceau 勝 / 敗 / 引 s'abat sur une bande en diagonale */
.duel-fx { position: fixed; inset: 0; z-index: 295; overflow: hidden; display: grid; place-items: center; padding: calc(16px * var(--ui)); background: rgba(0, 0, 0, .74); animation: duel-fx-bg .3s ease both; --fx: var(--muted); }
.duel-fx.win { --fx: var(--green); }
.duel-fx.lose { --fx: var(--red); }
/* la bande suit la hauteur du contenu (bouton compris) */
.duel-fx-in::before { content: ''; position: absolute; top: calc(-44px * var(--ui)); bottom: calc(-44px * var(--ui)); left: -100vw; right: -100vw; z-index: -1; background: var(--bg); border-block: calc(3px * var(--ui)) solid var(--fx); transform: skewY(-6deg); animation: duel-fx-band .45s cubic-bezier(.2, .9, .3, 1) both; }
.duel-fx-in { position: relative; isolation: isolate; display: grid; justify-items: center; gap: calc(8px * var(--ui)); max-width: calc(460px * var(--ui)); text-align: center; }
.duel-fx-kanji { display: grid; place-items: center; width: calc(132px * var(--ui)); height: calc(132px * var(--ui)); margin: calc(4px * var(--ui)) 0 calc(2px * var(--ui)); border: calc(5px * var(--ui)) solid var(--fx); border-radius: 50%; color: var(--fx); font: 900 calc(76px * var(--ui))/1 var(--jp); box-shadow: 0 0 0 calc(4px * var(--ui)) color-mix(in srgb, var(--fx) 25%, transparent), 0 calc(18px * var(--ui)) calc(40px * var(--ui)) rgba(0, 0, 0, .5); transform: rotate(-12deg); animation: duel-fx-stamp .55s .2s cubic-bezier(.3, 1.6, .5, 1) both; }
.duel-fx-title { color: var(--fx); font: var(--display-w) clamp(calc(30px * var(--ui)), 7vw, calc(48px * var(--ui)))/1 var(--display); letter-spacing: var(--display-ls); text-transform: uppercase; animation: duel-fx-up .4s .5s ease-out both; }
.duel-fx.draw .duel-fx-title, .duel-fx.refund .duel-fx-title { color: var(--text); }
.duel-fx-scores { display: flex; align-items: center; gap: calc(10px * var(--ui)); color: var(--muted); font-size: calc(13px * var(--ui)); animation: duel-fx-up .4s .6s ease-out both; }
.duel-fx-scores i { color: var(--faint); font-size: calc(11px * var(--ui)); font-style: normal; }
.duel-fx-pts { display: flex; align-items: center; gap: calc(12px * var(--ui)); animation: duel-fx-up .4s .65s ease-out both; }
.duel-fx-pts b { font: 900 calc(34px * var(--ui))/1 var(--display); font-variant-numeric: tabular-nums; }
.duel-fx-pts i { color: var(--faint); font-style: normal; font-size: calc(22px * var(--ui)); }
.duel-fx-pts small { max-width: calc(110px * var(--ui)); overflow: hidden; color: var(--muted); font-size: calc(12px * var(--ui)); text-overflow: ellipsis; white-space: nowrap; }
.duel-fx-sub { padding: calc(3px * var(--ui)) calc(12px * var(--ui)); border-radius: calc(99px * var(--ui)); background: color-mix(in srgb, var(--fx) 18%, transparent); color: var(--fx); font-weight: 800; animation: duel-fx-up .4s .7s ease-out both; }
.duel-fx-next { color: var(--faint); font-size: calc(12px * var(--ui)); animation: duel-fx-up .4s .8s ease-out both; }
.duel-fx-ok { margin-top: calc(6px * var(--ui)); animation: duel-fx-up .4s .85s ease-out both; }
.duel-fx.lose .duel-fx-in { animation: duel-fx-shake .45s .72s ease both; }
.duel-fx.out { animation: duel-fx-out .3s ease forwards; }
.duel-fx.is-round .duel-fx-kanji { width: calc(104px * var(--ui)); height: calc(104px * var(--ui)); font-size: calc(58px * var(--ui)); }
@keyframes duel-fx-bg { from { opacity: 0; } }
@keyframes duel-fx-band { from { transform: skewY(-6deg) scaleX(0); } }
@keyframes duel-fx-stamp { 0% { opacity: 0; transform: scale(3) rotate(-30deg); } 60% { opacity: 1; transform: scale(.9) rotate(-10deg); } 100% { opacity: 1; transform: scale(1) rotate(-12deg); } }
@keyframes duel-fx-up { from { opacity: 0; transform: translateY(calc(10px * var(--ui))); } }
@keyframes duel-fx-shake { 20%, 60% { transform: translateX(calc(-7px * var(--ui))); } 40%, 80% { transform: translateX(calc(7px * var(--ui))); } }
@keyframes duel-fx-out { to { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .duel-fx, .duel-fx-in::before, .duel-fx-kanji, .duel-fx-title, .duel-fx-scores, .duel-fx-pts, .duel-fx-sub, .duel-fx-next, .duel-fx-ok, .duel-fx.lose .duel-fx-in { animation: none; }
}
/* attente du verdict : sa partie est finie, pas celle de l'adversaire */
.duel-fx.wait { --fx: var(--amber); }
/* un seul bandeau par manche : l'en-tête (attente puis verdict) change sur place, la partie de l'adversaire reste dessous */
.duel-fx[hidden] { display: none; }
.duel-fx-head, .duel-fx-foot { display: contents; }
.duel-fx.wait .duel-fx-kanji { animation: duel-fx-stamp .55s .1s cubic-bezier(.3, 1.6, .5, 1) both, duel-fx-breathe 1.8s .8s ease-in-out infinite; }
.duel-fx.wait .duel-fx-title { color: var(--text); }
@keyframes duel-fx-breathe { 50% { opacity: .55; } }
@media (prefers-reduced-motion: reduce) { .duel-fx.wait .duel-fx-kanji { animation: none; } }
/* écran d'attente : la partie de l'adversaire en direct (ses essais, sa série, ses réponses) */
.duel-fx-opp { display: grid; justify-items: center; gap: calc(10px * var(--ui)); width: min(calc(440px * var(--ui)), calc(100vw - calc(32px * var(--ui)))); margin-top: calc(8px * var(--ui)); padding: calc(12px * var(--ui)) calc(14px * var(--ui)); border: 1px solid color-mix(in srgb, var(--blue) 35%, var(--line)); border-radius: calc(14px * var(--ui)); background: var(--surface); text-align: center; animation: duel-fx-up .4s .8s ease-out both; }
.duel-fx-opp .ar-live-who, .duel-fx-opp .ar-live-state { display: flex; align-items: center; gap: calc(10px * var(--ui)); }
.duel-fx-opp .ar-live-who > span { display: grid; text-align: left; }
.duel-fx-opp .ar-live-who small { color: var(--faint); font: 800 calc(9px * var(--ui)) var(--font); letter-spacing: .16em; text-transform: uppercase; }
.duel-fx-opp .social-avatar { width: calc(34px * var(--ui)); height: calc(34px * var(--ui)); box-shadow: 0 0 0 calc(2px * var(--ui)) var(--surface), 0 0 0 calc(4px * var(--ui)) var(--blue); }
.duel-fx-opp .ar-live-st { display: inline-flex; align-items: center; gap: calc(7px * var(--ui)); padding: calc(4px * var(--ui)) calc(10px * var(--ui)); border-radius: calc(99px * var(--ui)); background: rgba(0, 0, 0, .35); color: var(--muted); font-size: calc(12px * var(--ui)); font-weight: 600; }
.duel-fx-opp .ar-live-st .duel-dot.on { animation: live-dot 1.4s ease-in-out infinite; }
.duel-fx-opp .duel-opp-b, .duel-fx-opp .duel-opp-chips, .duel-fx-opp .duel-wt { justify-content: center; }
@media (prefers-reduced-motion: reduce) { .duel-fx-opp { animation: none; } }

/* 1v1 : temps pour répondre (Wordtaku, Pixel, Devine l'anime), sous le bandeau en direct ; rouge les 5 dernières secondes */
.duel-try { display: flex; align-items: center; gap: calc(10px * var(--ui)); margin: calc(-4px * var(--ui)) 0 calc(14px * var(--ui)); color: var(--muted); font-size: calc(12px * var(--ui)); }
.duel-try[hidden] { display: none; }
.duel-try i { position: relative; flex: 1; height: calc(4px * var(--ui)); overflow: hidden; border-radius: calc(2px * var(--ui)); background: var(--line); }
.duel-try i::after { content: ""; position: absolute; inset: 0; transform: scaleX(var(--p, 1)); transform-origin: left; background: var(--amber); }
.duel-try b { min-width: 2ch; color: var(--text); font: 700 calc(15px * var(--ui))/1 var(--mono); font-variant-numeric: tabular-nums; text-align: right; }
.duel-try small { margin-left: calc(-7px * var(--ui)); }
.duel-try.hurry i::after { background: var(--accent); }
.duel-try.hurry b { color: var(--accent); }
/* quiz 1v1 : déjà répondu, la question suivante arrive dès que l'adversaire a répondu */
.qz-wait { display: inline-flex; align-items: center; gap: calc(4px * var(--ui)); color: var(--muted); font-size: calc(12px * var(--ui)); animation: txt 1.4s ease-in-out infinite; }
.qz-wait b { color: var(--text); font-weight: 650; }
@media (prefers-reduced-motion: reduce) { .qz-wait { animation: none; } }
/* fin de duel avec mise : le pot au milieu, les pièces filent chez le gagnant (duelPotFly) */
.duel-fx-pot { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: calc(14px * var(--ui)); width: min(calc(400px * var(--ui)), calc(100vw - calc(32px * var(--ui)))); margin-top: calc(4px * var(--ui)); animation: duel-fx-up .4s .7s ease-out both; }
.fx-pot-who { display: grid; justify-items: center; gap: calc(4px * var(--ui)); min-width: 0; }
.fx-pot-who > small { max-width: 100%; overflow: hidden; color: var(--muted); font-size: calc(12px * var(--ui)); text-overflow: ellipsis; white-space: nowrap; }
.fx-pot-who .social-avatar { width: calc(44px * var(--ui)); height: calc(44px * var(--ui)); box-shadow: 0 0 0 calc(2px * var(--ui)) var(--bg), 0 0 0 calc(4px * var(--ui)) var(--red); }
.fx-pot-opp .social-avatar { box-shadow: 0 0 0 calc(2px * var(--ui)) var(--bg), 0 0 0 calc(4px * var(--ui)) var(--blue); }
.fx-pot-who.hit .social-avatar { animation: fx-pot-hit .28s ease-out; }
.fx-pot-delta { display: flex; align-items: baseline; gap: calc(4px * var(--ui)); opacity: 0; transform: translateY(calc(6px * var(--ui))); transition: opacity .3s, transform .3s; }
.fx-pot-delta b { font: 900 calc(20px * var(--ui))/1 var(--display); font-variant-numeric: tabular-nums; }
.fx-pot-delta small { color: var(--faint); font-size: calc(11px * var(--ui)); }
.duel-fx-pot.paid .fx-pot-delta { opacity: 1; transform: none; }
.duel-fx-pot.win .fx-pot-me b, .duel-fx-pot.lose .fx-pot-opp b { color: var(--green); }
.duel-fx-pot.win .fx-pot-opp b, .duel-fx-pot.lose .fx-pot-me b { color: var(--red); }
.duel-fx-pot.draw b, .duel-fx-pot.refund b { color: var(--amber); }
.fx-pot-pile { display: grid; justify-items: center; gap: calc(2px * var(--ui)); transition: opacity .4s; }
.fx-pot-pile .fx-pot-n { color: var(--amber); font: 900 calc(26px * var(--ui))/1 var(--display); font-variant-numeric: tabular-nums; }
.fx-pot-pile small { color: var(--faint); font-size: calc(10px * var(--ui)); white-space: nowrap; }
.duel-fx-pot.paid .fx-pot-pile { opacity: .45; }
.fx-pot-coin, .fx-pot-fly { display: block; width: calc(22px * var(--ui)); height: calc(22px * var(--ui)); border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff0b0, #ffcf4d 45%, #c98f1d); box-shadow: inset 0 0 0 calc(2px * var(--ui)) rgba(120, 70, 0, .45), 0 calc(2px * var(--ui)) calc(6px * var(--ui)) rgba(0, 0, 0, .45); }
.fx-pot-fly { position: fixed; z-index: 300; pointer-events: none; }
@keyframes fx-pot-hit { 40% { transform: scale(1.18); } }
@media (prefers-reduced-motion: reduce) { .duel-fx-pot, .fx-pot-who.hit .social-avatar { animation: none; } }

/* --- Jeux à manches : rangée de la page Jeux, pages de jeu --- */
.gc-annee { --gc-glow: #8fb3e3; } .gc-intrus { --gc-glow: #ff6b5b; } .gc-zoom { --gc-glow: #6fd3c1; }
.gc-chrono { --gc-glow: #f09a3e; } .gc-memoire { --gc-glow: #bd58e7; } .gc-kanji { --gc-glow: #e5bd60; }
/* Chronologie : trois jaquettes sur une frise ; au survol elles se rangent (--a → --b) et l'année apparaît */
.gc-ch { position: relative; width: calc(316px * var(--ui)); height: calc(176px * var(--ui)); }
.gc-ch-line { position: absolute; left: calc(6px * var(--ui)); right: calc(6px * var(--ui)); bottom: calc(6px * var(--ui)); height: calc(2px * var(--ui)); border-radius: 1px; background: linear-gradient(90deg, rgba(240, 154, 62, .15), #f09a3e, rgba(240, 154, 62, .15)); }
.gc-ch i { position: absolute; left: calc(var(--a) * calc(112px * var(--ui))); bottom: calc(20px * var(--ui)); width: calc(92px * var(--ui)); transition: left .7s cubic-bezier(.5, -0.3, .3, 1.3); transition-delay: calc(var(--a) * 60ms); }
.gc-ch img { display: block; width: 100%; aspect-ratio: 2 / 3; object-fit: cover; border-radius: calc(6px * var(--ui)); box-shadow: 0 0 0 1px rgba(255, 255, 255, .1), 0 calc(14px * var(--ui)) calc(22px * var(--ui)) calc(-10px * var(--ui)) #000; transform: rotate(calc((var(--a) - 1) * 5deg)); transition: transform .5s; }
.gc-ch i::after { content: ""; position: absolute; left: 50%; bottom: calc(-16px * var(--ui)); width: calc(9px * var(--ui)); height: calc(9px * var(--ui)); margin-left: calc(-4.5px * var(--ui)); border-radius: 50%; background: #2a2620; box-shadow: 0 0 0 calc(2px * var(--ui)) #f09a3e; transition: background .3s .5s; }
.gc-ch b { position: absolute; left: 50%; top: calc(-12px * var(--ui)); padding: calc(2px * var(--ui)) calc(7px * var(--ui)); border-radius: calc(6px * var(--ui)); background: #14120f; color: #f09a3e; font: 700 calc(12px * var(--ui))/1.3 var(--mono); transform: translate(-50%, calc(6px * var(--ui))); opacity: 0; transition: opacity .3s .55s, transform .3s .55s; }
.gc-ch em { position: absolute; left: calc(-7px * var(--ui)); top: calc(-7px * var(--ui)); display: grid; place-items: center; width: calc(22px * var(--ui)); height: calc(22px * var(--ui)); border-radius: 50%; background: #f09a3e; color: #1a1208; font: 800 calc(12px * var(--ui))/1 var(--mono); font-style: normal; transform: scale(0); transition: transform .3s .6s cubic-bezier(.2, 1.6, .4, 1); }
.mg-card:hover .gc-ch i { left: calc(var(--b) * calc(112px * var(--ui))); }
.mg-card:hover .gc-ch img { transform: none; }
.mg-card:hover .gc-ch i::after { background: #f09a3e; }
.mg-card:hover .gc-ch b { opacity: 1; transform: translate(-50%, 0); }
.mg-card:hover .gc-ch em { transform: scale(1); }
/* Mémoire : grille de six jaquettes, une place vide qui se remplit au survol */
.gc-me { display: grid; grid-template-columns: repeat(3, calc(60px * var(--ui))); gap: calc(9px * var(--ui)); transform: perspective(calc(700px * var(--ui))) rotateX(14deg) rotateZ(-3deg); transition: transform .6s cubic-bezier(.2, 1, .3, 1); }
.gc-me i { position: relative; display: block; aspect-ratio: 2 / 3; border-radius: calc(5px * var(--ui)); overflow: hidden; box-shadow: 0 0 0 1px rgba(255, 255, 255, .1), 0 calc(10px * var(--ui)) calc(16px * var(--ui)) calc(-8px * var(--ui)) #000; }
.gc-me img { width: 100%; height: 100%; object-fit: cover; }
.gc-me i.hole { box-shadow: 0 0 0 calc(2px * var(--ui)) #bd58e7, 0 0 calc(22px * var(--ui)) rgba(189, 88, 231, .55); background: radial-gradient(circle, rgba(189, 88, 231, .35), #15111a 70%); }
.gc-me i.hole img { opacity: 0; transform: scale(.6) rotate(-8deg); transition: opacity .4s .15s, transform .5s .15s cubic-bezier(.2, 1.5, .4, 1); }
.gc-me i.hole b { position: absolute; inset: 0; display: grid; place-items: center; color: #e3b5f7; font: 800 calc(22px * var(--ui))/1 var(--mono); animation: gcMePulse 1.8s ease-in-out infinite; transition: opacity .2s; }
@keyframes gcMePulse { 50% { opacity: .4; } }
.mg-card:hover .gc-me { transform: perspective(calc(700px * var(--ui))) rotateX(0deg) rotateZ(0deg) scale(1.04); }
.mg-card:hover .gc-me i.hole img { opacity: 1; transform: none; }
.mg-card:hover .gc-me i.hole b { opacity: 0; animation: none; }
/* Kanji : titre au pinceau (vertical) et sceau rouge ; au survol, l'affiche floutée se dévoile */
.gc-kj { position: relative; display: flex; align-items: center; gap: calc(28px * var(--ui)); }
.gc-kj-txt { writing-mode: vertical-rl; font: 700 calc(37px * var(--ui))/1.05 var(--jp); letter-spacing: .08em; color: #f3e6c4; text-shadow: 0 0 calc(22px * var(--ui)) rgba(229, 189, 96, .45); transition: transform .5s cubic-bezier(.2, 1, .3, 1); }
.gc-kj-seal { position: absolute; left: calc(32px * var(--ui)); bottom: calc(-4px * var(--ui)); display: grid; place-items: center; width: calc(30px * var(--ui)); height: calc(30px * var(--ui)); border-radius: calc(4px * var(--ui)); background: #c8372d; color: #fff3e6; font: 700 calc(15px * var(--ui))/1 var(--jp); box-shadow: 0 calc(4px * var(--ui)) calc(10px * var(--ui)) rgba(0, 0, 0, .6); transform: rotate(-8deg); }
.gc-kj-card { position: relative; width: calc(116px * var(--ui)); aspect-ratio: 2 / 3; border-radius: calc(7px * var(--ui)); overflow: hidden; box-shadow: 0 0 0 1px rgba(229, 189, 96, .4), 0 calc(18px * var(--ui)) calc(28px * var(--ui)) calc(-12px * var(--ui)) #000; transform: rotate(5deg); transition: transform .5s cubic-bezier(.2, 1.2, .3, 1); }
.gc-kj-card img { width: 100%; height: 100%; object-fit: cover; filter: blur(calc(9px * var(--ui))) brightness(.55); transform: scale(1.15); transition: filter .6s, transform .6s; }
.gc-kj-card b { position: absolute; inset: 0; display: grid; place-items: center; color: #e5bd60; font: 800 calc(26px * var(--ui))/1 var(--mono); transition: opacity .3s; }
.mg-card:hover .gc-kj-txt { transform: translateX(calc(-6px * var(--ui))); }
.mg-card:hover .gc-kj-card { transform: rotate(0deg) translateY(calc(-4px * var(--ui))); }
.mg-card:hover .gc-kj-card img { filter: none; transform: none; }
.mg-card:hover .gc-kj-card b { opacity: 0; }
/* Millésime : jaquette penchée, année en volets, curseur */
.gc-yr { display: flex; align-items: center; gap: calc(24px * var(--ui)); }
.gc-yr-cover { width: calc(122px * var(--ui)); aspect-ratio: 2 / 3; object-fit: cover; border-radius: calc(7px * var(--ui)); box-shadow: 0 0 0 1px rgba(255, 255, 255, .1), 0 calc(22px * var(--ui)) calc(34px * var(--ui)) calc(-14px * var(--ui)) rgba(0, 0, 0, .95); transform: perspective(calc(600px * var(--ui))) rotateY(18deg) rotate(-3deg); transition: transform .5s cubic-bezier(.2, 1.2, .3, 1); }
.mg-card:hover .gc-yr-cover { transform: perspective(calc(600px * var(--ui))) rotateY(4deg) rotate(0deg) translateY(calc(-4px * var(--ui))); }
.gc-yr-side { display: grid; gap: calc(18px * var(--ui)); }
.gc-yr-digits { display: flex; gap: calc(6px * var(--ui)); }
.gc-yr-digits i { position: relative; display: grid; place-items: center; width: calc(40px * var(--ui)); height: calc(56px * var(--ui)); border-radius: calc(7px * var(--ui)); background: linear-gradient(#26231e 50%, #1d1b17 50%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08), 0 calc(6px * var(--ui)) calc(12px * var(--ui)) calc(-6px * var(--ui)) #000; font: 700 calc(32px * var(--ui))/1 var(--mono); font-style: normal; perspective: calc(300px * var(--ui)); }
.gc-yr-digits i::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: rgba(0, 0, 0, .6); }
.gc-yr-digits b, .gc-yr-digits em { grid-area: 1 / 1; font-style: normal; backface-visibility: hidden; transition: transform .45s cubic-bezier(.3, 1.4, .5, 1), opacity .2s; transition-delay: calc((var(--k) - 2) * 90ms); }
.gc-yr-digits i:not(.q) em { display: none; }
.gc-yr-digits i.q b { transform: rotateX(-90deg); opacity: 0; }
.gc-yr-digits i.q em { color: #8fb3e3; }
.mg-card:hover .gc-yr-digits i.q b { transform: none; opacity: 1; color: #93c98a; }
.mg-card:hover .gc-yr-digits i.q em { transform: rotateX(90deg); opacity: 0; }
.gc-yr-track { position: relative; height: calc(5px * var(--ui)); border-radius: calc(3px * var(--ui)); background: rgba(255, 255, 255, .12); }
.gc-yr-fill { position: absolute; inset: 0 auto 0 0; width: 34%; border-radius: inherit; background: #8fb3e3; transition: width .6s cubic-bezier(.2, 1, .3, 1); }
.gc-yr-thumb { position: absolute; top: 50%; left: 34%; width: calc(15px * var(--ui)); height: calc(15px * var(--ui)); margin: calc(-7.5px * var(--ui)) 0 0 calc(-7.5px * var(--ui)); border-radius: 50%; background: #fff; box-shadow: 0 0 0 calc(4px * var(--ui)) rgba(143, 179, 227, .35), 0 calc(3px * var(--ui)) calc(8px * var(--ui)) #000; transition: left .6s cubic-bezier(.2, 1, .3, 1); }
.mg-card:hover .gc-yr-fill { width: 86%; }
.mg-card:hover .gc-yr-thumb { left: 86%; }
/* Intrus : quatre portraits en éventail ; l'intrus (Tanjirou) se détache au survol */
.gc-in { position: relative; display: flex; align-items: flex-end; height: calc(190px * var(--ui)); }
.gc-in i { position: relative; width: calc(98px * var(--ui)); aspect-ratio: 3 / 4.2; margin: 0 calc(-12px * var(--ui)); border-radius: calc(9px * var(--ui)); overflow: hidden; background: #1d1b17; box-shadow: 0 0 0 calc(2px * var(--ui)) #14130f, 0 calc(16px * var(--ui)) calc(26px * var(--ui)) calc(-12px * var(--ui)) rgba(0, 0, 0, .95); transform: rotate(calc((var(--k) - 1.5) * 7deg)) translateY(calc(var(--k) * (3 - var(--k)) * calc(-5px * var(--ui)))); transition: transform .45s cubic-bezier(.2, 1.3, .4, 1), filter .3s, box-shadow .3s; }
.gc-in img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.gc-in i.is-odd { z-index: 1; }
.mg-card:hover .gc-in i:not(.is-odd) { filter: grayscale(.7) brightness(.6); }
.mg-card:hover .gc-in i.is-odd { transform: rotate(8deg) translateY(calc(-12px * var(--ui))) scale(1.06); box-shadow: 0 0 0 calc(3px * var(--ui)) #ff6b5b, 0 calc(22px * var(--ui)) calc(32px * var(--ui)) calc(-10px * var(--ui)) rgba(255, 107, 91, .55); }
.gc-in-x { position: absolute; right: calc(5px * var(--ui)); top: calc(5px * var(--ui)); display: grid; place-items: center; width: calc(22px * var(--ui)); height: calc(22px * var(--ui)); border-radius: 50%; background: #ff6b5b; color: #fff; transform: scale(0); transition: transform .35s .1s cubic-bezier(.2, 1.6, .4, 1); }
.gc-in-x .i { width: calc(13px * var(--ui)); height: calc(13px * var(--ui)); stroke-width: 3.5; }
.mg-card:hover .gc-in-x { transform: scale(1); }
/* Zoom : bannière assombrie, une loupe en montre un détail grossi et balaie l'image au survol */
.gc-zm { position: absolute; inset: 0; overflow: hidden; }
.gc-zm-bg { position: absolute; inset: 0; background: var(--img) center / cover; filter: brightness(.3) saturate(.6) blur(calc(2px * var(--ui))); transform: scale(1.06); }
.gc-zm-lens { position: absolute; left: 22%; top: 18%; width: calc(150px * var(--ui)); height: calc(150px * var(--ui)); border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 calc(4px * var(--ui)) #e9e4da, 0 0 0 calc(6px * var(--ui)) rgba(0, 0, 0, .5), 0 calc(24px * var(--ui)) calc(36px * var(--ui)) calc(-10px * var(--ui)) #000; transition: left .9s cubic-bezier(.45, 0, .2, 1), top .9s cubic-bezier(.45, 0, .2, 1); }
.gc-zm-lens::before { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: 50%; background: radial-gradient(60% 50% at 30% 25%, rgba(255, 255, 255, .28), transparent 60%); box-shadow: inset 0 0 calc(18px * var(--ui)) rgba(0, 0, 0, .5); }
.gc-zm-in { position: absolute; inset: 0; background: var(--img) 28% 40% / 520% auto; transition: background-position .9s cubic-bezier(.45, 0, .2, 1); }
.gc-zm::after { content: ""; position: absolute; left: calc(22% + calc(132px * var(--ui))); top: calc(18% + calc(132px * var(--ui))); width: calc(16px * var(--ui)); height: calc(64px * var(--ui)); border-radius: calc(7px * var(--ui)); background: linear-gradient(90deg, #4a3a2c, #7a5f45 50%, #4a3a2c); box-shadow: 0 calc(10px * var(--ui)) calc(18px * var(--ui)) calc(-6px * var(--ui)) #000; transform: rotate(-45deg); transform-origin: top center; transition: left .9s cubic-bezier(.45, 0, .2, 1), top .9s cubic-bezier(.45, 0, .2, 1); }
.mg-card:hover .gc-zm-lens { left: 56%; top: 12%; }
.mg-card:hover .gc-zm::after { left: calc(56% + calc(132px * var(--ui))); top: calc(12% + calc(132px * var(--ui))); }
.mg-card:hover .gc-zm-in { background-position: 66% 30%; }
/* pages */
.sr-total { display: inline-flex; align-items: baseline; gap: calc(5px * var(--ui)); margin-right: calc(6px * var(--ui)); }
.sr-total b { font: 700 calc(18px * var(--ui)) var(--mono); }
.sr-total small { font-size: calc(12px * var(--ui)); color: var(--muted); }
.sr-zone .qz-tries i.cur { box-shadow: 0 0 0 calc(2px * var(--ui)) var(--accent); background: transparent; }
.sr-round { margin-top: calc(18px * var(--ui)); }
/* bouton « Manche suivante » : une barre se remplit jusqu'à l'enchaînement automatique */
/* correction : verdict en grand, puis barre qui se remplit jusqu'à la manche suivante */
/* en-tête des manches : numéro en grand, question plus présente */
.sr-zone .mg-head > div:first-child > b { display: flex; align-items: center; gap: calc(16px * var(--ui)); }
.sr-n { display: inline-flex; align-items: baseline; flex: none; padding-right: calc(16px * var(--ui)); border-right: 1px solid var(--line-2); font: 700 clamp(calc(34px * var(--ui)), 3.6vw, calc(46px * var(--ui)))/1 var(--mono); color: var(--accent); letter-spacing: -.02em; }
.sr-n small { margin-left: calc(2px * var(--ui)); font-size: .45em; font-weight: 600; color: var(--muted); letter-spacing: 0; }
.sr-q { font-size: calc(clamp(calc(24px * var(--ui)), 2.6vw, calc(34px * var(--ui))) * var(--display-scale)); }
.mg-page .quiz-zone.sr-play { width: 100%; max-width: calc(1180px * var(--ui)); margin-inline: auto; }
.sr-g-annee .sr-round { position: relative; }
.sr-g-chrono .sr-round { position: relative; }
@keyframes srVerdict { from { opacity: 0; transform: translateY(calc(-8px * var(--ui))) scale(.96); } }
.sr-auto { display: grid; gap: calc(6px * var(--ui)); margin-top: calc(18px * var(--ui)); }
.sr-auto span { font-size: calc(12px * var(--ui)); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.sr-auto span::after { content: " ›"; }
.sr-auto i { display: block; height: calc(6px * var(--ui)); border-radius: calc(3px * var(--ui)); background: var(--surface-3); overflow: hidden; }
.sr-auto i::before { content: ""; display: block; height: 100%; background: var(--accent); transform-origin: left; animation: srNext var(--t) linear both; }
@keyframes srNext { from { transform: scaleX(0); } to { transform: scaleX(1); } }
/* Millésime */
.sr-yr { display: grid; grid-template-columns: minmax(calc(150px * var(--ui)), calc(230px * var(--ui))) minmax(0, 1fr); gap: clamp(calc(16px * var(--ui)), 3vw, calc(32px * var(--ui))); align-items: start; }
.sr-cover { display: block; aspect-ratio: 2 / 3; border-radius: calc(10px * var(--ui)); overflow: hidden; border: 1px solid var(--line); background: var(--bg-2); }
.sr-cover img { width: 100%; height: 100%; object-fit: cover; }
.sr-yr-body { display: grid; gap: calc(12px * var(--ui)); align-content: start; }
.sr-yr-title { font: var(--display-w) calc(clamp(calc(22px * var(--ui)), 2.4vw, calc(30px * var(--ui))) * var(--display-scale)) / 1.1 var(--display); letter-spacing: var(--display-ls); }
/* jaquette posée de biais, en volume (tranche + ombre portée) ; elle suit la souris (tilt3d) */
.sr-cover3d { display: block; perspective: calc(1100px * var(--ui)); padding: calc(6px * var(--ui)) calc(18px * var(--ui)) calc(18px * var(--ui)) calc(6px * var(--ui)); }
.sr-yr .sr-cover { position: relative; overflow: visible; border: 0; background: none; border-radius: calc(8px * var(--ui));
  transform: rotateY(calc(14deg + var(--ry, 0deg))) rotateX(calc(3deg + var(--rx, 0deg))); transform-origin: 50% 50%; transition: transform .6s cubic-bezier(.2, .8, .2, 1);
  box-shadow: 1px 0 0 #d9d3c7, calc(2px * var(--ui)) 0 0 #bdb6a9, calc(3px * var(--ui)) 1px 0 #a39c90, calc(4px * var(--ui)) 1px 0 #8a8479, calc(5px * var(--ui)) calc(2px * var(--ui)) 0 #6e695f, calc(26px * var(--ui)) calc(30px * var(--ui)) calc(40px * var(--ui)) calc(-14px * var(--ui)) rgba(0, 0, 0, 0.85); }
.sr-yr .sr-cover img { border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
.sr-yr .sr-cover::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(100deg, rgba(255, 255, 255, .16), transparent 32%, transparent 70%, rgba(0, 0, 0, .28)); }
.sr-yr .sr-cover.tilting { transition: transform .08s linear; }
@media (prefers-reduced-motion: reduce) { .sr-yr .sr-cover, .sr-yr .sr-cover.tilting { transform: rotateY(14deg) rotateX(3deg); } }
.sr-yr-pick { display: grid; gap: calc(14px * var(--ui)); justify-items: start; margin-top: calc(8px * var(--ui)); }
.sr-yr-go { display: flex; align-items: center; gap: calc(12px * var(--ui)); }
.sr-yr-go .btn { height: calc(44px * var(--ui)); padding: 0 calc(22px * var(--ui)); font-size: calc(15px * var(--ui)); }
/* boutons ± d'un an : ronds, cerclés, la couleur du curseur au survol */
.sr-step { display: grid; place-items: center; flex: none; width: calc(42px * var(--ui)); height: calc(42px * var(--ui)); padding: 0; border: 1px solid var(--line-2); border-radius: 50%; background: var(--surface); color: var(--text);
  cursor: pointer; transition: border-color .15s, background .15s, color .15s, transform .12s; }
.sr-step .i { width: calc(18px * var(--ui)); height: calc(18px * var(--ui)); }
.sr-step:hover { border-color: var(--accent); color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--surface)); }
.sr-step:active { transform: scale(.9); }
.sr-step:focus-visible { outline: calc(2px * var(--ui)) solid var(--accent); outline-offset: calc(2px * var(--ui)); }
/* une manche tient dans l'écran : la jaquette prend la hauteur qui reste */
.mg-page .quiz-zone.sr-play { display: flex; flex-direction: column; height: calc(100dvh - var(--top-h) - calc(136px * var(--ui))); min-height: calc(420px * var(--ui)); padding-bottom: calc(20px * var(--ui)); }
.sr-play .sr-round { flex: 1; min-height: 0; display: grid; }
.sr-play .sr-yr { grid-template-columns: auto minmax(0, calc(560px * var(--ui))); grid-template-rows: minmax(0, 1fr); justify-content: center; align-items: center; gap: clamp(calc(24px * var(--ui)), 5vw, calc(72px * var(--ui))); min-height: 0; }
.sr-play .sr-cover3d { height: 100%; max-height: calc(520px * var(--ui)); min-height: 0; display: flex; align-items: center; }
.sr-play .sr-yr .sr-cover { height: 100%; width: auto; aspect-ratio: 2 / 3; }
.sr-play .sr-yr-body { gap: calc(16px * var(--ui)); align-content: center; }
.sr-play .sr-yr-title { font-size: calc(clamp(calc(26px * var(--ui)), 3vw, calc(40px * var(--ui))) * var(--display-scale)); }
.sr-play .sr-yr-v { font-size: clamp(calc(64px * var(--ui)), 10vw, calc(120px * var(--ui))); }
.sr-play .sr-yr-ctl { width: min(100%, calc(620px * var(--ui))); }
.sr-yr-v { font: 700 clamp(calc(48px * var(--ui)), 7vw, calc(72px * var(--ui)))/1 var(--mono); letter-spacing: .04em; }
.sr-yr-ctl { display: flex; align-items: center; gap: calc(10px * var(--ui)); width: min(100%, calc(460px * var(--ui))); }
.sr-yr-ctl input { flex: 1; accent-color: var(--accent); }
.sr-yr-res { display: flex; flex-wrap: wrap; gap: calc(12px * var(--ui)); margin-top: calc(8px * var(--ui)); }
.sr-yr-res span { display: grid; gap: calc(2px * var(--ui)); min-width: calc(110px * var(--ui)); padding: calc(12px * var(--ui)) calc(14px * var(--ui)); border: 1px solid var(--line); border-radius: calc(10px * var(--ui)); background: var(--surface); }
.sr-yr-res small { font-size: calc(12px * var(--ui)); color: var(--muted); }
.sr-yr-res b { font: 700 calc(28px * var(--ui))/1 var(--mono); }
.sr-yr-guess { --c: var(--red); border-color: color-mix(in srgb, var(--c) 60%, var(--line)) !important; background: color-mix(in srgb, var(--c) 14%, var(--surface)) !important; }
.sr-yr-guess.ok { --c: var(--green); } .sr-yr-guess.near { --c: var(--amber); }
.sr-yr-guess b { color: var(--c); }
.sr-yr-res em { font-size: calc(12px * var(--ui)); font-style: normal; font-weight: 600; color: var(--c); }
/* Intrus */
.sr-chars { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: calc(14px * var(--ui)); }
.sr-char { display: grid; gap: calc(6px * var(--ui)); padding: 0 0 calc(12px * var(--ui)); border: 1px solid var(--line); border-radius: calc(12px * var(--ui)); overflow: hidden; background: var(--surface); text-align: center; color: inherit; transition: border-color .2s, transform .25s cubic-bezier(.2, 1.3, .4, 1); }
.sr-char:not(:disabled):hover { border-color: var(--accent); transform: translateY(calc(-4px * var(--ui))); }
.sr-char-img { display: block; aspect-ratio: 3 / 4; background: var(--bg-2); }
.sr-char-img img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.sr-char b { padding: 0 calc(8px * var(--ui)); font-size: calc(14px * var(--ui)); line-height: 1.25; }
.sr-char small { padding: 0 calc(8px * var(--ui)); font-size: calc(12px * var(--ui)); color: var(--muted); }
.sr-char:disabled { opacity: .35; filter: grayscale(.8); cursor: default; }
.sr-char-img { position: relative; }
.sr-char.is-odd { opacity: 1; filter: none; border-color: var(--green); box-shadow: 0 0 0 calc(3px * var(--ui)) var(--green), 0 calc(18px * var(--ui)) calc(40px * var(--ui)) calc(-18px * var(--ui)) var(--green); transform: translateY(calc(-4px * var(--ui))); }
.sr-char.picked:not(.is-odd) { opacity: 1; filter: none; border-color: var(--red); box-shadow: 0 0 0 calc(3px * var(--ui)) var(--red); }
.sr-badge { position: absolute; left: calc(8px * var(--ui)); right: calc(8px * var(--ui)); bottom: calc(8px * var(--ui)); display: flex; align-items: center; justify-content: center; gap: calc(6px * var(--ui)); padding: calc(6px * var(--ui)) calc(8px * var(--ui)); border-radius: calc(8px * var(--ui)); font: 700 calc(13px * var(--ui)) var(--font); color: #111; background: var(--green); animation: srVerdict .4s .1s cubic-bezier(.2, 1.4, .4, 1) both; }
.sr-badge.ko { background: var(--red); color: #fff; }
.sr-badge .i { width: calc(16px * var(--ui)); height: calc(16px * var(--ui)); stroke-width: 3; }
/* Zoom */
.sr-zoom { display: grid; gap: calc(12px * var(--ui)); justify-items: start; }
.sr-zoom-frame { position: relative; width: 100%; aspect-ratio: 16 / 5; min-height: calc(160px * var(--ui)); border: 1px solid var(--line); border-radius: calc(12px * var(--ui)); overflow: hidden; background: var(--bg-2); }
.sr-zoom-frame img { width: 100%; height: 100%; object-fit: cover; transform: scale(var(--z)); transform-origin: var(--zx) var(--zy); transition: transform .6s cubic-bezier(.2, 1, .3, 1); }
.sr-zoom .btn small { margin-left: calc(4px * var(--ui)); color: var(--muted); }
.sr-worth { font-size: calc(13px * var(--ui)); }
.sr-opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(10px * var(--ui)); width: 100%; }
.sr-opt { display: flex; align-items: center; gap: calc(10px * var(--ui)); padding: calc(14px * var(--ui)) calc(16px * var(--ui)); border: 1px solid var(--line); border-radius: calc(10px * var(--ui)); background: var(--surface); color: inherit; text-align: left; font-weight: 600; transition: border-color .2s, background .2s; }
.sr-opt small { margin-left: auto; font-size: calc(12px * var(--ui)); font-weight: 700; }
.sr-opt .i { flex: none; width: calc(20px * var(--ui)); height: calc(20px * var(--ui)); stroke-width: 3; }
.sr-opt:not(:disabled):hover { border-color: var(--accent); }
.sr-opt:disabled { opacity: .35; cursor: default; }
.sr-opt.good { opacity: 1; border-color: var(--green); box-shadow: 0 0 0 calc(2px * var(--ui)) var(--green); background: color-mix(in srgb, var(--green) 22%, var(--surface)); }
.sr-opt.good .i, .sr-opt.good small { color: var(--green); }
.sr-opt.bad { opacity: 1; border-color: var(--red); box-shadow: 0 0 0 calc(2px * var(--ui)) var(--red); background: color-mix(in srgb, var(--red) 18%, var(--surface)); }
.sr-opt.bad .i, .sr-opt.bad small { color: var(--red); }
/* Chronologie : trois affiches à réordonner par glisser-déposer (ou deux touches). */
.sr-chrono-wrap { display: grid; gap: calc(14px * var(--ui)); justify-items: center; }
.sr-chrono { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(calc(10px * var(--ui)), 2vw, calc(22px * var(--ui))); max-width: calc(820px * var(--ui)); margin-inline: auto; }
.sr-chrono-help { display: flex; align-items: center; justify-content: center; gap: calc(8px * var(--ui)); min-height: calc(24px * var(--ui)); margin: calc(-4px * var(--ui)) 0 0; color: var(--muted); font-size: calc(12px * var(--ui)); text-align: center; }
.sr-chrono-help .i { width: calc(17px * var(--ui)); height: calc(17px * var(--ui)); }
.sr-chrono-card { position: relative; display: grid; gap: calc(8px * var(--ui)); padding: 0 0 calc(12px * var(--ui)); overflow: hidden; border: 1px solid var(--line); border-radius: calc(12px * var(--ui)); background: var(--surface); color: inherit; text-align: left; cursor: grab; touch-action: manipulation; transition: transform .25s cubic-bezier(.2,1.3,.4,1), border-color .2s, opacity .2s, box-shadow .2s; }
.sr-chrono-card img { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; }
.sr-chrono-title { padding: 0 calc(10px * var(--ui)); font-size: calc(13px * var(--ui)); font-weight: 700; line-height: 1.25; }
.sr-chrono-card:not(:disabled):hover { transform: translateY(calc(-5px * var(--ui))); border-color: var(--accent); }
.sr-chrono-card.selected { transform: translateY(calc(-7px * var(--ui))); border-color: var(--accent); box-shadow: 0 0 0 calc(3px * var(--ui)) color-mix(in srgb,var(--accent) 48%,transparent), 0 calc(18px * var(--ui)) calc(32px * var(--ui)) calc(-18px * var(--ui)) var(--accent); }
.sr-chrono-card.dragging { z-index: 3; opacity: .42; cursor: grabbing; transform: scale(.96) rotate(1deg); }
.sr-drag { position: absolute; right: calc(7px * var(--ui)); bottom: calc(7px * var(--ui)); display: grid; place-items: center; width: calc(27px * var(--ui)); height: calc(27px * var(--ui)); border-radius: calc(8px * var(--ui)); background: rgba(10,9,8,.82); color: var(--muted); pointer-events: none; }
.sr-drag .i { width: calc(15px * var(--ui)); height: calc(15px * var(--ui)); }
.sr-chrono-go { min-width: calc(190px * var(--ui)); margin-top: calc(2px * var(--ui)); }
.sr-order { position: absolute; top: calc(8px * var(--ui)); left: calc(8px * var(--ui)); display: grid; place-items: center; width: calc(30px * var(--ui)); height: calc(30px * var(--ui)); border-radius: 50%; background: var(--accent); color: var(--accent-ink); box-shadow: 0 calc(6px * var(--ui)) calc(16px * var(--ui)) rgba(0,0,0,.45); font: 800 calc(15px * var(--ui))/1 var(--mono); }
.sr-chrono-card:disabled { opacity: .48; cursor: default; }
.sr-chrono-card.good { opacity: 1; border-color: var(--green); box-shadow: 0 0 0 calc(2px * var(--ui)) var(--green); }
.sr-chrono-year { position: absolute; right: calc(8px * var(--ui)); top: calc(8px * var(--ui)); padding: calc(5px * var(--ui)) calc(8px * var(--ui)); border-radius: calc(7px * var(--ui)); background: rgba(10,9,8,.86); color: #fff; font: 700 calc(13px * var(--ui)) var(--mono); }
/* Résultats Chronologie : une carte par manche (4 par rangée sur grand écran), l'ordre joué en grandes affiches,
   chaque année verte si l'affiche est à sa place, rouge sinon ; une flèche entre deux affiches */
.sr-cr-results { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: calc(12px * var(--ui)); margin: calc(16px * var(--ui)) 0 0; padding: 0; list-style: none; }
.sr-cr-result { --cr: var(--red); min-width: 0; padding: calc(10px * var(--ui)) calc(12px * var(--ui)) calc(12px * var(--ui)); border: 1px solid var(--line); border-top: calc(3px * var(--ui)) solid var(--cr); border-radius: calc(12px * var(--ui)); background: linear-gradient(color-mix(in srgb, var(--cr) 7%, transparent), transparent calc(60px * var(--ui))), var(--surface); animation: wtIn .45s cubic-bezier(.2, 1, .3, 1) both; animation-delay: calc(var(--k) * 45ms); }
.sr-cr-result.partial { --cr: var(--amber); } .sr-cr-result.perfect { --cr: var(--green); }
.sr-cr-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: calc(12px * var(--ui)); color: var(--muted); font-size: calc(15px * var(--ui)); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.sr-cr-head b { color: var(--text); font: 700 calc(19px * var(--ui))/1 var(--mono); }
.sr-cr-head em { padding: calc(4px * var(--ui)) calc(10px * var(--ui)); border-radius: calc(99px * var(--ui)); background: color-mix(in srgb, var(--cr) 18%, transparent); color: var(--cr); font: 700 calc(15px * var(--ui))/1.2 var(--mono); font-style: normal; }
.sr-cr-seq { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(14px * var(--ui)); }
.sr-cr-card { --ok: var(--red); position: relative; display: grid; align-content: start; gap: calc(5px * var(--ui)); min-width: 0; color: inherit; text-decoration: none; }
.sr-cr-card.ok { --ok: var(--green); }
.sr-cr-card:not(:last-child)::after { content: "›"; position: absolute; right: calc(-12px * var(--ui)); top: 32%; color: var(--muted); font: 700 calc(20px * var(--ui))/1 var(--font); }
.sr-cr-cover { position: relative; display: block; aspect-ratio: 2 / 3; overflow: hidden; border-radius: calc(8px * var(--ui)); background: var(--surface-3); box-shadow: 0 0 0 1px rgba(255, 255, 255, .07), 0 calc(10px * var(--ui)) calc(18px * var(--ui)) calc(-12px * var(--ui)) #000; transition: transform .25s cubic-bezier(.2, 1.3, .4, 1), box-shadow .2s; }
.sr-cr-cover img { width: 100%; height: 100%; object-fit: cover; }
.sr-cr-cover i { position: absolute; left: calc(6px * var(--ui)); top: calc(6px * var(--ui)); display: grid; place-items: center; width: calc(26px * var(--ui)); height: calc(26px * var(--ui)); border-radius: 50%; background: rgba(8, 8, 7, .85); color: #fff; font: 700 calc(14px * var(--ui))/1 var(--mono); font-style: normal; }
.sr-cr-card:hover .sr-cr-cover, .sr-cr-card:focus-visible .sr-cr-cover { transform: translateY(calc(-3px * var(--ui))); box-shadow: 0 0 0 calc(2px * var(--ui)) var(--ok), 0 calc(14px * var(--ui)) calc(22px * var(--ui)) calc(-12px * var(--ui)) #000; }
.sr-cr-card:focus-visible { outline: none; }
.sr-cr-year { justify-self: center; margin-top: calc(3px * var(--ui)); padding: calc(3px * var(--ui)) calc(9px * var(--ui)); border-radius: calc(7px * var(--ui)); background: color-mix(in srgb, var(--ok) 16%, transparent); color: var(--ok); font: 700 calc(17px * var(--ui))/1.3 var(--mono); }
.sr-cr-name { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-width: 0; color: var(--muted); font-size: calc(15px * var(--ui)); font-weight: 600; line-height: 1.3; text-align: center; }
.sr-cr-card:hover .sr-cr-name { color: var(--text); }
@media (max-width: 1200px) { .sr-cr-results { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Mémoire : les affiches restent 2,8 s, puis une s'efface et les réponses apparaissent. */
.sr-memory { display: grid; gap: calc(14px * var(--ui)); }
.sr-memory-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: calc(10px * var(--ui)); }
.sr-memory-card { position: relative; display: block; aspect-ratio: 2 / 3; overflow: hidden; border: 1px solid var(--line); border-radius: calc(9px * var(--ui)); background: radial-gradient(circle, color-mix(in srgb,var(--accent) 30%,transparent), var(--surface)); transition: opacity .55s, transform .55s, filter .55s, box-shadow .3s; }
.sr-memory-card img { width: 100%; height: 100%; object-fit: cover; transition: opacity .55s, transform .55s; }
.sr-memory-card b { position: absolute; inset: auto calc(5px * var(--ui)) calc(5px * var(--ui)); padding: calc(5px * var(--ui)); border-radius: calc(6px * var(--ui)); background: rgba(10,9,8,.86); font-size: calc(10px * var(--ui)); line-height: 1.2; }
.sr-memory-cue { min-height: calc(22px * var(--ui)); }
.sr-memory-cue > span { align-items: baseline; gap: calc(10px * var(--ui)); }
.sr-memory-cue b { font-size: calc(14px * var(--ui)); }
.sr-memory-cue small { color: var(--muted); font-size: calc(12px * var(--ui)); }
.sr-memory-memorize { display: flex; }
.sr-memory-choose { display: none; }
.sr-memory.ready:not(.answered) .sr-memory-memorize { display: none; }
.sr-memory.ready:not(.answered) .sr-memory-choose { display: flex; }
.sr-memory-opts { opacity: 0; transform: translateY(calc(8px * var(--ui))); pointer-events: none; transition: opacity .35s, transform .35s; }
.sr-memory.ready .sr-memory-opts { opacity: 1; transform: none; pointer-events: auto; }
/* Kanji : grand titre natif au pinceau, affiche révélée après la réponse. */
.sr-kanji { display: grid; grid-template-columns: minmax(calc(230px * var(--ui)), .8fr) minmax(calc(320px * var(--ui)), 1.2fr); gap: clamp(calc(18px * var(--ui)), 4vw, calc(52px * var(--ui))); align-items: center; max-width: calc(940px * var(--ui)); margin-inline: auto; }
@keyframes srKanjiReveal { from { opacity: 0; transform: scale(1.12); } }
.sr-kanji .sr-opts { grid-template-columns: minmax(0, 1fr); }
/* récapitulatif */
.sr-recap { display: grid; gap: calc(6px * var(--ui)); margin: calc(18px * var(--ui)) 0 0; padding: 0; list-style: none; }
.sr-recap li { display: grid; grid-template-columns: calc(28px * var(--ui)) minmax(0, 1fr) auto; align-items: center; gap: calc(2px * var(--ui)) calc(12px * var(--ui)); padding: calc(10px * var(--ui)) calc(12px * var(--ui)); border: 1px solid var(--line); border-radius: calc(10px * var(--ui)); background: var(--surface); }
.sr-recap-n { grid-row: span 2; display: grid; place-items: center; width: calc(24px * var(--ui)); height: calc(24px * var(--ui)); border-radius: 50%; font: 700 calc(12px * var(--ui)) var(--font); background: var(--surface-3); }
.sr-recap li.ok .sr-recap-n { background: var(--green); color: #0d1a0b; }
.sr-recap li.ko .sr-recap-n { background: var(--red); color: #fff; }
.sr-recap-t { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sr-recap small { grid-column: 2; font-size: calc(12px * var(--ui)); color: var(--muted); }
.sr-recap b { grid-row: 1 / span 2; grid-column: 3; font: 700 calc(16px * var(--ui)) var(--mono); }
@media (max-width: 760px) {
  .sr-yr, .sr-play .sr-yr { grid-template-columns: calc(120px * var(--ui)) minmax(0, 1fr); gap: calc(16px * var(--ui)); }
  .sr-cover3d, .sr-play .sr-cover3d { height: auto; padding: calc(4px * var(--ui)) calc(10px * var(--ui)) calc(12px * var(--ui)) calc(2px * var(--ui)); }
  .sr-yr .sr-cover, .sr-play .sr-yr .sr-cover { width: calc(110px * var(--ui)); height: auto; }
  .mg-page .quiz-zone.sr-play { height: auto; min-height: 0; }
  .sr-play .sr-yr-v { font-size: calc(56px * var(--ui)); }
  .sr-chars { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sr-char-img { aspect-ratio: 1; }
  .sr-opts { grid-template-columns: minmax(0, 1fr); }
  .sr-zoom-frame { aspect-ratio: 16 / 7; }
  .sr-memory-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sr-kanji { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 500px) {
  .sr-chrono { gap: calc(7px * var(--ui)); }
  .sr-chrono-title { padding-inline: calc(6px * var(--ui)); font-size: calc(10px * var(--ui)); }
  .sr-chrono-year { right: calc(4px * var(--ui)); top: calc(4px * var(--ui)); padding: calc(4px * var(--ui)); font-size: calc(10px * var(--ui)); }
  .sr-order { left: calc(4px * var(--ui)); top: calc(4px * var(--ui)); width: calc(25px * var(--ui)); height: calc(25px * var(--ui)); font-size: calc(12px * var(--ui)); }
  .sr-chrono-help { align-items: flex-start; text-align: left; }
  .sr-drag { right: calc(4px * var(--ui)); bottom: calc(4px * var(--ui)); width: calc(23px * var(--ui)); height: calc(23px * var(--ui)); }
  .sr-cr-results { grid-template-columns: minmax(0, 1fr); }
  .sr-cr-name { font-size: calc(12.5px * var(--ui)); }
}
/* --- Jeux à manches : une identité par jeu (couleur de sa vignette, décor de fond, vignettes de niveau, manches animées) --- */
.sr-zone, .sa { --jp-serif: 'Hiragino Mincho ProN', 'Yu Mincho', YuMincho, 'Noto Serif JP', 'MS PMincho', serif; }
.sr-g-annee { --sr: #8fb3e3; } .sr-g-intrus { --sr: #ff6b5b; } .sr-g-zoom { --sr: #6fd3c1; }
.sr-g-chrono { --sr: #f09a3e; } .sr-g-memoire { --sr: #bd58e7; } .sr-g-kanji { --sr: #e5bd60; }
.quiz-zone.sr-zone { --sr-glow: radial-gradient(80% 60% at 50% 0%, color-mix(in srgb, var(--sr) 12%, transparent), transparent 70%); background: var(--sr-glow), var(--bg-2); }
/* Millésime : règle graduée en bas, comme un mètre ruban */
.quiz-zone.sr-g-annee { background: var(--sr-glow),
  repeating-linear-gradient(90deg, rgba(255, 255, 255, .05) 0 1px, transparent 1px calc(12px * var(--ui))) left bottom / 100% calc(9px * var(--ui)) no-repeat,
  repeating-linear-gradient(90deg, color-mix(in srgb, var(--sr) 22%, transparent) 0 1px, transparent 1px calc(120px * var(--ui))) left bottom / 100% calc(20px * var(--ui)) no-repeat, var(--bg-2); }
/* Intrus : trame de manga */
.quiz-zone.sr-g-intrus { background: var(--sr-glow), radial-gradient(rgba(255, 255, 255, .045) calc(1.1px * var(--ui)), transparent calc(1.5px * var(--ui))) 0 0 / calc(9px * var(--ui)) calc(9px * var(--ui)), var(--bg-2); }
/* Zoom : quadrillage de viseur */
.quiz-zone.sr-g-zoom { background: var(--sr-glow),
  linear-gradient(color-mix(in srgb, var(--sr) 6%, transparent) 1px, transparent 1px) 0 0 / calc(44px * var(--ui)) calc(44px * var(--ui)),
  linear-gradient(90deg, color-mix(in srgb, var(--sr) 6%, transparent) 1px, transparent 1px) 0 0 / calc(44px * var(--ui)) calc(44px * var(--ui)), var(--bg-2); }
/* Chronologie : lignes d'un registre */
.quiz-zone.sr-g-chrono { background: var(--sr-glow), repeating-linear-gradient(transparent 0 calc(31px * var(--ui)), rgba(255, 255, 255, .03) calc(31px * var(--ui)) calc(32px * var(--ui))), var(--bg-2); }
/* Mémoire : losanges de dos de cartes */
.quiz-zone.sr-g-memoire { background: var(--sr-glow), conic-gradient(from 45deg, color-mix(in srgb, var(--sr) 5%, transparent) 25%, transparent 0 50%, color-mix(in srgb, var(--sr) 5%, transparent) 0 75%, transparent 0) 0 0 / calc(26px * var(--ui)) calc(26px * var(--ui)), var(--bg-2); }
/* Kanji : papier quadrillé d'écriture japonaise (genkō yōshi) */
.quiz-zone.sr-g-kanji { background: var(--sr-glow),
  linear-gradient(90deg, color-mix(in srgb, var(--sr) 7%, transparent) 1px, transparent 1px) 0 0 / calc(36px * var(--ui)) calc(36px * var(--ui)),
  linear-gradient(color-mix(in srgb, var(--sr) 7%, transparent) 1px, transparent 1px) 0 0 / calc(36px * var(--ui)) calc(36px * var(--ui)), var(--bg-2); }
/* en-tête et enchaînement à la couleur du jeu */
.sr-zone .sr-n { color: var(--sr); }
.sr-zone .qz-tries i.cur { box-shadow: 0 0 0 calc(2px * var(--ui)) var(--sr); }
.sr-zone .sr-auto i::before { background: var(--sr); }
.sr-zone .px-lvl.on .px-lvl-art { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sr) 35%, transparent); }
.sr-zone .qz-kicker { color: color-mix(in srgb, var(--sr) 70%, var(--muted)); }
.sr-zone kbd { font-family: var(--mono); }

/* vignettes de niveau : la petite scène du jeu, le kanji du niveau en coin */
.px-lvl-art.sa { position: relative; container-type: inline-size; background: radial-gradient(70% 70% at 50% 60%, color-mix(in srgb, var(--sr) 20%, transparent), transparent 75%), var(--bg-2); }
.sa-lv { position: absolute; z-index: 3; left: 7%; top: 7%; display: grid; place-items: center; width: 18cqw; height: 18cqw; border-radius: 50%; background: rgba(10, 9, 8, .72); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--lv) 60%, transparent); color: var(--lv); font: 700 9.5cqw/1 var(--jp); font-style: normal; }
.sa img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Millésime */
.sa-yr-cover { position: absolute; left: 12%; top: 9%; width: 50% !important; height: auto !important; aspect-ratio: 2 / 3; border-radius: calc(5px * var(--ui)); box-shadow: 0 0 0 1px rgba(255, 255, 255, .1), 0 calc(16px * var(--ui)) calc(24px * var(--ui)) calc(-10px * var(--ui)) #000; transform: perspective(calc(500px * var(--ui))) rotateY(18deg) rotate(-4deg); transition: transform .5s cubic-bezier(.2, 1.2, .3, 1); }
.sa-yr { position: absolute; right: 8%; bottom: 10%; display: flex; gap: 1.2cqw; }
.sa-yr i { position: relative; display: grid; place-items: center; width: 13cqw; height: 19cqw; border-radius: 1.8cqw; background: linear-gradient(var(--surface-2) 50%, var(--surface) 50%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08), 0 calc(6px * var(--ui)) calc(12px * var(--ui)) calc(-6px * var(--ui)) #000; font: 700 11.5cqw/1 var(--mono); font-style: normal; perspective: calc(300px * var(--ui)); }
.sa-yr i::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: rgba(0, 0, 0, .6); }
.sa-yr span, .sa-yr em { grid-area: 1 / 1; font-style: normal; backface-visibility: hidden; transition: transform .45s cubic-bezier(.3, 1.4, .5, 1), opacity .2s; transition-delay: calc(var(--k) * 80ms); }
.sa-yr i:not(.q) em { display: none; }
.sa-yr i.q span { transform: rotateX(-90deg); opacity: 0; }
.sa-yr i.q em { color: var(--sr); }
.px-lvl:hover .sa-yr-cover { transform: perspective(calc(500px * var(--ui))) rotateY(4deg) translateY(calc(-3px * var(--ui))); }
.px-lvl:hover .sa-yr i.q span { transform: none; opacity: 1; color: var(--green); }
.px-lvl:hover .sa-yr i.q em { transform: rotateX(90deg); opacity: 0; }
/* Intrus : l'éventail ; l'intrus se voit selon le niveau, toujours au survol */
.sa-in { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding-top: 10%; }
.sa-in i { position: relative; width: 25cqw; aspect-ratio: 3 / 4.2; margin: 0 -3.5cqw; border-radius: 2.5cqw; overflow: hidden; box-shadow: 0 0 0 calc(2px * var(--ui)) var(--bg-2), 0 calc(12px * var(--ui)) calc(20px * var(--ui)) calc(-10px * var(--ui)) #000; transform: rotate(calc((var(--k) - 1.5) * 8deg)) translateY(calc(var(--k) * (3 - var(--k)) * -1.6cqw)); transition: transform .45s cubic-bezier(.2, 1.3, .4, 1), filter .3s, box-shadow .3s; }
.sa-in img { object-position: top; }
.sa-in i.sa-odd { z-index: 1; }
.lv-facile .sa-in i.sa-odd, .px-lvl:hover .sa-in i.sa-odd { transform: rotate(8deg) translateY(-9cqw) scale(1.08); box-shadow: 0 0 0 calc(2px * var(--ui)) var(--sr), 0 calc(16px * var(--ui)) calc(26px * var(--ui)) calc(-10px * var(--ui)) color-mix(in srgb, var(--sr) 60%, transparent); }
.lv-moyen .sa-in i.sa-odd { transform: rotate(4deg) translateY(-4cqw); box-shadow: 0 0 0 calc(2px * var(--ui)) color-mix(in srgb, var(--sr) 55%, var(--bg-2)), 0 calc(12px * var(--ui)) calc(20px * var(--ui)) calc(-10px * var(--ui)) #000; }
.lv-difficile .sa-in i { margin: 0 -5.5cqw; filter: saturate(.7) brightness(.85); }
.lv-facile .sa-in i:not(.sa-odd), .px-lvl:hover .sa-in i:not(.sa-odd) { filter: grayscale(.7) brightness(.6); }
/* Zoom : la loupe grossit plus à chaque niveau */
.sa-zm { position: absolute; inset: 0; background: var(--img) 40% center / cover; }
.sa-zm::before { content: ""; position: absolute; inset: 0; background: rgba(8, 10, 10, .62); }
.sa-zm-lens { position: absolute; left: 20%; top: 18%; width: 56cqw; height: 56cqw; border-radius: 50%; background: var(--img) 38% 45% / auto calc(var(--z) * 100%); box-shadow: 0 0 0 1.6cqw #e9e4da, 0 0 0 2.6cqw rgba(0, 0, 0, .5), 0 calc(14px * var(--ui)) calc(24px * var(--ui)) calc(-8px * var(--ui)) #000; transition: left .8s cubic-bezier(.45, 0, .2, 1), background-position .8s cubic-bezier(.45, 0, .2, 1); }
.sa-zm span:not(.sa-zm-lens) { position: absolute; right: 7%; bottom: 7%; padding: 1.5cqw 3cqw; border-radius: 2cqw; background: rgba(8, 10, 10, .8); color: var(--sr); font: 700 8cqw/1 var(--mono); }
.px-lvl:hover .sa-zm-lens { left: 28%; background-position: 62% 35%; }
/* (loupe plus petite et image plus sombre à chaque niveau : on en voit de moins en moins) */
.lv-facile .sa-zm::before { background: rgba(8, 10, 10, .4); }
.lv-difficile .sa-zm::before { background: rgba(8, 10, 10, .82); }
.lv-moyen .sa-zm-lens { top: 22%; width: 48cqw; height: 48cqw; }
.lv-difficile .sa-zm-lens { top: 26%; width: 40cqw; height: 40cqw; }
/* Chronologie : trois affiches reliées à leur année sur une frise 1995-2025 ; plus le niveau monte, plus les points se serrent */
.sa-ch { position: absolute; inset: 0; }
.sa-ch i { position: absolute; left: var(--cx); top: 22%; width: 23cqw; translate: -50% 0; transform: rotate(calc((var(--k) - 1) * 4deg)); transition: transform .45s cubic-bezier(.2, 1.3, .4, 1); transition-delay: calc(var(--k) * 60ms); }
.sa-ch img { aspect-ratio: 2 / 3; height: auto; border-radius: 2cqw; box-shadow: 0 0 0 1px rgba(255, 255, 255, .1), 0 calc(12px * var(--ui)) calc(18px * var(--ui)) calc(-8px * var(--ui)) #000; }
.sa-ch i span { position: absolute; left: 50%; top: calc(100% + 2.2cqw); translate: -50% 0; color: var(--text); font: 700 6cqw/1 var(--mono); white-space: nowrap; }
.sa-ch-links { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.sa-ch-links line { stroke: color-mix(in srgb, var(--sr) 60%, transparent); stroke-width: 1.4; stroke-dasharray: 3 3; }
.sa-ch-axis { position: absolute; left: 8%; right: 8%; top: 84%; height: calc(2px * var(--ui)); margin-top: -1px; background: color-mix(in srgb, var(--sr) 45%, transparent); }
.sa-ch-dot { position: absolute; left: var(--x); top: 84%; width: 3.6cqw; height: 3.6cqw; translate: -50% -50%; border-radius: 50%; background: var(--sr); box-shadow: 0 0 0 1cqw var(--bg-2), 0 0 calc(10px * var(--ui)) var(--sr); transition: scale .3s cubic-bezier(.2, 1.5, .4, 1); transition-delay: calc(var(--k) * 60ms); }
.sa-ch-end { position: absolute; top: 89%; color: var(--muted); font: 600 4.6cqw/1 var(--mono); }
.sa-ch-end { left: 8%; } .sa-ch-end:last-child { left: auto; right: 8%; }
.px-lvl:hover .sa-ch i { transform: translateY(-3cqw); }
.px-lvl:hover .sa-ch-dot { scale: 1.35; }
/* Mémoire : six affiches, une place vide qui palpite */
.sa-me { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(3, 21cqw); align-content: center; justify-content: center; gap: 3cqw; transform: perspective(calc(600px * var(--ui))) rotateX(14deg) rotateZ(-3deg); transition: transform .6s cubic-bezier(.2, 1, .3, 1); }
.sa-me i { position: relative; aspect-ratio: 2 / 3; border-radius: 2cqw; overflow: hidden; box-shadow: 0 0 0 1px rgba(255, 255, 255, .1), 0 calc(8px * var(--ui)) calc(14px * var(--ui)) calc(-6px * var(--ui)) #000; }
.sa-me i.hole { box-shadow: 0 0 0 calc(2px * var(--ui)) var(--sr), 0 0 calc(18px * var(--ui)) color-mix(in srgb, var(--sr) 55%, transparent); background: radial-gradient(circle, color-mix(in srgb, var(--sr) 35%, transparent), var(--bg-2) 70%); }
.sa-me i.hole img { opacity: 0; transform: scale(.6) rotate(-8deg); transition: opacity .4s .1s, transform .5s .1s cubic-bezier(.2, 1.5, .4, 1); }
.sa-me i.hole::after { content: "?"; position: absolute; inset: 0; display: grid; place-items: center; color: #e3b5f7; font: 800 10cqw/1 var(--mono); animation: gcMePulse 1.8s ease-in-out infinite; }
.px-lvl:hover .sa-me { transform: perspective(calc(600px * var(--ui))) rotateX(0deg) rotateZ(0deg) scale(1.04); }
.px-lvl:hover .sa-me i.hole img { opacity: 1; transform: none; }
.px-lvl:hover .sa-me i.hole::after { opacity: 0; animation: none; }
/* (affiches de moins en moins nettes avec le niveau, nettes au survol) */
.sa-me i:not(.hole) img { transition: filter .4s; }
.lv-moyen .sa-me i:not(.hole) img { filter: saturate(.5) blur(.5px) brightness(.85); }
.lv-difficile .sa-me i:not(.hole) img { filter: grayscale(1) blur(calc(1.4px * var(--ui))) brightness(.6); }
.px-lvl:hover .sa-me i:not(.hole) img { filter: none; }
/* Kanji : petit rouleau suspendu */
.sa-kj { position: absolute; left: 50%; top: 13%; bottom: 13%; width: 38cqw; translate: -50% 0; display: grid; place-items: center; border-radius: 1cqw; background: radial-gradient(120% 90% at 30% 20%, #f6efdf, #e4d5b6 75%); box-shadow: 0 calc(16px * var(--ui)) calc(24px * var(--ui)) calc(-12px * var(--ui)) #000, inset 0 0 calc(14px * var(--ui)) rgba(120, 90, 40, .25); transition: transform .5s cubic-bezier(.2, 1.2, .3, 1); }
.sa-kj::before, .sa-kj::after { content: ""; position: absolute; left: -4cqw; right: -4cqw; height: 4.5cqw; border-radius: 3cqw; background: linear-gradient(#3a2618, #6b4a30 45%, #2a1a10); box-shadow: 0 calc(4px * var(--ui)) calc(8px * var(--ui)) calc(-3px * var(--ui)) #000; }
.sa-kj::before { top: -2cqw; } .sa-kj::after { bottom: -2cqw; }
.sa-kj-txt { writing-mode: vertical-rl; color: #1c1915; font: 700 12cqw/1.05 var(--jp-serif); letter-spacing: .06em; }
.sa-kj-seal { position: absolute; right: 3cqw; bottom: 6cqw; display: grid; place-items: center; width: 9cqw; height: 9cqw; border-radius: 1cqw; background: #c8372d; color: #fff3e6; font: 700 6cqw/1 var(--jp); transform: rotate(-8deg); }
.px-lvl:hover .sa-kj { transform: translateY(calc(-3px * var(--ui))) rotate(-2deg); }
/* jauge de difficulté (1 à 3 barres) en face du kanji du niveau */
.sa-pips { position: absolute; z-index: 3; right: 7%; top: calc(7% + 2.5cqw); display: flex; align-items: flex-end; gap: 1.2cqw; height: 9cqw; padding: 2cqw 2.6cqw; border-radius: 2.5cqw; background: rgba(10, 9, 8, .72); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--lv) 35%, transparent); }
.sa-pips i { width: 2.4cqw; border-radius: 1cqw; background: rgba(255, 255, 255, .14); }
.sa-pips i:nth-child(1) { height: 40%; } .sa-pips i:nth-child(2) { height: 70%; } .sa-pips i:nth-child(3) { height: 100%; }
.sa-pips i.on { background: var(--lv); box-shadow: 0 0 calc(6px * var(--ui)) color-mix(in srgb, var(--lv) 60%, transparent); }
/* écran de départ : de grandes vignettes, à la hauteur de la fenêtre */
.sr-zone.px-setup-zone .px-lvls { --sa-w: clamp(calc(150px * var(--ui)), calc(100vh - var(--top-h) - calc(440px * var(--ui))), calc(270px * var(--ui))); grid-template-columns: repeat(3, minmax(0, var(--sa-w))); }
.sr-zone.px-setup-zone .px-lvl { padding: calc(12px * var(--ui)) calc(12px * var(--ui)) calc(14px * var(--ui)); }
.sr-zone.px-setup-zone .px-lvl-art { width: 100%; margin: 0 0 calc(8px * var(--ui)); }
.sr-zone.px-setup-zone .px-lvl b { font-size: calc(calc(19px * var(--ui)) * var(--display-scale)); }
.sr-zone.px-setup-zone .px-lvl small { font-size: calc(12.5px * var(--ui)); }

/* entrées : les cartes sont distribuées, les réponses glissent en place */
@keyframes srDeal { from { opacity: 0; transform: translateY(calc(-36px * var(--ui))) rotate(-10deg) scale(.92); } }
@keyframes srRise { from { opacity: 0; transform: translateY(calc(10px * var(--ui))); } }
@keyframes srStamp { from { opacity: 0; transform: scale(2.6) rotate(-24deg); } 60% { opacity: 1; } }
/* la correction redessine la manche : pas de seconde distribution */
.sr-round.answered :is(.sr-char, .sr-chrono-card, .sr-memory-card, .sr-scroll, .sr-scroll-txt i, .sr-opt:not(.good, .bad)) { animation: none; }
/* réponses : repère (A B C D) à gauche, raccourci clavier */
.sr-opt { animation: srRise .4s cubic-bezier(.2, 1, .3, 1) backwards; animation-delay: calc(.1s + var(--k, 0) * .06s); transition: border-color .2s, background .2s, transform .2s cubic-bezier(.2, 1.3, .4, 1); }
.sr-opt kbd { display: grid; place-items: center; flex: none; width: calc(30px * var(--ui)); height: calc(30px * var(--ui)); border-radius: calc(8px * var(--ui)); background: var(--surface-3); color: var(--muted); font: 700 calc(13px * var(--ui))/1 var(--mono); transition: background .2s, color .2s, transform .2s; }
.sr-opt kbd .i, .sr-opt.good kbd .i, .sr-opt.bad kbd .i { width: calc(17px * var(--ui)); height: calc(17px * var(--ui)); stroke-width: 3; color: inherit; }
.sr-opt:not(:disabled):hover { border-color: var(--sr); transform: translateX(calc(3px * var(--ui))); }
.sr-opt:not(:disabled):hover kbd { background: var(--sr); color: #111; }
.sr-opt.good kbd { background: var(--green); color: #0d1a0b; }
.sr-opt.bad kbd { background: var(--red); color: #fff; }
.sr-opt.good { animation: srGood .5s cubic-bezier(.2, 1.5, .4, 1); }
.sr-opt.bad { animation: srBad .4s; }
@keyframes srGood { 40% { transform: scale(1.03); } }
@keyframes srBad { 20%, 60% { transform: translateX(calc(-5px * var(--ui))); } 40%, 80% { transform: translateX(calc(5px * var(--ui))); } }
.sr-keys { display: inline-flex; gap: calc(4px * var(--ui)); font-size: calc(11px * var(--ui)); }
.sr-keys kbd, .sr-char-img kbd { padding: calc(2px * var(--ui)) calc(6px * var(--ui)); border-radius: calc(5px * var(--ui)); background: var(--surface-3); color: var(--muted); font: 700 calc(11px * var(--ui))/1.3 var(--mono); }

/* Millésime : année en volets, règle des décennies */
.sr-flap { display: inline-flex; gap: .07em; letter-spacing: 0; }
.sr-flap i { position: relative; display: grid; place-items: center; width: .74em; height: 1.16em; border-radius: .09em; background: linear-gradient(var(--surface-2) 50%, var(--surface) 50%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07), 0 .1em .2em -.08em #000; font-style: normal; perspective: 4em; }
.sr-flap i::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: calc(2px * var(--ui)); margin-top: -1px; background: rgba(0, 0, 0, .55); }
.sr-flap b { font-weight: 700; }
.sr-flap i.flip b { animation: srFlap .34s cubic-bezier(.3, 1.4, .5, 1); }
@keyframes srFlap { from { transform: rotateX(-100deg); opacity: .2; } }
.sr-play .sr-yr-v { font-size: clamp(calc(54px * var(--ui)), 7.6vw, calc(96px * var(--ui))); }
.sr-round.answered .sr-flap b { color: var(--green); }
.sr-yr-tags { display: flex; flex-wrap: wrap; gap: calc(6px * var(--ui)); }
.sr-yr-tags i { padding: calc(3px * var(--ui)) calc(9px * var(--ui)); border-radius: calc(999px * var(--ui)); font-size: calc(12px * var(--ui)); font-style: normal; font-weight: 600; color: color-mix(in srgb, var(--sr) 80%, var(--text)); background: color-mix(in srgb, var(--sr) 12%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sr) 30%, transparent); }
.sr-yr-ctl input { accent-color: var(--sr); }
.sr-step:hover { border-color: var(--sr); color: var(--sr); background: color-mix(in srgb, var(--sr) 10%, var(--surface)); }
.sr-yr-track { position: relative; flex: 1; display: grid; min-width: 0; }
.sr-yr-track input { width: 100%; margin: 0; }
.sr-ruler { position: relative; height: calc(22px * var(--ui)); margin: calc(6px * var(--ui)) calc(8px * var(--ui)) 0; }
.sr-ruler span { position: absolute; top: calc(6px * var(--ui)); translate: -50% 0; color: var(--muted); font: 600 calc(10.5px * var(--ui))/1 var(--mono); }
.sr-ruler span::before { content: ""; position: absolute; left: 50%; top: calc(-6px * var(--ui)); width: 1px; height: calc(4px * var(--ui)); background: var(--line-2); }
/* après la réponse : barre, écart coloré, ton estimation et la vraie année épinglées */
.sr-ruler.on { --c: var(--red); width: min(100%, calc(620px * var(--ui))); height: calc(26px * var(--ui)); margin: calc(46px * var(--ui)) 0 0; border-top: calc(4px * var(--ui)) solid var(--surface-3); }
.sr-ruler.on.near { --c: var(--amber); } .sr-ruler.on.ok { --c: var(--green); }
.sr-ruler.on.close { margin-top: calc(74px * var(--ui)); }
.sr-ruler-gap { position: absolute; top: calc(-4px * var(--ui)); height: calc(4px * var(--ui)); min-width: calc(4px * var(--ui)); background: var(--c); transform-origin: left; animation: srGap .6s .45s cubic-bezier(.2, 1, .3, 1) backwards; }
@keyframes srGap { from { transform: scaleX(0); } }
.sr-ruler-pin { position: absolute; bottom: calc(100% + calc(12px * var(--ui))); translate: -50% 0; padding: calc(4px * var(--ui)) calc(8px * var(--ui)); border-radius: calc(6px * var(--ui)); font: 700 calc(13px * var(--ui))/1 var(--mono); white-space: nowrap; animation: srRise .4s cubic-bezier(.2, 1.3, .4, 1) backwards; }
.sr-ruler-pin::after { content: ""; position: absolute; left: 50%; top: 100%; width: calc(2px * var(--ui)); height: calc(12px * var(--ui)); margin-left: -1px; background: inherit; }
.sr-ruler-pin.real { background: var(--green); color: #0d1a0b; animation-delay: .5s; }
.sr-ruler-pin.guess { background: var(--c); color: #111; }
.sr-ruler.close .sr-ruler-pin.guess { bottom: calc(100% + calc(40px * var(--ui))); }
.sr-ruler.close .sr-ruler-pin.guess::after { height: calc(40px * var(--ui)); }
.sr-yr-row { display: flex; align-items: center; flex-wrap: wrap; gap: calc(14px * var(--ui)) calc(20px * var(--ui)); }
.sr-yr-lbl { font-size: calc(12px * var(--ui)); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.sr-yr-gapt { --c: var(--red); padding: calc(6px * var(--ui)) calc(12px * var(--ui)); border-radius: calc(999px * var(--ui)); font-size: calc(14px * var(--ui)); font-style: normal; font-weight: 700; color: var(--c); background: color-mix(in srgb, var(--c) 14%, transparent); animation: srRise .4s .6s backwards; }
.sr-yr-gapt.near { --c: var(--amber); } .sr-yr-gapt.ok { --c: var(--green); }

/* Intrus : éventail de cartes, coup de tampon sur l'intrus */
.sr-chars { padding-top: calc(8px * var(--ui)); }
.sr-char { position: relative; box-shadow: 0 calc(18px * var(--ui)) calc(30px * var(--ui)) calc(-20px * var(--ui)) #000; transform: rotate(calc((var(--k) - 1.5) * 2.2deg)) translateY(calc((var(--k) - 1.5) * (var(--k) - 1.5) * calc(3px * var(--ui)))); animation: srDeal .55s cubic-bezier(.2, 1.2, .4, 1) backwards; animation-delay: calc(var(--k) * 90ms); transition: border-color .2s, transform .3s cubic-bezier(.2, 1.3, .4, 1), box-shadow .3s; }
.sr-char:not(:disabled):hover { transform: translateY(calc(-10px * var(--ui))) scale(1.03); border-color: var(--sr); box-shadow: 0 0 0 calc(2px * var(--ui)) var(--sr), 0 calc(26px * var(--ui)) calc(40px * var(--ui)) calc(-18px * var(--ui)) color-mix(in srgb, var(--sr) 55%, transparent); }
.sr-char:not(:disabled):active { transform: translateY(calc(-4px * var(--ui))) scale(.98); }
.sr-char-img { overflow: hidden; }
.sr-char-img img { transition: transform .5s cubic-bezier(.2, 1, .3, 1); }
.sr-char:not(:disabled):hover .sr-char-img img { transform: scale(1.06); }
.sr-char-img kbd { position: absolute; left: calc(8px * var(--ui)); top: calc(8px * var(--ui)); background: rgba(10, 9, 8, .78); }
.sr-char.same { opacity: .55; filter: grayscale(.6); transform: none; }
.sr-char.same small { color: var(--sr); font-weight: 700; }
.sr-char.is-odd { transform: translateY(calc(-8px * var(--ui))) rotate(-1.5deg); }
.sr-stamp { position: absolute; left: 50%; top: 16%; padding: calc(5px * var(--ui)) calc(10px * var(--ui)); border: calc(3px * var(--ui)) solid var(--green); border-radius: calc(8px * var(--ui)); color: var(--green); background: rgba(10, 9, 8, .55); font: 800 clamp(calc(16px * var(--ui)), 1.8vw, calc(24px * var(--ui)))/1 var(--jp); letter-spacing: .06em; white-space: nowrap; translate: -50% 0; transform: rotate(-12deg); animation: srStamp .5s .15s cubic-bezier(.2, 1.4, .4, 1) backwards; }
.sr-stamp.missed { border-color: var(--red); color: var(--red); }

/* Zoom : viseur (coins, mire, grossissement, points en jeu) ; l'image recule à la réponse */
.sr-zoom-frame { border: 0; box-shadow: 0 0 0 1px var(--line), 0 calc(26px * var(--ui)) calc(50px * var(--ui)) calc(-30px * var(--ui)) #000; }
.sr-zoom-frame::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(transparent 0 47%, color-mix(in srgb, var(--sr) 14%, transparent) 50%, transparent 53%) 0 0 / 100% 220%; animation: srScan 5s linear infinite; }
@keyframes srScan { from { background-position: 0 120%; } to { background-position: 0 -120%; } }
.sr-vf { position: absolute; inset: calc(12px * var(--ui)); pointer-events: none; transition: opacity .4s, inset .5s cubic-bezier(.2, 1, .3, 1); }
.sr-vf i { position: absolute; width: calc(26px * var(--ui)); height: calc(26px * var(--ui)); border: 0 solid var(--sr); filter: drop-shadow(0 0 calc(6px * var(--ui)) color-mix(in srgb, var(--sr) 60%, transparent)); }
.sr-vf i:nth-child(1) { left: 0; top: 0; border-width: calc(3px * var(--ui)) 0 0 calc(3px * var(--ui)); border-radius: calc(6px * var(--ui)) 0 0 0; }
.sr-vf i:nth-child(2) { right: 0; top: 0; border-width: calc(3px * var(--ui)) calc(3px * var(--ui)) 0 0; border-radius: 0 calc(6px * var(--ui)) 0 0; }
.sr-vf i:nth-child(3) { left: 0; bottom: 0; border-width: 0 0 calc(3px * var(--ui)) calc(3px * var(--ui)); border-radius: 0 0 0 calc(6px * var(--ui)); }
.sr-vf i:nth-child(4) { right: 0; bottom: 0; border-width: 0 calc(3px * var(--ui)) calc(3px * var(--ui)) 0; border-radius: 0 0 calc(6px * var(--ui)) 0; }
.sr-vf::before, .sr-vf::after { content: ""; position: absolute; left: 50%; top: 50%; background: color-mix(in srgb, var(--sr) 75%, transparent); }
.sr-vf::before { width: calc(22px * var(--ui)); height: calc(2px * var(--ui)); margin: -1px 0 0 calc(-11px * var(--ui)); }
.sr-vf::after { width: calc(2px * var(--ui)); height: calc(22px * var(--ui)); margin: calc(-11px * var(--ui)) 0 0 -1px; }
.sr-vf-mag, .sr-vf-worth { position: absolute; top: calc(20px * var(--ui)); display: flex; align-items: center; gap: calc(5px * var(--ui)); padding: calc(5px * var(--ui)) calc(9px * var(--ui)); border-radius: calc(7px * var(--ui)); background: rgba(8, 10, 10, .72); backdrop-filter: blur(calc(6px * var(--ui))); }
.sr-vf-mag { right: calc(48px * var(--ui)); color: var(--sr); font: 700 calc(14px * var(--ui))/1 var(--mono); }
.sr-vf-worth { left: calc(48px * var(--ui)); }
.sr-vf-worth i { width: calc(8px * var(--ui)); height: calc(8px * var(--ui)); border-radius: 50%; background: rgba(255, 255, 255, .18); transition: background .3s; }
.sr-vf-worth i.on { background: var(--sr); box-shadow: 0 0 calc(8px * var(--ui)) var(--sr); }
.sr-zoom-frame.open::after, .sr-zoom-frame.open .sr-vf { opacity: 0; }
.sr-zoom-frame.open .sr-vf { inset: calc(-10px * var(--ui)); }
.sr-zoom-bar { display: flex; align-items: center; flex-wrap: wrap; gap: calc(8px * var(--ui)) calc(14px * var(--ui)); }

/* Chronologie : frise « plus ancien → plus récent » sous les affiches */
.sr-chrono, .sr-rail { --gap: clamp(calc(10px * var(--ui)), 2vw, calc(22px * var(--ui))); width: 100%; max-width: calc(820px * var(--ui)); }
.sr-chrono { gap: var(--gap); }
.sr-chrono-card { box-shadow: 0 calc(18px * var(--ui)) calc(30px * var(--ui)) calc(-22px * var(--ui)) #000; animation: srDeal .5s cubic-bezier(.2, 1.2, .4, 1) backwards; animation-delay: calc(var(--k) * 90ms); }
.sr-chrono-card.bad { opacity: .75; border-color: var(--red); box-shadow: 0 0 0 calc(2px * var(--ui)) var(--red); }
.sr-rail { position: relative; height: calc(46px * var(--ui)); margin-top: calc(2px * var(--ui)); }
.sr-rail-line { position: absolute; left: 0; right: calc(10px * var(--ui)); top: calc(20px * var(--ui)); height: calc(3px * var(--ui)); border-radius: calc(2px * var(--ui)); background: linear-gradient(90deg, color-mix(in srgb, var(--sr) 15%, transparent), var(--sr)); }
.sr-rail-line::after { content: ""; position: absolute; right: calc(-10px * var(--ui)); top: calc(-5px * var(--ui)); border: calc(6.5px * var(--ui)) solid transparent; border-left: calc(10px * var(--ui)) solid var(--sr); border-right: 0; }
.sr-rail-line i { position: absolute; top: calc(-5px * var(--ui)); left: calc((100% + calc(10px * var(--ui)) - 2 * var(--gap)) / 6 + var(--k) * ((100% + calc(10px * var(--ui)) - 2 * var(--gap)) / 3 + var(--gap))); width: calc(13px * var(--ui)); height: calc(13px * var(--ui)); margin-left: calc(-6.5px * var(--ui)); border-radius: 50%; background: var(--bg-2); box-shadow: 0 0 0 calc(3px * var(--ui)) var(--sr); font-style: normal; transition: background .3s; }
.sr-rail-line i.good { background: var(--green); box-shadow: 0 0 0 calc(3px * var(--ui)) var(--green), 0 0 calc(12px * var(--ui)) var(--green); }
.sr-rail-line i.bad { background: var(--red); box-shadow: 0 0 0 calc(3px * var(--ui)) var(--red); }
.sr-rail-line i b { position: absolute; left: 50%; top: calc(19px * var(--ui)); translate: -50% 0; font: 700 calc(13px * var(--ui))/1 var(--mono); white-space: nowrap; animation: srRise .4s backwards; animation-delay: calc(.2s + var(--k) * .12s); }
.sr-rail-line i.good b { color: var(--green); } .sr-rail-line i.bad b { color: var(--red); }
.sr-rail-end { position: absolute; top: 0; font-size: calc(10.5px * var(--ui)); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.sr-rail-end:first-child { left: 0; } .sr-rail-end:last-child { right: 0; color: var(--sr); }

/* Mémoire : cartes qui se retournent ; la disparue reste face cachée, puis se dévoile à la réponse */
.sr-memory-card { overflow: visible; border: 0; background: none; perspective: calc(900px * var(--ui)); animation: srDeal .5s cubic-bezier(.2, 1.2, .4, 1) backwards; animation-delay: calc(var(--k) * 70ms); }
.sr-mc-in { position: absolute; inset: 0; transform-style: preserve-3d; }
.sr-mc-front, .sr-mc-back { position: absolute; inset: 0; overflow: hidden; border-radius: calc(9px * var(--ui)); backface-visibility: hidden; }
.sr-mc-front { border: 1px solid var(--line); background: var(--surface); }
.sr-mc-front img { width: 100%; height: 100%; object-fit: cover; }
.sr-mc-back { display: grid; place-items: center; transform: rotateY(180deg); border: 1px solid color-mix(in srgb, var(--sr) 50%, transparent);
  background: repeating-linear-gradient(45deg, color-mix(in srgb, var(--sr) 24%, #17121c) 0 calc(6px * var(--ui)), color-mix(in srgb, var(--sr) 12%, #120e16) calc(6px * var(--ui)) calc(12px * var(--ui))); }
.sr-mc-back em { display: grid; place-items: center; width: 52%; aspect-ratio: 1; border-radius: 50%; background: #120e16; box-shadow: 0 0 0 calc(2px * var(--ui)) color-mix(in srgb, var(--sr) 60%, transparent); color: #f1dcfb; font: 700 clamp(calc(16px * var(--ui)), 2.2vw, calc(28px * var(--ui)))/1 var(--jp); font-style: normal; text-shadow: 0 0 calc(12px * var(--ui)) var(--sr); }
.sr-memory.ready:not(.answered) .sr-mc-in { animation: srMemFlip 1s cubic-bezier(.45, 0, .2, 1) both; animation-delay: calc(var(--k) * 45ms); }
.sr-memory.ready:not(.answered) .hole .sr-mc-in { animation-name: srMemHide; }
.sr-memory.ready:not(.answered) .hole .sr-mc-back { animation: srMemPulse 1.6s 1s ease-in-out infinite; }
@keyframes srMemFlip { 0% { transform: none; } 38%, 62% { transform: rotateY(180deg); } 100% { transform: rotateY(360deg); } }
@keyframes srMemHide { 0% { transform: none; } 38%, 100% { transform: rotateY(180deg); } }
@keyframes srMemPulse { 50% { box-shadow: 0 0 0 calc(2px * var(--ui)) var(--sr), 0 0 calc(26px * var(--ui)) color-mix(in srgb, var(--sr) 60%, transparent); } }
.sr-memory.answered .hole .sr-mc-in { animation: srMemShow .7s .1s cubic-bezier(.3, 1.3, .5, 1) both; }
@keyframes srMemShow { from { transform: rotateY(180deg); } to { transform: none; } }
.sr-round.ok .sr-memory .hole .sr-mc-front { box-shadow: 0 0 0 calc(3px * var(--ui)) var(--green); }
.sr-round.ko .sr-memory .hole .sr-mc-front { box-shadow: 0 0 0 calc(3px * var(--ui)) var(--red); }
.sr-memory.answered .sr-memory-card:not(.hole) { opacity: .45; filter: grayscale(.5); transition: opacity .4s, filter .4s; }
.sr-memory-memorize { align-items: center !important; }
.sr-memory-timer { display: block; width: calc(120px * var(--ui)); height: calc(4px * var(--ui)); border-radius: calc(2px * var(--ui)); overflow: hidden; background: var(--surface-3); }
.sr-memory-timer::before { content: ""; display: block; height: 100%; background: var(--sr); transform-origin: left; animation: srTimer 2.8s linear both; }
@keyframes srTimer { to { transform: scaleX(0); } }
.sr-memory.ready:not(.answered) .sr-memory-opts { transition-delay: .5s; }

/* Kanji : rouleau suspendu, encre qui apparaît trait par trait, sceau rouge ; repères iroha en sceaux */
.sr-scroll { position: relative; justify-self: center; width: 100%; animation: srUnroll .7s cubic-bezier(.2, 1, .3, 1) backwards; transform-origin: top; }
.sr-scroll.tate { width: min(100%, calc(240px * var(--ui))); }
.sr-scroll::before, .sr-scroll::after { content: ""; position: absolute; z-index: 2; left: calc(-10px * var(--ui)); right: calc(-10px * var(--ui)); height: calc(14px * var(--ui)); border-radius: calc(7px * var(--ui)); background: linear-gradient(#3a2618, #6b4a30 45%, #2a1a10); box-shadow: 0 calc(6px * var(--ui)) calc(12px * var(--ui)) calc(-4px * var(--ui)) #000; }
.sr-scroll::before { top: calc(-7px * var(--ui)); } .sr-scroll::after { bottom: calc(-7px * var(--ui)); }
@keyframes srUnroll { from { opacity: 0; transform: scaleY(.15); } }
.sr-scroll-paper { position: relative; display: grid; place-items: center; min-height: calc(300px * var(--ui)); padding: calc(40px * var(--ui)) calc(28px * var(--ui)); overflow: hidden; color: #1c1915;
  background: radial-gradient(120% 90% at 30% 20%, #f6efdf, #e9dcc1 70%, #dccba8); box-shadow: 0 calc(30px * var(--ui)) calc(50px * var(--ui)) calc(-28px * var(--ui)) #000, inset 0 0 calc(40px * var(--ui)) rgba(120, 90, 40, .25); }
.sr-scroll.tate .sr-scroll-paper { min-height: calc(380px * var(--ui)); }
.sr-scroll-paper img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; mix-blend-mode: multiply; opacity: .3; filter: grayscale(.3) sepia(.35); animation: srKanjiReveal .9s both; }
.sr-scroll-paper img.veil-facile { opacity: .16; animation: none; }
.sr-scroll-paper img.veil-moyen { opacity: .06; filter: grayscale(.8) sepia(.4) blur(calc(2px * var(--ui))); animation: none; }
.sr-scroll-txt { position: relative; z-index: 1; font: 700 clamp(calc(32px * var(--ui)), 4.4vw, calc(58px * var(--ui)))/1.25 var(--jp-serif); letter-spacing: .06em; text-align: center; }
.sr-scroll.tate .sr-scroll-txt { writing-mode: vertical-rl; text-orientation: mixed; font-size: clamp(calc(40px * var(--ui)), 5.2vw, calc(64px * var(--ui))); }
.sr-scroll-txt i { display: inline-block; font-style: normal; animation: srInk .55s cubic-bezier(.3, .7, .3, 1) backwards; animation-delay: calc(.35s + var(--k) * .11s); }
@keyframes srInk { from { opacity: 0; filter: blur(calc(7px * var(--ui))); transform: scale(1.3); } }
.sr-scroll-seal { position: absolute; z-index: 1; right: calc(14px * var(--ui)); bottom: calc(18px * var(--ui)); display: grid; place-items: center; width: calc(36px * var(--ui)); height: calc(36px * var(--ui)); border-radius: calc(5px * var(--ui)); background: #c8372d; color: #fff3e6; box-shadow: inset 0 0 0 calc(2px * var(--ui)) rgba(255, 240, 230, .35); font: 700 calc(19px * var(--ui))/1 var(--jp); transform: rotate(-6deg); animation: srStamp .45s 1s cubic-bezier(.2, 1.4, .4, 1) backwards; }
.sr-round.answered .sr-scroll-seal { animation-delay: .1s; }
.sr-round.ok .sr-scroll-seal { background: #2f7d43; }
.sr-g-kanji .sr-opt kbd { border-radius: calc(4px * var(--ui)); background: color-mix(in srgb, #c8372d 70%, var(--surface-3)); color: #fff3e6; font: 700 calc(16px * var(--ui))/1 var(--jp); transform: rotate(-5deg); }
.sr-g-kanji .sr-opt:not(:disabled):hover kbd { background: #c8372d; color: #fff3e6; transform: rotate(0deg) scale(1.08); }
.sr-g-kanji .sr-opt.good kbd { background: var(--green); color: #0d1a0b; }
.sr-g-kanji .sr-opt.bad kbd { background: var(--red); color: #fff; }

@media (max-width: 760px) {
  .sr-char { transform: rotate(calc((var(--k) - 1.5) * 1.4deg)); }
  .sr-scroll.tate .sr-scroll-paper { min-height: calc(280px * var(--ui)); }
  .sr-scroll-paper { min-height: calc(200px * var(--ui)); }
  .sr-ruler span:not(:nth-child(3n+1)) { display: none; }
  .sr-vf-worth { display: none; }
}
@media (max-width: 640px) {
  .sr-zone.px-setup-zone .px-lvls { grid-template-columns: 1fr; width: 100%; }
  .sr-zone.px-setup-zone .px-lvl { grid-template-columns: calc(120px * var(--ui)) 1fr; column-gap: calc(14px * var(--ui)); }
  .sr-zone.px-setup-zone .px-lvl-art { width: calc(120px * var(--ui)); margin: 0; }
}
@media (hover: none) { .sr-keys, .sr-char-img kbd { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .sr-opt, .sr-char, .sr-chrono-card, .sr-memory-card, .sr-scroll, .sr-scroll-txt i, .sr-scroll-seal, .sr-stamp, .sr-flap i.flip b, .sr-zoom-frame::after, .sr-ruler-gap, .sr-ruler-pin, .sr-rail-line i b { animation: none; }
  .sr-memory.ready:not(.answered) .sr-mc-in, .sr-memory.answered .hole .sr-mc-in { animation-duration: .01s; }
}

/* --- Jeux à manches : compteur « Manche 3/8 », frise numérotée des manches, réponses lisibles à côté des grandes images --- */
.sr-zone .mg-head { border-bottom: 0; padding-bottom: calc(12px * var(--ui)); }
.sr-n { display: grid; gap: calc(3px * var(--ui)); padding: calc(8px * var(--ui)) calc(18px * var(--ui)) calc(8px * var(--ui)) 0; border-right: 1px solid var(--line-2); font: inherit; color: inherit; }
.sr-n small { margin: 0; font: 700 calc(11px * var(--ui))/1 var(--font); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.sr-n > span { display: flex; align-items: baseline; gap: calc(3px * var(--ui)); font-family: var(--mono); }
.sr-n strong { font: 700 clamp(calc(40px * var(--ui)), 4vw, calc(54px * var(--ui)))/.9 var(--mono); letter-spacing: -.03em; color: var(--sr); }
.sr-n em { font: 600 clamp(calc(18px * var(--ui)), 1.7vw, calc(22px * var(--ui)))/1 var(--mono); font-style: normal; color: var(--muted); }
.sr-zone .sr-total b { font-size: calc(24px * var(--ui)); color: var(--text); }
.sr-zone .sr-total small { font-size: calc(13px * var(--ui)); }
.sr-track { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: calc(6px * var(--ui)); margin: 0 0 calc(4px * var(--ui)); padding: 0; list-style: none; }
.sr-track li { position: relative; display: grid; place-items: center; height: calc(30px * var(--ui)); border-radius: calc(8px * var(--ui)); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); color: var(--muted); font: 700 calc(13px * var(--ui))/1 var(--mono); transition: background .3s, color .3s, transform .3s; }
.sr-track li.won { background: color-mix(in srgb, var(--green) 26%, var(--surface)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--green) 55%, transparent); color: var(--green); }
.sr-track li.near { background: color-mix(in srgb, var(--amber) 22%, var(--surface)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--amber) 55%, transparent); color: var(--amber); }
.sr-track li.lost { background: color-mix(in srgb, var(--red) 20%, var(--surface)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--red) 50%, transparent); color: var(--red); }
.sr-track li.cur { background: var(--sr); box-shadow: 0 calc(6px * var(--ui)) calc(18px * var(--ui)) calc(-8px * var(--ui)) var(--sr); color: #111; }
.sr-track li.on { transform: translateY(calc(-2px * var(--ui))); }
.sr-track li.on::after { content: ""; position: absolute; left: 50%; bottom: calc(-7px * var(--ui)); border: calc(5px * var(--ui)) solid transparent; border-top-color: var(--sr); border-bottom: 0; translate: -50% 0; }
.sr-track li.cur::before { content: ""; position: absolute; inset: calc(-3px * var(--ui)); border-radius: calc(10px * var(--ui)); box-shadow: 0 0 0 calc(2px * var(--ui)) var(--sr); opacity: .5; animation: srTrackPulse 1.8s ease-in-out infinite; }
@keyframes srTrackPulse { 50% { opacity: 0; transform: scale(1.06); } }
.sr-auto span { font-size: calc(13px * var(--ui)); }
.sr-auto i { height: calc(8px * var(--ui)); border-radius: calc(4px * var(--ui)); }
/* réponses : plus grandes, à la mesure des images */
.sr-opts { gap: calc(12px * var(--ui)); }
.sr-opt { min-height: calc(64px * var(--ui)); gap: calc(14px * var(--ui)); padding: calc(14px * var(--ui)) calc(18px * var(--ui)); border-radius: calc(12px * var(--ui)); font-size: clamp(calc(16px * var(--ui)), 1.4vw, calc(20px * var(--ui))); font-weight: 700; line-height: 1.25; }
.sr-opt kbd { width: calc(36px * var(--ui)); height: calc(36px * var(--ui)); border-radius: calc(9px * var(--ui)); font-size: calc(15px * var(--ui)); }
.sr-g-kanji .sr-opt kbd { font-size: calc(19px * var(--ui)); }
.sr-opt kbd .i, .sr-opt.good kbd .i, .sr-opt.bad kbd .i { width: calc(20px * var(--ui)); height: calc(20px * var(--ui)); }
.sr-char b { font-size: clamp(calc(15px * var(--ui)), 1.3vw, calc(18px * var(--ui))); }
.sr-char small { font-size: calc(13px * var(--ui)); }
.sr-chrono-title { font-size: clamp(calc(13px * var(--ui)), 1.1vw, calc(15px * var(--ui))); }
.sr-memory-cue b { font-size: calc(16px * var(--ui)); }
.sr-memory-cue small { font-size: calc(13px * var(--ui)); }
.sr-zoom-bar .btn { height: calc(40px * var(--ui)); font-size: calc(14px * var(--ui)); }
.sr-worth { font-size: calc(14px * var(--ui)); }
@media (max-width: 760px) {
  .sr-n { padding: calc(4px * var(--ui)) calc(12px * var(--ui)) calc(4px * var(--ui)) 0; }
  .sr-n strong { font-size: calc(34px * var(--ui)); }
  .sr-track { gap: calc(4px * var(--ui)); }
  .sr-track li { height: calc(24px * var(--ui)); font-size: calc(11px * var(--ui)); border-radius: calc(6px * var(--ui)); }
  .sr-opt { min-height: calc(54px * var(--ui)); font-size: calc(15px * var(--ui)); }
  .sr-opt kbd { width: calc(30px * var(--ui)); height: calc(30px * var(--ui)); }
}
/* les grandes images laissent la place aux réponses : la manche tient dans l'écran */
@media (min-width: 761px) {
  .sr-zoom-frame { max-height: max(calc(200px * var(--ui)), calc(100dvh - var(--top-h) - calc(440px * var(--ui)))); }
  .sr-memory-grid { width: 100%; max-width: max(calc(520px * var(--ui)), calc((100dvh - var(--top-h) - calc(430px * var(--ui))) * 4.1)); margin-inline: auto; }
  .sr-chars { max-width: max(calc(560px * var(--ui)), calc((100dvh - var(--top-h) - calc(360px * var(--ui))) * 3.1)); margin-inline: auto; }
}
@media (prefers-reduced-motion: reduce) { .sr-track li.cur::before { animation: none; } }
/* --- Jeux à manches : en partie, plus de titre de page ni de spins / 1v1 ; en-tête de manche à la taille de l'écran --- */
.mg-page.sr-playing:not(.mg-duel) > .game-head, .mg-page.sr-playing:not(.mg-duel) > .back-games { display: none; }
.mg-page.sr-playing:not(.mg-duel) > .mg-zone { margin-top: 0; }
.sr-zone .mg-head .qz-kicker { font-size: clamp(calc(12px * var(--ui)), .8vw, calc(15px * var(--ui))); letter-spacing: .14em; margin-bottom: calc(8px * var(--ui)); }
.sr-zone .mg-head > div:first-child > b { gap: clamp(calc(16px * var(--ui)), 1.5vw, calc(28px * var(--ui))); }
.sr-n { gap: calc(4px * var(--ui)); padding-right: clamp(calc(16px * var(--ui)), 1.5vw, calc(28px * var(--ui))); }
.sr-n small { font-size: clamp(calc(11px * var(--ui)), .75vw, calc(14px * var(--ui))); }
.sr-n strong { font-size: clamp(calc(44px * var(--ui)), 4.2vw, calc(80px * var(--ui))); }
.sr-n em { font-size: clamp(calc(20px * var(--ui)), 1.7vw, calc(32px * var(--ui))); }
.sr-q { font-size: calc(clamp(calc(24px * var(--ui)), 2.4vw, calc(46px * var(--ui))) * var(--display-scale)); line-height: 1.1; }
.sr-zone .sr-total { gap: calc(8px * var(--ui)); }
.sr-zone .sr-total b { font-size: clamp(calc(26px * var(--ui)), 2.2vw, calc(42px * var(--ui))); }
.sr-zone .sr-total small { font-size: clamp(calc(13px * var(--ui)), .9vw, calc(17px * var(--ui))); }
.sr-zone .qz-help { transform: scale(1.25); }
.sr-track { gap: clamp(calc(6px * var(--ui)), .5vw, calc(10px * var(--ui))); }
.sr-track li { height: clamp(calc(32px * var(--ui)), 2.4vw, calc(46px * var(--ui))); border-radius: calc(10px * var(--ui)); font-size: clamp(calc(14px * var(--ui)), 1vw, calc(19px * var(--ui))); }
.sr-zoom-bar .btn { height: clamp(calc(40px * var(--ui)), 2.6vw, calc(50px * var(--ui))); padding: 0 clamp(calc(14px * var(--ui)), 1vw, calc(20px * var(--ui))); font-size: clamp(calc(14px * var(--ui)), .95vw, calc(17px * var(--ui))); }
.sr-zoom-bar .btn .i { width: calc(18px * var(--ui)); height: calc(18px * var(--ui)); }
.sr-worth { font-size: clamp(calc(14px * var(--ui)), .9vw, calc(16px * var(--ui))); }
.sr-vf-mag { font-size: clamp(calc(14px * var(--ui)), 1vw, calc(20px * var(--ui))); padding: calc(6px * var(--ui)) calc(11px * var(--ui)); }
.sr-vf-worth i { width: clamp(calc(8px * var(--ui)), .6vw, calc(12px * var(--ui))); height: clamp(calc(8px * var(--ui)), .6vw, calc(12px * var(--ui))); }
.sr-auto span { font-size: clamp(calc(13px * var(--ui)), .85vw, calc(16px * var(--ui))); }
@media (max-width: 760px) {
  .sr-n strong { font-size: calc(36px * var(--ui)); }
  .sr-q { font-size: calc(calc(21px * var(--ui)) * var(--display-scale)); }
  .sr-track li { height: calc(26px * var(--ui)); font-size: calc(12px * var(--ui)); border-radius: calc(6px * var(--ui)); }
  .sr-zone .qz-help { transform: none; }
}
/* Chronologie : une seule consigne, selon que l'appareil a une souris ou un écran tactile */
.sr-help-touch { display: none; }
@media (hover: none), (pointer: coarse) { .sr-help-mouse { display: none; } .sr-help-touch { display: inline; } }
/* menu du jeu rouvert après la partie du jour : « Mes résultats », et le rappel qui s'affiche en touchant « Jouer » */
.sr-zone .px-play-row { align-items: center; gap: calc(10px * var(--ui)); flex-wrap: wrap; }
.sr-zone .px-play-row .sr-results { min-height: calc(56px * var(--ui)); padding-inline: calc(18px * var(--ui)); border-radius: calc(14px * var(--ui)); }
/* partie du jour déjà jouée : le menu reste visible, grisé et inactif (seul « Mes résultats » répond) */
.px-setup-zone.locked .hl-lock { justify-content: center; max-width: calc(520px * var(--ui)); margin: calc(4px * var(--ui)) auto calc(18px * var(--ui)); }
.px-setup-zone.locked .px-lvl { cursor: default; pointer-events: none; filter: grayscale(1) brightness(.55); opacity: .6; transform: none; box-shadow: 0 0 0 1px var(--line); }
.px-setup-zone.locked .px-lvl.on { opacity: .8; box-shadow: 0 0 0 1px var(--line-2); }
/* points gagnés : le compteur saute (pas de bandeau de verdict, les couleurs de la correction suffisent) */
.sr-total.bump b { color: var(--green); animation: srBump .55s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes srBump { 40% { transform: scale(1.35); } }
.sr-total b { display: inline-block; }
@media (prefers-reduced-motion: reduce) { .sr-total.bump b { animation: none; } }
/* chrono par manche (Kanji) : barre qui se vide sous la frise, rouge sur les 5 dernières secondes */
.sr-timer { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: calc(12px * var(--ui)); margin: calc(12px * var(--ui)) 0 0; }
.sr-timer i { display: block; height: calc(8px * var(--ui)); border-radius: calc(4px * var(--ui)); overflow: hidden; background: var(--surface-3); }
.sr-timer i::before { content: ""; display: block; height: 100%; border-radius: inherit; background: var(--sr); transform-origin: left; animation: srClock var(--d) linear both; transition: background .3s; }
@keyframes srClock { from { transform: scaleX(var(--from)); } to { transform: scaleX(0); } }
.sr-timer b { min-width: 2.2ch; font: 700 clamp(calc(18px * var(--ui)), 1.4vw, calc(26px * var(--ui)))/1 var(--mono); text-align: right; color: var(--sr); transition: color .3s; }
.sr-timer.low i::before { background: var(--red); }
.sr-timer.low b { color: var(--red); animation: srClockLow 1s ease-in-out infinite; }
@keyframes srClockLow { 50% { transform: scale(1.15); } }
.sr-timer.out { grid-template-columns: auto; justify-content: start; }
.sr-timer.out b { min-width: 0; padding: calc(6px * var(--ui)) calc(12px * var(--ui)); border-radius: calc(999px * var(--ui)); font: 700 calc(14px * var(--ui))/1 var(--font); color: var(--red); background: color-mix(in srgb, var(--red) 14%, transparent); }
@media (prefers-reduced-motion: reduce) { .sr-timer.low b { animation: none; } }
/* Kanji : titre long, écrit plus petit pour tenir dans le rouleau (un mot latin très long peut encore passer à la ligne) */
.sr-scroll.long .sr-scroll-txt { font-size: clamp(calc(24px * var(--ui)), 2.8vw, calc(40px * var(--ui))); }
.sr-scroll-txt i { overflow-wrap: anywhere; }
/* --- Jeux à manches : écran de fin propre à chaque jeu (une carte par manche, couleur = résultat) --- */
.sr-res { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: calc(14px * var(--ui)); margin: calc(18px * var(--ui)) 0 0; padding: 0; list-style: none; }
.sr-res-c { --c: var(--red); position: relative; display: grid; gap: calc(8px * var(--ui)); align-content: start; min-width: 0; padding: calc(12px * var(--ui)); border-radius: calc(14px * var(--ui)); background: color-mix(in srgb, var(--c) 6%, var(--surface)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 45%, var(--line)); animation: srDeal .5s cubic-bezier(.2, 1.2, .4, 1) backwards; animation-delay: calc(var(--k) * 60ms); }
.sr-res-c.ok { --c: var(--green); } .sr-res-c.near { --c: var(--amber); }
.sr-res-t { min-width: 0; font-size: calc(15px * var(--ui)); font-weight: 700; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sr-res-sub { min-width: 0; font-size: calc(12.5px * var(--ui)); color: var(--muted); line-height: 1.35; }
.sr-res-sub b { color: var(--c); font-family: var(--mono); }
.sr-res-n { position: absolute; z-index: 2; left: calc(8px * var(--ui)); top: calc(8px * var(--ui)); display: grid; place-items: center; width: calc(26px * var(--ui)); height: calc(26px * var(--ui)); border-radius: 50%; background: var(--c); color: #111; font: 800 calc(13px * var(--ui))/1 var(--mono); box-shadow: 0 calc(4px * var(--ui)) calc(10px * var(--ui)) rgba(0, 0, 0, .45); }
.sr-res img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* les images remplissent leur cadre sans peser sur sa taille (sinon la case prend la taille naturelle de l'image) */
.sr-res-cover, .sr-res-row i, .sr-res-banner, .sr-res-grid i { position: relative; display: block; min-width: 0; min-height: 0; }
.sr-res-cover img, .sr-res-row img, .sr-res-banner img, .sr-res-grid img { position: absolute; inset: 0; }
/* Millésime : jaquette à gauche, année en volets, estimation et écart */
.sr-res-yr .sr-res-c { grid-template-columns: calc(84px * var(--ui)) minmax(0, 1fr); grid-template-areas: "cover flap" "cover t" "cover sub"; column-gap: calc(14px * var(--ui)); align-items: start; }
.sr-res-cover { grid-area: cover; position: relative; aspect-ratio: 2 / 3; border-radius: calc(8px * var(--ui)); overflow: hidden; box-shadow: 0 calc(10px * var(--ui)) calc(18px * var(--ui)) calc(-10px * var(--ui)) #000; }
.sr-res-cover em { position: absolute; right: calc(4px * var(--ui)); bottom: calc(4px * var(--ui)); padding: calc(3px * var(--ui)) calc(6px * var(--ui)); border-radius: calc(6px * var(--ui)); background: var(--c); color: #111; font: 800 calc(11px * var(--ui))/1 var(--mono); font-style: normal; }
.sr-res-yr .sr-flap { grid-area: flap; font: 700 calc(30px * var(--ui))/1 var(--mono); }
.sr-res-yr .sr-flap b { color: var(--c); }
.sr-res-yr .sr-res-t { grid-area: t; } .sr-res-yr .sr-res-sub { grid-area: sub; }
/* Intrus : les quatre portraits, l'intrus tamponné et cerclé de vert, ton mauvais choix en rouge */
.sr-res-in { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sr-res-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: calc(6px * var(--ui)); }
.sr-res-row i { position: relative; aspect-ratio: 3 / 4; border-radius: calc(8px * var(--ui)); overflow: hidden; filter: grayscale(.7) brightness(.6); }
.sr-res-row img { object-position: top; }
.sr-res-row i.odd { filter: none; box-shadow: 0 0 0 calc(3px * var(--ui)) var(--green); }
.sr-res-c.ko .sr-res-row i.odd { box-shadow: 0 0 0 calc(3px * var(--ui)) var(--amber); }
.sr-res-row i.picked { filter: none; box-shadow: 0 0 0 calc(3px * var(--ui)) var(--red); }
.sr-res-row em { position: absolute; left: 50%; top: 10%; padding: calc(2px * var(--ui)) calc(5px * var(--ui)); border: calc(2px * var(--ui)) solid var(--green); border-radius: calc(5px * var(--ui)); color: var(--green); background: rgba(10, 9, 8, .6); font: 800 calc(11px * var(--ui))/1 var(--jp); font-style: normal; white-space: nowrap; translate: -50% 0; transform: rotate(-10deg); }
.sr-res-c.ko .sr-res-row em { border-color: var(--amber); color: var(--amber); }
.sr-res-in .sr-res-n { left: calc(4px * var(--ui)); top: calc(4px * var(--ui)); }
/* Zoom : la bannière entière, la loupe sur le détail (le reste assombri), points en pastilles */
.sr-res-zm { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sr-res-banner { position: relative; aspect-ratio: 16 / 6; border-radius: calc(10px * var(--ui)); overflow: hidden; }
.sr-res-lens { position: absolute; width: 26%; aspect-ratio: 1; border-radius: 50%; translate: -50% -50%; box-shadow: 0 0 0 calc(3px * var(--ui)) var(--sr), 0 0 0 calc(999px * var(--ui)) rgba(6, 8, 8, .5); }
.sr-res-dots { position: absolute; left: calc(8px * var(--ui)); bottom: calc(8px * var(--ui)); display: flex; gap: calc(4px * var(--ui)); padding: calc(5px * var(--ui)) calc(7px * var(--ui)); border-radius: calc(7px * var(--ui)); background: rgba(8, 10, 10, .75); }
.sr-res-dots i { width: calc(8px * var(--ui)); height: calc(8px * var(--ui)); border-radius: 50%; background: rgba(255, 255, 255, .2); }
.sr-res-dots i.on { background: var(--c); box-shadow: 0 0 calc(6px * var(--ui)) var(--c); }
/* Mémoire : la galerie de six, la place de l'affiche disparue entourée */
.sr-res-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(5px * var(--ui)); }
.sr-res-grid i { aspect-ratio: 2 / 3; border-radius: calc(6px * var(--ui)); overflow: hidden; filter: grayscale(.6) brightness(.55); }
.sr-res-grid i.hole { filter: none; box-shadow: 0 0 0 calc(3px * var(--ui)) var(--c), 0 0 calc(14px * var(--ui)) color-mix(in srgb, var(--c) 50%, transparent); }
/* Kanji : petit rouleau, titre au pinceau, sceau 正 (vert) ou 誤 (rouge) */
.sr-res-kj .sr-res-c { padding-top: calc(16px * var(--ui)); }
.sr-res-paper { position: relative; display: grid; place-items: center; min-height: calc(150px * var(--ui)); padding: calc(16px * var(--ui)) calc(12px * var(--ui)); overflow: hidden; border-radius: calc(3px * var(--ui)); color: #1c1915; background: radial-gradient(120% 90% at 30% 20%, #f6efdf, #e4d5b6 75%); box-shadow: 0 calc(-5px * var(--ui)) 0 -1px #4a3020, 0 calc(5px * var(--ui)) 0 -1px #4a3020, 0 calc(14px * var(--ui)) calc(22px * var(--ui)) calc(-14px * var(--ui)) #000; }
.sr-res-paper img { position: absolute; inset: 0; mix-blend-mode: multiply; opacity: .2; filter: grayscale(.3) sepia(.35); }
.sr-res-jp { position: relative; font: 700 calc(22px * var(--ui))/1.3 var(--jp-serif); text-align: center; overflow-wrap: anywhere; }
.sr-res-jp.tate { writing-mode: vertical-rl; font-size: calc(26px * var(--ui)); }
.sr-res-paper em { position: absolute; right: calc(8px * var(--ui)); bottom: calc(8px * var(--ui)); display: grid; place-items: center; width: calc(28px * var(--ui)); height: calc(28px * var(--ui)); border-radius: calc(4px * var(--ui)); background: var(--c); color: #fff; font: 700 calc(16px * var(--ui))/1 var(--jp); font-style: normal; transform: rotate(-6deg); }
.sr-res-c.ok .sr-res-paper em { background: #2f7d43; }
.sr-res-sub s { color: var(--red); }
@media (max-width: 1100px) { .sr-res { grid-template-columns: repeat(3, minmax(0, 1fr)); } .sr-res-in, .sr-res-zm { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .sr-res { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(10px * var(--ui)); } .sr-res-in, .sr-res-zm, .sr-res-yr { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { .sr-res-c { animation: none; } }
/* bandeau de fin des jeux : « Partie terminée » en titre, gros boutons (la page peut défiler, rien à tasser) */
.mg-zone > .mg-done { gap: calc(24px * var(--ui)); padding: calc(20px * var(--ui)) calc(24px * var(--ui)); }
.mg-zone > .mg-done .mg-done-n { min-width: calc(76px * var(--ui)); font-size: calc(calc(52px * var(--ui)) * var(--display-scale)); }
.mg-zone > .mg-done .mg-done-n small { font-size: calc(13px * var(--ui)); }
.mg-zone > .mg-done .mg-done-t > .qz-kicker { display: block; color: var(--text); font: var(--display-w) calc(calc(26px * var(--ui)) * var(--display-scale)) / 1.15 var(--display); letter-spacing: 0; text-transform: none; }
.mg-zone > .mg-done .mg-done-t small { display: block; margin-top: calc(6px * var(--ui)); font-size: calc(15px * var(--ui)); }
.mg-zone > .mg-done .mg-done-a { gap: calc(10px * var(--ui)); }
.mg-zone > .mg-done .mg-done-a .btn { min-height: calc(48px * var(--ui)); padding: 0 calc(20px * var(--ui)); border-radius: calc(12px * var(--ui)); font-size: calc(15.5px * var(--ui)); }
.mg-zone > .mg-done .mg-done-a .btn svg { width: calc(18px * var(--ui)); height: calc(18px * var(--ui)); }
/* niveaux : l'entrée ne se joue qu'une fois (sinon la carte qui perd « on », dont l'animation était coupée, la rejoue et s'efface) */
.px-lvls.shown .px-lvl { animation: none; }

/* Hors ligne : bibliothèque locale, changements en attente du réseau (paintOffline dans app.js) */
#offline-bar { position: fixed; top: calc(var(--top-h) + calc(10px * var(--ui))); left: 50%; transform: translateX(-50%); z-index: 150; display: flex; align-items: center; gap: calc(10px * var(--ui)); max-width: calc(100vw - calc(32px * var(--ui))); padding: calc(7px * var(--ui)) calc(14px * var(--ui)); border-radius: calc(999px * var(--ui)); border: 1px solid var(--line); background: var(--bg); color: var(--text); font-size: calc(13px * var(--ui)); box-shadow: 0 calc(10px * var(--ui)) calc(30px * var(--ui)) calc(-18px * var(--ui)) rgba(0, 0, 0, .8); white-space: nowrap; }
#offline-bar > b { color: var(--amber); }
#offline-bar.is-online > b { color: var(--text); }
#offline-bar > span { color: var(--muted); overflow: hidden; text-overflow: ellipsis; }
#offline-bar .offline-count { padding-left: calc(10px * var(--ui)); border-left: 1px solid var(--line); color: var(--text); }
@media (max-width: 560px) { #offline-bar > span:not(.offline-count) { display: none; } }