:root {
  --bg: #f5f7fb;
  --surface: #ffffff;
  --text: #1d2433;
  --muted: #667085;
  --border: #dde3ee;
  --accent: #0f766e;
  --accent-soft: #ccfbf1;
  --accent-text: #fff;
  --pending: #f59e0b;
  --pending-soft: #fef3c7;
  --bonus: #e11d48;
  --bonus-text: #fff;
  --theme-from: var(--bg);
  --theme-to: var(--bg);
  --on-theme: var(--text);
  --picked: #e5e9f2;
  --danger: #b42318;
  --radius: 12px;
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0f1420;
    --surface: #182030;
    --text: #e6eaf2;
    --muted: #98a2b3;
    --border: #2b3547;
    --accent: #2dd4bf;
    --accent-soft: #134e4a;
    --accent-text: #0f1420;
    --pending: #fbbf24;
    --pending-soft: #4a3a10;
    --bonus: #fb7185;
    --bonus-text: #fff;
    --picked: #263045;
    --danger: #f97066;
  }
}

/* Dégradés de fond inspirés des tuiles de chaque jeu sur fdj.fr (aucun logo repris). */
[data-game=loto] { --theme-from: #00a3da; --theme-to: #00cfee; --accent: #0369a1; --accent-soft: #e0f2fe; --bonus: #e11d48; }
[data-game=euromillions] { --theme-from: #001469; --theme-to: #002b9f; --accent: #1e3a8a; --accent-soft: #dbeafe; --bonus: #f5b301; --bonus-text: #1d2433; }
[data-game=eurodreams] { --theme-from: #791fa7; --theme-to: #982ecf; --accent: #7e22ce; --accent-soft: #f3e8ff; --bonus: #db2777; }
body[data-game] { --on-theme: #fff; }
@media (prefers-color-scheme: dark) {
  [data-game=loto] { --accent: #38bdf8; --accent-soft: #0c3a52; }
  [data-game=euromillions] { --accent: #60a5fa; --accent-soft: #172554; }
  [data-game=eurodreams] { --accent: #c084fc; --accent-soft: #3b0764; }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: linear-gradient(90deg, var(--theme-from), var(--theme-to)) var(--bg);
  color: var(--text);
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

a { color: var(--accent); }
h1 { font-size: 1.6rem; margin: 0 0 .75rem; }
h2 { font-size: 1.15rem; margin: 0 0 .75rem; }
[hidden] { display: none !important; }

.site-header {
  display: flex;
  gap: 1rem;
  align-items: center;
  padding: .75rem 1rem;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}
.logo { margin-right: auto; display: flex; }
.logo img { display: block; height: 48px; width: auto; }

/* Écran d'accueil (voir js/splash.js) */
.splash {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 1.5rem;
  background: #fff;
  cursor: pointer;
  transition: opacity .4s;
}
.splash img { width: 100%; max-width: 560px; height: auto; }
.splash.hide { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .splash { transition: none; } }
.site-header .game-badge { order: 1; margin: 0; }
.site-footer { margin-top: auto; padding: 1.5rem 1rem; text-align: center; font-size: .85rem; color: var(--on-theme); opacity: .85; }
.site-footer a { color: inherit; }

.container { width: 100%; max-width: 1100px; margin: 0 auto; padding: 1.5rem 1rem; }
.intro { max-width: 680px; margin-bottom: 1.5rem; color: var(--on-theme); }
.columns { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.25rem; }
.narrow { max-width: 560px; margin: 0 auto; }
.center { text-align: center; }
.muted { color: var(--muted); }
.small { font-size: .875rem; }
.draw-days { display: block; font-weight: 400; }
.error { color: var(--danger); min-height: 1.5em; margin: .5rem 0; }

form label, .invite label { display: block; margin-bottom: 1rem; font-weight: 600; }
form label.inline { font-weight: 400; margin-bottom: .25rem; }
fieldset { border: 0; padding: 0; margin: 0 0 1rem; }
legend { font-weight: 600; margin-bottom: .25rem; padding: 0; }
input:not([type=radio]), select {
  display: block;
  width: 100%;
  margin-top: .3rem;
  padding: .6rem .75rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  color: var(--text);
  font: inherit;
}

button, .button {
  display: inline-block;
  padding: .6rem 1rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  text-decoration: none;
  cursor: pointer;
}
button.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-text); font-weight: 600; }
button.link { border: 0; background: none; color: var(--muted); text-decoration: underline; }
button:disabled { opacity: .5; cursor: not-allowed; }
.actions, .invite-actions { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.invite { margin-bottom: 1.25rem; }

.lobbies, .players { list-style: none; padding: 0; margin: 0 0 1rem; }
.lobbies a { display: flex; justify-content: space-between; gap: 1rem; padding: .75rem; border: 1px solid var(--border); border-radius: 8px; margin-bottom: .5rem; text-decoration: none; color: var(--text); }
.lobbies a > span { color: var(--muted); }
.lobbies .game-badge { margin: 0 .4rem 0 0; }
.players li { padding: .4rem 0; border-bottom: 1px solid var(--border); }
.players.compact { display: flex; flex-wrap: wrap; gap: .5rem 1rem; margin: .5rem 0 0; }
.players.compact li { border: 0; padding: 0; }
.tag { font-size: .75rem; padding: .05rem .45rem; border-radius: 99px; background: var(--picked); color: var(--muted); }
.tag.warn { background: var(--pending-soft); color: var(--text); }
.pick-status { font-size: .85rem; color: var(--muted); }
.pick-status.done { color: var(--accent); font-weight: 600; }

.game-status { position: relative; margin-bottom: 1rem; }
/* Le message de fin de tour remplace le contenu du cadre du tour sans changer sa hauteur : la grille ne bouge pas. */
.game-status .banner {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  margin: 0;
  border-radius: inherit;
  font-size: 1.1rem;
  font-weight: 600;
  text-align: center;
}
#view-game:has(#last-round:not([hidden])) :is(.game-status > :not(.banner), .game-grid > p) { visibility: hidden; }
.banner { background: var(--accent-soft); border-radius: var(--radius); padding: .75rem 1rem; margin: 0 0 1rem; }

.grid { display: grid; grid-template-columns: repeat(var(--columns, 7), 1fr); gap: .35rem; }
.cell {
  --cell-bg: var(--surface);
  --cell-line: var(--border);
  --cell-line-width: 1px;
  --cell-text: var(--text);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  padding: 0;
  border: var(--cell-line-width) solid var(--cell-line);
  border-radius: 50%;
  background: var(--cell-bg);
  color: var(--cell-text);
  font-weight: 600;
  font-size: .95rem;
}
@media (hover: hover) {
  button.cell:hover:not(:disabled, .pending) { --cell-line: var(--accent); }
}
.cell.picked { --cell-bg: var(--picked); --cell-text: var(--muted); opacity: 1; cursor: default; }
.cell.pending { --cell-bg: var(--pending-soft); --cell-line: var(--pending); --cell-line-width: 2px; }
.cell.validated { --cell-bg: var(--accent); --cell-line: var(--accent); --cell-text: var(--accent-text); text-decoration: none; }
.cell.validated:disabled { opacity: 1; cursor: default; }
.game-grid.bonus .cell.validated { --cell-bg: var(--bonus); --cell-line: var(--bonus); --cell-text: var(--bonus-text); }

/* Scintillement unique quand un numéro vient d'être validé (drop-shadow suit aussi les étoiles et les gouttes). */
@keyframes validated-shine {
  0% { transform: scale(1); filter: drop-shadow(0 0 0 transparent); }
  35% { transform: scale(1.22); filter: drop-shadow(0 0 .45rem var(--pending)); }
  70% { transform: scale(.96); filter: drop-shadow(0 0 .25rem var(--pending)); }
  100% { transform: scale(1); filter: drop-shadow(0 0 0 transparent); }
}
@media (prefers-reduced-motion: no-preference) {
  .cell.just-validated { z-index: 2; animation: validated-shine .8s ease-out 2; }
}

.game-grid p { margin: 0 0 .35rem; }
.game-grid .grid { margin: .6rem 0 .75rem; }
#game-error:empty { display: none; }
#view-game { max-width: 600px; margin: 0 auto; }
@media (max-width: 480px) {
  .container:has(#view-game:not([hidden])) { padding: .75rem; }
  #view-game .card { padding: .9rem; }
  #view-game .game-status { margin-bottom: .6rem; }
}
.legend { display: flex; flex-wrap: wrap; gap: .25rem 1rem; list-style: none; padding: 0; margin: 0; }
.legend li { display: flex; align-items: center; gap: .35rem; }
.legend .cell { width: 1.1rem; font-size: .5rem; }

.summary { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; }
.summary.big { justify-content: center; margin: 1rem 0 1.5rem; }
.ball {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  font-weight: 700;
  background: var(--accent);
  color: #fff;
}
.summary.big .ball { width: 3.2rem; height: 3.2rem; font-size: 1.3rem; }
.ball.bonus { --cell-bg: var(--bonus); --cell-line: var(--bonus); --cell-line-width: 0px; background: var(--bonus); color: var(--bonus-text); }

/* Numéros complémentaires : étoiles pour l'Euromillions, gouttes pour EuroDreams (le Loto garde des ronds).
   La forme est dessinée par des pseudo-éléments placés sous le numéro, qui reprennent les couleurs de l'état de la case. */
:is([data-game=euromillions], [data-game=eurodreams]) :is(.grid.bonus .cell, .ball.bonus) {
  position: relative;
  isolation: isolate;
  border-color: transparent;
  border-radius: 0;
  background: none;
}
:is([data-game=euromillions], [data-game=eurodreams]) :is(.grid.bonus .cell, .ball.bonus)::before,
[data-game=euromillions] :is(.grid.bonus .cell, .ball.bonus)::after {
  content: "";
  position: absolute;
  z-index: -1;
}
[data-game=euromillions] :is(.grid.bonus .cell, .ball.bonus) { padding-top: .12em; }
[data-game=euromillions] :is(.grid.bonus .cell, .ball.bonus)::before,
[data-game=euromillions] :is(.grid.bonus .cell, .ball.bonus)::after {
  clip-path: polygon(50% 4.8%, 65% 34.1%, 97.6% 39.3%, 74.3% 62.7%, 79.4% 95.2%, 50% 80.3%, 20.6% 95.2%, 25.7% 62.7%, 2.4% 39.3%, 35% 34.1%);
}
[data-game=euromillions] :is(.grid.bonus .cell, .ball.bonus)::before { inset: -2px; background: var(--cell-line); }
[data-game=euromillions] :is(.grid.bonus .cell, .ball.bonus)::after { inset: calc(var(--cell-line-width) * 2 - 2px); background: var(--cell-bg); }
[data-game=eurodreams] :is(.grid.bonus .cell, .ball.bonus)::before {
  inset: 10%;
  border: var(--cell-line-width) solid var(--cell-line);
  border-radius: 50% 50% 0;
  background: var(--cell-bg);
  box-shadow: 1px 1px 3px rgb(0 0 0 / .18);
  transform: translateY(-10%) rotate(45deg);
}
[data-game=eurodreams] .grid.bonus .cell:not(.picked) { --cell-text: var(--bonus); }
[data-game=eurodreams] .grid.bonus .cell.validated { --cell-text: var(--bonus-text); }
@media (prefers-color-scheme: dark) {
  [data-game=eurodreams] .grid.bonus .cell:not(.picked) { --cell-text: #f472b6; }
  [data-game=eurodreams] .grid.bonus .cell.validated { --cell-text: var(--bonus-text); }
}

.game-picker { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
.game-picker legend { grid-column: 1 / -1; }
form label.game-option {
  margin: 0;
  padding: .7rem .5rem;
  border-radius: 8px;
  border: 3px solid transparent;
  background: linear-gradient(90deg, var(--theme-from), var(--theme-to));
  color: #fff;
  font-weight: 700;
  text-align: center;
  cursor: pointer;
}
.game-option input { position: absolute; opacity: 0; pointer-events: none; }
.game-option:has(input:checked) { border-color: var(--text); box-shadow: 0 0 0 2px var(--surface) inset; }
.game-option:has(input:focus-visible) { outline: 2px solid var(--text); outline-offset: 2px; }
.game-badge {
  display: inline-block;
  margin: 0 0 .5rem;
  padding: .15rem .7rem;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--theme-from), var(--theme-to));
  color: #fff;
  font-weight: 700;
  font-size: .85rem;
}
/* Centrage vertical optique : la boîte du texte est rognée à la hauteur des capitales,
   sinon les métriques de la police (Segoe UI notamment) remontent le texte dans la pastille. */
@supports (text-box: trim-both cap alphabetic) {
  .game-badge { padding-block: .5rem; text-box: trim-both cap alphabetic; }
}
.banner .ball { width: 1.9rem; height: 1.9rem; font-size: .9rem; }

/* Compte facultatif */
.account { display: flex; gap: 1rem; align-items: center; font-weight: 600; }
.providers { display: grid; gap: .5rem; margin: 1rem 0; }
.provider { text-align: center; font-weight: 600; }
.account-offer { margin-top: 1rem; }
#view-finished .account-offer { border-top: 1px solid var(--border); padding-top: 1rem; }
.account-offer h2 { margin-bottom: .25rem; }
.my-grids { list-style: none; padding: 0; margin: 0 0 1.5rem; }
.my-grid { padding: 1rem 0; border-bottom: 1px solid var(--border); }
.my-grid .summary { margin: .5rem 0; }
.my-grid-title { margin: 0; font-weight: 600; }
.my-grid .ball { width: 2rem; height: 2rem; font-size: .9rem; }
.prose ul { padding-left: 1.25rem; }
.prose li { margin-bottom: .5rem; }
.my-grid button.link { padding-left: 0; }
.account-offer > :first-child { margin-top: 0; }
.account-offer > :last-child { margin-bottom: 0; }
.profile { border-top: 1px solid var(--border); padding-top: 1rem; margin-bottom: 1rem; }
.profile label.inline { display: flex; gap: .5rem; align-items: flex-start; }
.profile input[type=checkbox] { width: auto; margin-top: .3rem; flex: none; }
.danger-zone { margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--border); text-align: center; }
button.link.danger { color: var(--danger); }

/* Numéros en surnombre : chacun choisit ceux qu'il jouera (tous en grille multiple, ou une grille simple). */
.play-options .summary.big { margin-bottom: .75rem; }
button.ball.toggle { padding: 0; border: 0; line-height: 1; }
button.ball.toggle[aria-pressed=false] { opacity: .3; text-decoration: line-through; }
.play-status { font-weight: 600; }
.play-status.warn { background: var(--pending-soft); border-radius: var(--radius); padding: .5rem .75rem; }