/* Arène Pinceau (docs/style/design-system.md): a night hall, cream stickers, ink, three strong colours and nothing else.
   No gradient, no frosted glass, no flat panel without an outline. Fonts from assets/fonts. */
@font-face { font-family: "Lilita One"; src: url("/fonts/LilitaOne-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Baloo 2"; src: url("/fonts/Baloo2-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Baloo 2"; src: url("/fonts/Baloo2-800.woff2") format("woff2"); font-weight: 800; font-display: swap; }

:root {
  --bleu: #2f7bff; --rouge: #ff3d45; --or: #ffc21a;
  --bleu-texte: #1d5fd8; --rouge-texte: #d81f2a;
  --creme: #fff4df; --toile: #e9e0cc; --encre: #1b1422; --gris: #675b7c;
  --mur: #120d1c; --nuit: #1c1530; --foule: #3a2f52;
  --epique: #9b5cff;
  color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
.cache-visuel { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
html { background: var(--mur); scrollbar-gutter: stable; }
/* Nothing of Windows' own: scrollbars, selection, touch flash. Neutral, on the night and on the stickers. */
* { scrollbar-width: thin; scrollbar-color: var(--foule) transparent; -webkit-tap-highlight-color: transparent; }
.sticker * { scrollbar-color: var(--gris) transparent; }
::selection { background: var(--or); color: var(--encre); }
body {
  margin: 0; min-height: 100vh; color: var(--creme);
  font: 600 16px/1.45 "Baloo 2", system-ui, sans-serif;
}
h1, h2, h3 { font-family: "Lilita One", sans-serif; font-weight: 400; margin: 0; letter-spacing: .01em; }
p { margin: 0; }
button { font: inherit; color: inherit; cursor: pointer; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--or); outline-offset: 2px; }

/* A big word: Lilita One outlined in ink, about 1/5 of its size */
.mot { color: var(--creme); paint-order: stroke fill; -webkit-text-stroke: .2em var(--encre); }
.mot.or { color: var(--or); }

.haut { display: flex; align-items: center; gap: 16px; padding: 14px clamp(16px, 3vw, 40px); background: var(--nuit); border-bottom: 3px solid var(--encre); position: sticky; top: 0; z-index: 5; }
.logo { font: 400 26px/1 "Lilita One", sans-serif; text-decoration: none; white-space: nowrap; }
.menu { display: flex; gap: 4px; }
.menu a { padding: 4px 12px; font-weight: 800; text-decoration: none; border-radius: 8px; white-space: nowrap; }
.menu a:hover { background: var(--foule); }
.menu a[aria-current="page"] { background: var(--creme); color: var(--encre); }
#mon-profil { white-space: nowrap; }
.haut .espace { flex: 1; }

.etat { display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px; background: var(--encre); border: 2px solid var(--foule); border-radius: 8px; font-weight: 800; font-size: 14px; }
.etat .point { width: 10px; height: 10px; border-radius: 50%; background: var(--gris); flex: none; }
.etat.en-ligne { border-color: var(--or); }
.etat.en-ligne .point { background: var(--or); }

/* The sticker: cream card, ink outline, hard ink shadow, a little crooked */
.sticker { background: var(--creme); color: var(--encre); border: 3px solid var(--encre); border-radius: 10px; box-shadow: 5px 5px 0 var(--encre); }
.sticker.nuit { background: var(--nuit); color: var(--creme); border-color: var(--encre); }
.penche-g { transform: rotate(-1.2deg); }
.penche-d { transform: rotate(1deg); }

.bouton { display: inline-block; padding: 10px 20px; font: 800 17px/1.2 "Baloo 2", sans-serif; text-decoration: none; background: var(--or); color: var(--encre); border: 3px solid var(--encre); border-radius: 10px; box-shadow: 4px 4px 0 var(--encre); transition: transform 90ms, box-shadow 90ms; }
.bouton:hover { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--encre); }
.bouton:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--encre); }
.bouton.discret { background: var(--creme); }
.bouton.petit { padding: 4px 12px; font-size: 14px; box-shadow: 2px 2px 0 var(--encre); border-width: 2px; border-radius: 8px; }
.bouton[disabled] { background: var(--toile); color: var(--gris); cursor: default; box-shadow: none; transform: none; }

/* Home */
.scene { position: relative; overflow: hidden; border-bottom: 3px solid var(--encre); background: var(--mur); scroll-margin-top: 80px; }
/* The crowd only: the drawing goes on below with the name of the game, written many times */
.scene::before { content: ""; position: absolute; inset: 0 0 auto; aspect-ratio: 1920 / 400; background: url("/hud/fond-site.webp") 0 0 / 100% auto no-repeat; opacity: .4; }
.scene-dedans { position: relative; max-width: 1640px; margin: 0 auto; padding: clamp(28px, 4vw, 56px) clamp(16px, 3vw, 40px); display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(24px, 3vw, 48px); align-items: center; }
.logo-site { display: block; width: min(100%, 560px); height: auto; margin-left: -3%; }
.heros .accroche { margin: 20px 0 24px; padding: 12px 16px; max-width: 32em; font-size: 18px; display: inline-block; }
.bouton.gros { padding: 14px 44px; font: 400 30px/1 "Lilita One", sans-serif; }
.ecran { position: relative; aspect-ratio: 16 / 9; background: var(--nuit); overflow: hidden; min-width: 0; }
.ecran iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.ecran-repos { position: absolute; inset: 0; display: grid; place-items: center; }
.scene-repos { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.ecran-note { position: absolute; bottom: 14px; left: 50%; translate: -50% 0; padding: 4px 14px; font-weight: 800; white-space: nowrap; max-width: 92%; overflow: hidden; text-overflow: ellipsis; }
.bas-accueil { max-width: 1640px; margin: 0 auto; padding: 32px clamp(16px, 3vw, 40px) 64px; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 28px; align-items: stretch; }
#comment-jouer { scroll-margin-top: 90px; }
.etapes { margin: 0 0 12px; padding-left: 22px; display: grid; gap: 10px; }
code { padding: 0 6px; font: 800 15px "Baloo 2", sans-serif; background: var(--encre); color: var(--or); border-radius: 5px; }

/* The live page: the stream beside the buttons */
.page-live { max-width: 1640px; margin: 0 auto; padding: 28px clamp(16px, 3vw, 40px) 72px; display: grid; grid-template-columns: minmax(0, 1fr) 390px; gap: 28px; align-items: start; }
.direct { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 14px 20px; }
.chat-twitch iframe { display: block; width: 100%; height: 620px; border: 0; }
.chat-fenetre { display: block; margin: 12px; text-align: center; }
#section-chat:has(iframe) { padding: 0; }
.commandes h1 { font-size: 30px; line-height: 1.1; margin-right: auto; }
.chrono { font: 400 26px/1 "Lilita One", sans-serif; font-variant-numeric: tabular-nums; }
.invite-texte { margin-bottom: 14px; }
.jeu { display: grid; gap: 14px; }
.jeu section { display: grid; gap: 8px; padding-top: 12px; border-top: 2px solid var(--toile); }
.jeu h2 { font-size: 21px; margin: 0; }
.jeu .pieces { display: flex; align-items: center; gap: 8px; font: 400 32px/1 "Lilita One", sans-serif; font-variant-numeric: tabular-nums; }
.jeu .pieces img { width: 34px; height: 34px; }
.plein { display: block; width: 100%; text-align: center; }
.mises { display: flex; flex-wrap: wrap; gap: 6px; }
.mise-libre { display: flex; align-items: center; gap: 10px; font-weight: 800; }
.mise-libre input { flex: 1; min-width: 0; padding: 4px 10px; font: 800 17px "Baloo 2", sans-serif; font-variant-numeric: tabular-nums; color: var(--encre); background: #fff; border: 2px solid var(--encre); border-radius: 8px; }
.mise-libre input:disabled { background: var(--toile); color: var(--gris); }
.camps { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.camps .bouton { text-align: center; font-size: 19px; } /* white on the team colours: large text, 3:1 at least */
.bouton.bleu:not([disabled]) { background: var(--bleu); color: #fff; }
.bouton.rouge:not([disabled]) { background: var(--rouge); color: #fff; }
.etat-jeu { font-weight: 800; }
.follow-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 10px; }

/* The crate opens here, at once: it shakes, it pops, the piece stays until you close it */
.revelation { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; padding: 16px; background: rgba(18, 13, 28, .86); }
.carte-caisse { width: min(380px, 100%); padding: 22px; display: grid; justify-items: center; gap: 12px; text-align: center; }
.caisse-image { width: 148px; height: auto; display: block; }
.caisse-perso { width: 150px; aspect-ratio: 330 / 550; background: var(--nuit); border: 3px solid var(--encre); border-radius: 8px; display: block; }
.caisse-gain { display: grid; justify-items: center; gap: 6px; min-width: 0; width: 100%; }
.caisse-gain h2 { font-size: 28px; line-height: 1.1; overflow-wrap: anywhere; }
.caisse-gain .rarete { font-size: 16px; }
.caisse-doublon { font-weight: 800; }
.caisse-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 8px; }
.carte-caisse.secoue .caisse-perso, .carte-caisse.secoue .caisse-gain { display: none; }
.carte-caisse.secoue .caisse-image { animation: secousse 1100ms ease-in both; }
.carte-caisse.ouverte { animation: ouverture 260ms cubic-bezier(.2, 1.6, .4, 1) both; }
.carte-caisse.ouverte .caisse-image { display: none; }
.carte-caisse.ouverte:has(.caisse-perso[hidden]) .caisse-image { display: block; }
.carte-caisse.caisse-epique.ouverte { border-color: var(--epique); box-shadow: 5px 5px 0 var(--epique); }
.carte-caisse.caisse-legendaire.ouverte { border-color: var(--or); box-shadow: 5px 5px 0 var(--or); }
@keyframes secousse {
  0% { transform: scale(.7); }
  20% { transform: scale(1) rotate(0); }
  35% { transform: rotate(-5deg); }
  50% { transform: rotate(6deg); }
  65% { transform: rotate(-9deg) scale(1.04); }
  80% { transform: rotate(11deg) scale(1.08); }
  92% { transform: rotate(-13deg) scale(1.12); }
  100% { transform: rotate(0) scale(1.3); }
}
@keyframes ouverture { from { transform: scale(.6); } to { transform: scale(1); } }

/* Leaderboards */
.pleine { min-height: 100vh; } /* the rows come after the page: the footer stays out of sight meanwhile, nothing jumps */
.liste-classement { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.ligne-classement { display: grid; grid-template-columns: 34px 58px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 3px 12px 3px 8px; border-radius: 8px; }
.ligne-classement img { width: 54px; height: 40px; object-fit: contain; display: block; }
.ligne-classement.podium { background: var(--toile); }
.ligne-classement .rang { font: 400 22px/1 "Lilita One", sans-serif; text-align: center; }
.ligne-classement .nom-ligne { font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ligne-classement .valeur { font: 400 22px/1 "Lilita One", sans-serif; font-variant-numeric: tabular-nums; }
.titre-divisions { font: 400 24px/1.1 "Lilita One", sans-serif; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.titre-divisions .note { font: 600 14px/1.2 "Baloo 2", sans-serif; }
.divisions { list-style: none; margin: 10px 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; align-items: end; }
.divisions li { display: grid; justify-items: center; gap: 2px; font-weight: 800; font-size: 14px; text-align: center; }
.divisions img { height: auto; max-width: 100%; display: block; } /* drawn to the rank's scale: one scale for all, or the wide top ranks shrink */
.note-divisions { margin-bottom: 18px; }
@media (max-width: 560px) { .divisions { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 12px; } }
.page-seule { max-width: 820px; margin: 0 auto; padding: 28px clamp(16px, 3vw, 40px) 72px; }

.cadre-seul { min-height: 96px; margin: 4px 0; padding: 4px; display: grid; place-items: center; font-size: 13px; font-weight: 800; text-align: center; overflow-wrap: anywhere; border: 18px solid transparent; border-image-slice: 26 fill; border-image-width: 18px; }

/* Rules and legal: one column of stickers */
.titre-page { font: 400 clamp(40px, 5vw, 64px)/1.1 "Lilita One", sans-serif; margin-bottom: 26px; }
.texte .bloc { margin-bottom: 20px; }
.texte p + p, .texte table + p, .texte ol + p, .texte p + table, .texte ul + p { margin-top: 10px; }
.texte ol, .texte ul { padding-left: 22px; display: grid; gap: 8px; }
.texte a { color: inherit; }
.regles { width: 100%; border-collapse: collapse; }
.regles th { text-align: left; font-size: 14px; color: var(--gris); padding: 4px 8px; }
.regles td { padding: 7px 8px; border-top: 2px solid var(--toile); vertical-align: top; text-align: left; white-space: normal; }
.regles td:last-child { font-weight: 800; }
.regles:not(.commandes):not(.donnees) td:last-child { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.regles.donnees td:first-child { font-weight: 800; }
.regles.donnees td:last-child, .regles.commandes td:last-child { font-weight: 600; }
.regles.commandes td:first-child { min-width: 45%; }

.actions-heros { display: flex; flex-wrap: wrap; gap: 14px; }
.bouton.twitch { background: #9146ff; color: #fff; }
.bouton.twitch:hover { background: #772ce8; }

/* Sign-in and the page that does not exist: one sticker in the middle */
.page-courte { min-height: calc(100vh - 210px); display: grid; place-items: center; padding: 32px clamp(16px, 3vw, 40px); }
.carte-courte { width: min(100%, 520px); padding: 28px; display: grid; gap: 16px; justify-items: center; text-align: center; }
.carte-courte .logo-court { width: min(100%, 300px); height: auto; }
.carte-courte h1 { font: 400 clamp(30px, 4vw, 40px)/1.1 "Lilita One", sans-serif; }
.carte-courte .note a { color: inherit; }
.carte-courte .message-connexion { width: 100%; padding: 8px 12px; border: 2px solid var(--encre); border-radius: 8px; font-weight: 800; }
.carte-courte .actions-heros { justify-content: center; }

.pied { border-top: 3px solid var(--encre); padding: 22px clamp(16px, 3vw, 40px) 30px; text-align: center; color: var(--creme); font-size: 14px; }
.pied nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 20px; margin-bottom: 8px; font-weight: 800; }
.pied a { color: inherit; }
.pied p { opacity: .7; }
#zone-suppression p + p { margin-top: 10px; }
@media (max-width: 640px) { .pied nav a { display: inline-block; padding: 3px 2px; } .haut .logo { display: inline-block; padding-block: 3px; } }

/* Asks before Twitch loads: on the resting screen, and in the chat tab */
.accord-twitch { padding: 12px 16px; display: grid; justify-items: center; gap: 8px; text-align: center; max-width: 360px; }
.ecran > .accord-twitch { position: absolute; top: 0; left: 0; right: 0; z-index: 2; max-width: none; padding: 8px 12px; display: flex; justify-content: center; align-items: center; gap: 14px; text-align: left; border-width: 0 0 3px; border-radius: 0; box-shadow: none; }
.ecran > .accord-twitch .bouton { flex: none; padding: 6px 16px; }
.accord-twitch .note a { color: inherit; }
.ecran iframe { z-index: 1; }
.note { color: var(--gris); font-size: 14px; }
.saison { margin: 0 0 12px; color: var(--creme); font-weight: 800; }
.saison-top { margin-bottom: 10px; }
.essai { margin-top: 8px; font-size: 14px; font-weight: 800; color: var(--encre); overflow-wrap: anywhere; }
.liste-news { display: grid; gap: 14px; }
.news { padding-bottom: 14px; border-bottom: 2px solid var(--toile); }
.news:last-child { padding-bottom: 0; border-bottom: 0; }
.news h2 { margin: 6px 0 8px; }
.news-tete { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.news-texte p + p { margin-top: 8px; }
.news.avec-image { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 16px; align-items: start; }
.news.avec-image img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: contain; background: var(--nuit); border-radius: 8px; }
@media (max-width: 560px) { .news.avec-image { grid-template-columns: minmax(0, 1fr); gap: 10px; } }
.derniere-news { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 8px 16px; color: var(--encre); font-weight: 800; text-decoration: none; visibility: hidden; }
.derniere-news.prete { visibility: visible; }
.derniere-news:hover #derniere-news-titre { text-decoration: underline; }
.section > .note { margin-bottom: 10px; }

/* Sections that slide: the bar stays, the content moves sideways, the window takes the height of what it shows */
.sections { min-width: 0; overflow: hidden; }
.onglets { display: flex; background: var(--encre); gap: 3px; padding: 3px 3px 0; overflow-x: auto; }
.onglets button { flex: 1 0 auto; padding: 10px 18px; font: 400 21px/1.1 "Lilita One", sans-serif; background: var(--foule); color: var(--creme); border: 0; border-radius: 7px 7px 0 0; }
.onglets button:hover { background: var(--gris); }
.onglets button[aria-selected="true"] { background: var(--creme); color: var(--encre); }
.onglets button:focus-visible { outline-offset: -4px; }
.fenetre { overflow: hidden; transition: height 240ms ease; }
.rail { display: flex; align-items: flex-start; transition: transform 280ms cubic-bezier(.2, .8, .2, 1); }
.section { flex: 0 0 100%; min-width: 0; padding: 18px 20px; }
.section h2 { font-size: 22px; margin-bottom: 10px; }

.hors-top { margin-top: 18px; text-align: center; }
.mes-places { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 14px; }
.place { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; padding: 8px 12px; background: var(--toile); border-radius: 8px; text-decoration: none; }
.place .nom-classement { width: 100%; font-weight: 800; font-size: 14px; text-decoration: underline; }
.place strong { font: 400 26px/1.1 "Lilita One", sans-serif; font-variant-numeric: tabular-nums; }
.place .hors { color: var(--gris); }
@media (max-width: 560px) {
  .mes-places { grid-template-columns: 1fr; gap: 6px; }
  .place .nom-classement { width: auto; margin-right: auto; }
}
.rayons { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.rayon { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; font-weight: 800; background: var(--toile); color: var(--encre); border: 2px solid var(--encre); border-radius: 8px; }
.rayon[aria-pressed="true"] { background: var(--or); }
.compte-rayon { font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.stats-bas { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 24px; margin-top: 18px; }
.stats-bas .courbes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.stats-bas .tableau-defile { max-height: 330px; overflow-y: auto; }
.stats-bas thead th { position: sticky; top: 0; background: var(--creme); }
.stats-bas th, .stats-bas td { padding-left: 6px; padding-right: 6px; }

.tag { display: inline-block; padding: 0 8px; font-weight: 800; font-size: 13px; border-radius: 6px; border: 2px solid var(--encre); background: var(--toile); color: var(--encre); }
.tag.or { background: var(--or); }

/* Dashboard */
.page { max-width: 1560px; margin: 0 auto; padding: 28px clamp(16px, 3vw, 40px) 72px; display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 28px; align-items: start; }
.colonne { display: grid; gap: 28px; min-width: 0; }
.bloc { padding: 18px 20px; min-width: 0; }
.bloc h2 { font-size: 24px; margin-bottom: 12px; }
.perso { text-align: center; position: sticky; top: 84px; }
.perso canvas { width: 100%; max-width: 270px; aspect-ratio: 330 / 550; display: block; margin: 0 auto; background: var(--nuit); border: 3px solid var(--encre); border-radius: 8px; }
.perso .nom { font: 400 28px/1.1 "Lilita One", sans-serif; margin-top: 12px; overflow-wrap: anywhere; }
.perso .titre { font-weight: 800; color: var(--gris); min-height: 1.45em; }
.perso .pieces { display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; font: 400 32px/1 "Lilita One", sans-serif; font-variant-numeric: tabular-nums; }
.perso .pieces img { width: 34px; height: 34px; }
.camp { display: inline-flex; gap: 6px; margin-top: 10px; }
.camp button { padding: 2px 10px; border: 2px solid var(--encre); border-radius: 8px; background: var(--toile); font-weight: 800; font-size: 13px; color: var(--encre); }
.camp button[aria-pressed="true"][data-camp="bleu"] { background: var(--bleu-texte); color: #fff; }
.camp button[aria-pressed="true"][data-camp="rouge"] { background: var(--rouge-texte); color: #fff; }

.chiffres { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 20px; margin: 0; }
.chiffres div { min-width: 0; }
.chiffres dt { color: var(--gris); font-size: 14px; }
.chiffres dd { margin: 0; font: 400 28px/1.1 "Lilita One", sans-serif; font-variant-numeric: tabular-nums; }

.tete-bloc { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 16px; margin-bottom: 12px; }
.tete-bloc h2 { margin: 0; }
.tete-bloc .note { color: var(--gris); font-size: 14px; }
.tete-bloc .bouton { margin-left: auto; }

.grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 12px; }
.piece { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px; background: #fff; border: 2px solid var(--encre); border-radius: 8px; min-width: 0; }
.piece canvas { width: 100%; max-width: 96px; aspect-ratio: 330 / 550; display: block; background: var(--nuit); border-radius: 6px; }
.piece .couleur-seule { width: 100%; max-width: 96px; aspect-ratio: 330 / 550; display: grid; place-items: center; background: var(--creme); border: 1px solid var(--encre); border-radius: 6px; font: 400 15px/1.1 "Lilita One", sans-serif; padding: 4px; text-align: center; overflow-wrap: anywhere; }
.piece .nom-piece { font-weight: 800; font-size: 14px; line-height: 1.15; text-align: center; min-height: 2.3em; display: grid; place-items: center; overflow-wrap: anywhere; }
.piece .rarete { font-size: 12px; font-weight: 800; }
.rarete.COMMUN { color: var(--gris); } .rarete.RARE { color: #1a56c6; } .rarete.ÉPIQUE { color: #6e36d6; } .rarete.LÉGENDAIRE { color: #7d5b00; } /* 4.5:1 at least, on the greyed cards too */
.piece.absente { background: var(--toile); border-style: dashed; }
.piece.absente canvas { opacity: .35; filter: grayscale(1); }
/* A colour must show its colour, owned or not; and it needs no fighter's height */
.grille-basse .piece .couleur-seule { aspect-ratio: auto; max-width: none; min-height: 64px; font-size: 14px; }
.note-rayon { margin-bottom: 12px; }
.titre-carte.absente { background: var(--toile); border-style: dashed; color: var(--gris); }
.piece .cadre-seul { width: 100%; padding: 0; font-size: 11px; border-width: 14px; border-image-width: 14px; }
.piece .cadre-seul span { display: block; max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.perso .nom.cadre-seul { display: grid; margin-inline: auto; max-width: 100%; width: fit-content; min-width: 60%; font-size: 22px; }
.piece.portee { outline: 3px solid var(--or); outline-offset: -1px; }

.titres { display: flex; flex-wrap: wrap; gap: 10px; }
.titre-carte { display: inline-flex; align-items: center; gap: 10px; padding: 6px 8px 6px 12px; background: #fff; border: 2px solid var(--encre); border-radius: 8px; font-weight: 800; }
.titre-carte.portee { background: var(--or); }

.vide { color: var(--gris); }

.courbes { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; }
.courbe h3 { font: 800 15px/1.2 "Baloo 2", sans-serif; margin-bottom: 4px; }
.courbe svg { display: block; width: 100%; height: auto; overflow: visible; }
.courbe .axe { font-size: 13px; fill: var(--gris); font-weight: 600; }
.courbe .grille-trait { stroke: var(--toile); stroke-width: 1; }
.courbe .ligne { fill: none; stroke: var(--bleu-texte); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.courbe .repere { stroke: var(--gris); stroke-width: 1; }
.courbe .point-survol { fill: var(--bleu-texte); stroke: var(--creme); stroke-width: 2; }
.bulle { position: fixed; z-index: 20; pointer-events: none; padding: 4px 10px; background: var(--encre); color: var(--creme); border-radius: 6px; font-size: 13px; font-weight: 800; white-space: nowrap; }

.tableau-defile { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums; }
th { text-align: right; color: var(--gris); font-size: 14px; font-weight: 600; padding: 4px 10px; border-bottom: 2px solid var(--encre); white-space: nowrap; }
td { text-align: right; padding: 4px 10px; border-bottom: 1px solid var(--toile); white-space: nowrap; }
th:first-child, td:first-child { text-align: left; }
td.perte { color: var(--rouge-texte); }

/* The answer of a click */
.retour { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%) rotate(-1deg); z-index: 30; padding: 10px 18px; max-width: min(90vw, 560px); font-weight: 800; text-align: center; }
.retour.ok { background: var(--or); }
.retour.refus { background: var(--creme); }
.retour[hidden] { display: none; }

@media (max-width: 640px) {
  .ecran-note { bottom: 4px; padding: 1px 8px; font-size: 11px; }
  .ecran > .accord-twitch { position: static; flex-direction: column; text-align: center; border-width: 3px 0 0; }
  .ecran:has(> .accord-twitch) { aspect-ratio: auto; overflow: visible; }
  .ecran:has(> .accord-twitch) .ecran-repos { position: relative; aspect-ratio: 16 / 9; inset: auto; }
  .onglets button { font-size: 18px; padding: 8px 12px; }
  .section { padding: 14px 12px; }
  .ligne-classement { padding-right: 8px; }
  .perso canvas { max-width: 130px; }
  .chiffres { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats-bas .courbes { grid-template-columns: 1fr; }
}
@media (max-width: 1100px) {
  .haut { flex-wrap: wrap; gap: 8px 12px; padding: 10px 14px; position: static; }
  .haut .logo { font-size: 22px; }
  .haut .menu { order: 4; flex: 1 0 100%; }
  .haut .menu a { padding: 2px 10px; }
  .stats-bas { grid-template-columns: 1fr; }
}
@media (max-width: 1040px) {
  /* Twitch asks for a player 300 px high at least: one column before it gets smaller */
  .scene-dedans, .bas-accueil, .page-live { grid-template-columns: 1fr; }
  .page-live { min-height: 100vh; } /* the buttons come after the page: the footer stays out of sight meanwhile, nothing jumps */
}

@media (max-width: 900px) {
  .page-live { padding-top: 16px; gap: 18px; }
  .haut .etat { font-size: 13px; }
  .etat-plus { display: none; }
  .page { grid-template-columns: 1fr; }
  .perso { position: static; }
  .perso canvas { max-width: 200px; }
}
/* A big screen shows the same page, larger: never a thin column in the middle of 2560 pixels */
@media (min-width: 2300px) {
  html { zoom: 1.333; }
  body { min-height: calc(100vh / 1.333); }
}
@media (max-width: 420px) {
  /* logo, state and button on one line: the bar must not eat the screen */
  .haut { gap: 6px 8px; }
  .haut .logo { font-size: 18px; }
  .haut .menu { gap: 0; }
  .haut .menu a { padding: 2px 7px; font-size: 14px; }
  .haut .etat { font-size: 12px; padding: 3px 7px; gap: 5px; }
  .haut .bouton.petit { padding: 3px 8px; font-size: 12px; }
}

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