body.page-2048 #app { max-width: 720px; }


.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.top-bar h1 { font-size: 1.35rem; }

.btn-son {
  width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.05rem;
  background: transparent; color: var(--texte);
  border: 1px solid var(--line-forte); border-radius: 6px;
  cursor: pointer;
}
.btn-son:hover { background: var(--surface-2); border-color: var(--color-light); }
.btn-son.coupe { opacity: 0.55; }

.sous-titre-page { color: var(--texte-doux); font-size: 0.9rem; margin: -6px 0 16px; }


.choix-taille {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px;
  margin-bottom: 14px;
}
.choix-taille button {
  font: inherit; font-size: 0.85rem; font-weight: 700;
  min-height: 44px; padding: 6px 14px;
  background: transparent; color: var(--texte-doux);
  border: 1px solid var(--line-forte); border-radius: 6px;
  cursor: pointer;
}
.choix-taille button small { display: block; font-weight: 600; font-size: 0.72rem; color: var(--texte-faible); }
.choix-taille button[aria-pressed="true"] { color: #fff; border-color: var(--color-light); background: var(--surface-2); }
.choix-taille button:disabled { opacity: 0.45; cursor: not-allowed; }


.info-bar .info-item { flex-direction: column; gap: 1px; flex: 1; min-width: 70px; }
.info-bar .info-label { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em; }
.info-bar .info-valeur { font-size: 1.15rem; }
.info-valeur.gain { animation: valeur-gain 260ms ease-out; }
@keyframes valeur-gain { 0% { transform: scale(1); } 40% { transform: scale(1.18); } 100% { transform: scale(1); } }


.zone-plateau { display: flex; justify-content: center; margin-bottom: 14px; }

.plateau {
  --n: 4;
  --reserve: 384px;
  --cote-max: 560px;
  --cote: clamp(216px, min(100vw - 58px, 100vh - var(--reserve)), var(--cote-max));
  --cote: clamp(216px, min(100vw - 58px, 100dvh - var(--reserve)), var(--cote-max));
  --ecart: calc(var(--cote) * 0.026);
  --case: calc((var(--cote) - var(--ecart) * (var(--n) + 1)) / var(--n));
  position: relative;
  width: var(--cote); height: var(--cote);
  flex: 0 0 auto;
  background: #2a2520;
  border: 1px solid var(--line-forte);
  border-radius: calc(var(--cote) * 0.03);
  
  touch-action: none;
  -webkit-user-select: none; user-select: none;
  -webkit-tap-highlight-color: transparent;
  outline: none;
}
.plateau:focus-visible { border-color: var(--color-light); }

.plateau.plateau-dense { --cote-max: 680px; --ecart: calc(var(--cote) * 0.012); }
.plateau-dense .tuile-face { font-size: calc(var(--case) * 0.5); }
.plateau-dense .tuile.c3 .tuile-face { font-size: calc(var(--case) * 0.4); }
.plateau-dense .tuile.c4 .tuile-face { font-size: calc(var(--case) * 0.32); }
.plateau-dense .tuile.c5 .tuile-face { font-size: calc(var(--case) * 0.26); }
.plateau-dense .tuile.c6 .tuile-face { font-size: calc(var(--case) * 0.22); }

.plateau-fond {
  position: absolute; inset: 0;
  display: grid;
  grid-template-columns: repeat(var(--n), 1fr);
  grid-template-rows: repeat(var(--n), 1fr);
  gap: var(--ecart); padding: var(--ecart);
}
.plateau-fond span { background: #3b342d; border-radius: calc(var(--case) * 0.09); }

.plateau-tuiles { position: absolute; left: var(--ecart); top: var(--ecart); }

.tuile {
  position: absolute; left: 0; top: 0;
  width: var(--case); height: var(--case);
  transform: translate(calc(var(--x) * (var(--case) + var(--ecart))), calc(var(--y) * (var(--case) + var(--ecart))));
  transition: transform 110ms ease-out;
  z-index: 2;
}

.tuile.absorbee { z-index: 1; }

.tuile-face {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  border-radius: calc(var(--case) * 0.09);
  font-weight: 800;
  font-size: calc(var(--case) * 0.46);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  background: #eee4da; color: #4a4038;
}
.tuile.c3 .tuile-face { font-size: calc(var(--case) * 0.38); }
.tuile.c4 .tuile-face { font-size: calc(var(--case) * 0.31); }
.tuile.c5 .tuile-face { font-size: calc(var(--case) * 0.255); }
.tuile.c6 .tuile-face { font-size: calc(var(--case) * 0.215); }

.tuile.apparait .tuile-face { animation: tuile-apparait 150ms ease-out both; }
.tuile.fusion .tuile-face { animation: tuile-fusion 170ms ease-out; }
@keyframes tuile-apparait { 0% { transform: scale(0.2); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
@keyframes tuile-fusion { 0% { transform: scale(1); } 45% { transform: scale(1.16); } 100% { transform: scale(1); } }


.v2 .tuile-face     { background: #eee4da; color: #4a4038; }
.v4 .tuile-face     { background: #ede0c8; color: #4a4038; }
.v8 .tuile-face     { background: #f2b179; color: #3b2410; }
.v16 .tuile-face    { background: #f59563; color: #3b2410; }
.v32 .tuile-face    { background: #c9432a; color: #fff; }
.v64 .tuile-face    { background: #b02a15; color: #fff; }
.v128 .tuile-face   { background: #edcf72; color: #3b2a08; }
.v256 .tuile-face   { background: #edcc61; color: #3b2a08; }
.v512 .tuile-face   { background: #edc850; color: #3b2a08; }
.v1024 .tuile-face  { background: #edc53f; color: #3b2a08; }
.v2048 .tuile-face  { background: #edc22e; color: #3b2a08; box-shadow: inset 0 0 0 calc(var(--case) * 0.045) #fff3c4; }
.v4096 .tuile-face  { background: #2f855a; color: #fff; }
.v8192 .tuile-face  { background: #1f7a8c; color: #fff; }
.v16384 .tuile-face { background: #2b5fab; color: #fff; }
.v32768 .tuile-face { background: #5b3fa8; color: #fff; }
.v65536 .tuile-face { background: #8a2f7d; color: #fff; }
.v131072 .tuile-face { background: #16181d; color: #fcd34d; box-shadow: inset 0 0 0 calc(var(--case) * 0.045) #fcd34d; }


.plateau-voile {
  position: absolute; inset: 0; z-index: 5;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  padding: 16px;
  background: rgba(14, 16, 20, 0.82);
  border-radius: inherit;
  color: #f0f3f6; font-weight: 700; text-align: center;
}
.plateau-voile[hidden] { display: none; }
.plateau-voile .voile-grand { font-size: calc(var(--cote) * 0.22); line-height: 1; font-variant-numeric: tabular-nums; }
.plateau-voile .voile-texte { font-size: 1rem; }
.plateau-voile .voile-petit { font-size: 0.85rem; font-weight: 600; color: var(--texte-doux); }


.actions-jeu { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-bottom: 10px; }
.actions-jeu .btn { min-height: 44px; }

.aide-jeu { color: var(--texte-doux); font-size: 0.84rem; margin-bottom: 8px; min-height: 1.2em; }
.aide-jeu strong { color: var(--texte); }
.aide-jeu a, .salle a:not(.btn), .defi-carte a:not(.btn) { color: var(--color-light); }
.message-jeu { color: #e0a94a; font-size: 0.86rem; font-weight: 600; min-height: 1.2em; margin-bottom: 8px; }

.confirmation {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px;
  margin: 0 auto 12px; padding: 12px 14px; max-width: 520px;
  background: var(--surface-2); border: 1px solid var(--line-forte); border-radius: 8px;
  font-size: 0.88rem;
}
.confirmation[hidden] { display: none; }
.confirmation p { flex: 1 1 100%; color: var(--texte); }

.indice {
  display: inline-flex; align-items: center; gap: 8px;
  margin: 0 auto 10px; padding: 8px 14px;
  background: var(--surface-2); border: 1px solid var(--color-light); border-radius: 8px;
  font-size: 0.9rem; font-weight: 700; color: #fff;
}
.indice[hidden] { display: none; }
.indice .indice-fleche { font-size: 1.3rem; line-height: 1; }

.btn-revoir { margin: 4px auto 10px; }
.btn-revoir[hidden] { display: none; }


.stats-joueur {
  margin: 18px auto 6px; padding: 14px 16px; max-width: 560px;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px;
  text-align: left;
}
.stats-joueur[hidden] { display: none; }
.stats-joueur h2 { font-family: var(--font-display); font-size: 1.05rem; color: #f0f3f6; margin-bottom: 10px; }
.stats-grille { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 12px; }
.stats-grille div { padding: 8px 6px; background: var(--surface-1); border: 1px solid var(--line); border-radius: 6px; text-align: center; }
.stats-grille strong { display: block; font-size: 1.05rem; color: #fff; font-variant-numeric: tabular-nums; }
.stats-grille span { font-size: 0.72rem; color: var(--texte-doux); }
.jalons { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; }
.jalons li {
  padding: 5px 10px; border-radius: 999px;
  border: 1px solid var(--line-forte); color: var(--texte-faible);
  font-size: 0.78rem; font-weight: 700;
}
.jalons li.atteint { border-color: #edc22e; color: #fcd34d; }
.stats-note { margin-top: 10px; font-size: 0.8rem; color: var(--texte-doux); }
.stats-note a { color: var(--color-light); }


.overlay-box { position: relative; max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); overflow-y: auto; }
.overlay-fermer {
  position: absolute; top: 8px; right: 8px;
  width: 40px; height: 40px;
  font-size: 1.5rem; line-height: 1;
  background: transparent; color: var(--texte-doux);
  border: 0; border-radius: 6px; cursor: pointer;
}
.overlay-fermer:hover { color: #fff; background: var(--surface-2); }
.overlay-box p { color: var(--texte-doux); font-size: 0.92rem; margin-bottom: 8px; }
.overlay-box .fin-chiffres { color: #fff; font-size: 1.02rem; font-weight: 700; }
.fin-rang { color: #fcd34d !important; font-weight: 700; }
.fin-rang[hidden], .fin-note[hidden] { display: none; }
.fin-note { font-size: 0.84rem !important; }
.lien-classement-fin { display: inline-block; margin: 4px 0 8px; color: var(--color-light); font-weight: 700; font-size: 0.9rem; }
.overlay-btns .btn { min-height: 44px; }
#cta-inscription {
  margin: 12px 0; padding: 12px;
  background: var(--surface-2); border: 1px solid var(--line-forte); border-radius: 8px;
}
#cta-inscription[hidden] { display: none; }
.cta-auth-btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 8px; }

.confetti {
  position: fixed; top: -24px; z-index: 2000;
  pointer-events: none; font-size: 1.2rem;
  animation: confetti-chute 3s ease-in forwards;
}
@keyframes confetti-chute { to { transform: translateY(110vh) rotate(540deg); opacity: 0; } }


.date-defi { color: var(--texte-doux); font-size: 0.9rem; margin: -8px 0 14px; }
.defi-carte {
  margin: 0 auto 16px; padding: 16px; max-width: 560px;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px;
}
.defi-carte[hidden] { display: none; }
.defi-carte h2 { font-family: var(--font-display); font-size: 1.1rem; color: #f0f3f6; margin-bottom: 8px; }
.defi-carte p { color: var(--texte-doux); font-size: 0.9rem; margin-bottom: 10px; }
.defi-carte .defi-resultat { color: #fff; font-size: 1.05rem; font-weight: 700; }
.defi-serie { color: #fcd34d; font-weight: 700; font-size: 0.9rem; margin-bottom: 12px; }
.defi-serie[hidden] { display: none; }
.defi-compte-btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }

.barre-temps { height: 8px; margin: 0 auto 12px; max-width: 560px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 999px; overflow: hidden; }
.barre-temps span { display: block; height: 100%; width: 100%; background: var(--color-mid); transform-origin: left center; transition: transform 250ms linear; }
.barre-temps.presque span { background: #c9432a; }

.classement-section h2 { font-family: var(--font-display); font-size: 1.15rem; color: #f0f3f6; margin-bottom: 12px; }
.classement-section[hidden] { display: none; }
.lien-classement-complet { display: block; text-align: center; margin-top: 14px; color: var(--color-light); font-weight: 700; font-size: 0.88rem; }


.salle {
  margin: 0 auto 16px; padding: 18px 16px; max-width: 560px;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px;
}
.salle[hidden] { display: none; }
.salle h2 { font-family: var(--font-display); font-size: 1.15rem; color: #f0f3f6; margin-bottom: 8px; }
.salle p { color: var(--texte-doux); font-size: 0.9rem; margin-bottom: 10px; }
.code-salle { font-size: 1.9rem; font-weight: 800; letter-spacing: 0.22em; color: #fcd34d; margin: 2px 0 10px; }
.partage-lien { display: flex; gap: 8px; margin-bottom: 12px; }
.partage-lien input, .champ-pseudo {
  flex: 1; min-width: 0; min-height: 44px; padding: 8px 12px;
  font: inherit; font-size: 0.9rem;
  background: var(--surface-1); color: var(--texte);
  border: 1px solid var(--line-forte); border-radius: 6px;
}
.champ-pseudo:focus, .partage-lien input:focus { outline: none; border-color: var(--color-light); }
.ligne-rejoindre { display: flex; flex-wrap: wrap; gap: 8px; }
.ligne-rejoindre .champ-pseudo { flex: 1 1 180px; }
.ligne-rejoindre .btn { flex: 1 1 120px; min-height: 44px; }

.liste-joueurs { list-style: none; display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; text-align: left; }
.liste-joueurs li {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px;
  background: var(--surface-1); border: 1px solid var(--line); border-radius: 6px;
  font-size: 0.9rem; font-weight: 600;
}
.liste-joueurs .pseudo { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.liste-joueurs .moi .pseudo { color: #fcd34d; }
.liste-joueurs .absent { opacity: 0.5; }
.etiquette {
  padding: 2px 8px; border-radius: 999px;
  border: 1px solid var(--line-forte);
  font-size: 0.7rem; font-weight: 700; color: var(--texte-doux); white-space: nowrap;
}
.etiquette.or { border-color: #edc22e; color: #fcd34d; }
.etiquette.rouge { border-color: #c9432a; color: #f0a090; }


.scores-direct { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 6px; margin: 0 auto 12px; max-width: 640px; text-align: left; }
.scores-direct li {
  display: flex; align-items: baseline; gap: 6px;
  padding: 6px 10px;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: 6px;
  font-size: 0.82rem;
}
.scores-direct .rang { color: var(--texte-faible); font-weight: 700; min-width: 1.4em; }
.scores-direct .pseudo { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.scores-direct .points { font-weight: 800; font-variant-numeric: tabular-nums; color: #fff; }
.scores-direct .moi { border-color: var(--color-light); }
.scores-direct .elimine, .scores-direct .absent { opacity: 0.45; }
.scores-direct .elimine .pseudo { text-decoration: line-through; }

.resultats-manche { margin: 0 auto 14px; max-width: 560px; }
.resultats-manche[hidden] { display: none; }
.resultats-manche h2 { font-family: var(--font-display); font-size: 1.1rem; color: #f0f3f6; margin-bottom: 8px; }
.tableau-resultats { width: 100%; border-collapse: collapse; font-size: 0.88rem; text-align: left; }
.tableau-resultats th, .tableau-resultats td { padding: 7px 8px; border-bottom: 1px solid var(--line); }
.tableau-resultats th { color: var(--texte-doux); font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.05em; }
.tableau-resultats td.nombre, .tableau-resultats th.nombre { text-align: right; font-variant-numeric: tabular-nums; }
.tableau-resultats tr.moi td { color: #fcd34d; font-weight: 700; }
.tableau-resultats tr.gagnant td:first-child::before { content: '🏆 '; }

.alerte-reseau {
  margin: 0 auto 10px; padding: 8px 12px; max-width: 560px;
  border: 1px solid #c9432a; border-radius: 6px;
  color: #f0a090; font-size: 0.85rem; font-weight: 600;
}
.alerte-reseau[hidden] { display: none; }


@media (max-height: 820px) {
  body.page-2048.en-partie .jeu-banner { display: none; }
  body.page-2048.en-partie .plateau { --reserve: 308px; }
}

@media (max-width: 480px) {
  
  .choix-taille { flex-wrap: nowrap; gap: 6px; margin-bottom: 10px; }
  .choix-taille button { flex: 1; padding: 6px 4px; }
  .choix-taille .nom-grille, .choix-taille button small { display: none; }
  .top-bar { margin-bottom: 10px; padding-bottom: 8px; }
  .info-bar { margin-bottom: 10px; }
  .plateau { --cote: clamp(216px, min(100vw - 34px, 100vh - var(--reserve)), var(--cote-max)); --cote: clamp(216px, min(100vw - 34px, 100dvh - var(--reserve)), var(--cote-max)); }
  .info-bar .info-valeur { font-size: 1rem; }
  .top-bar h1 { font-size: 1.15rem; }
  .stats-grille { grid-template-columns: repeat(3, 1fr); }
  .partage-lien { flex-direction: column; }
}


@media (orientation: landscape) and (max-height: 540px) {
  body.page-2048.en-partie { padding-top: 8px; }
  body.page-2048.en-partie #app { max-width: none; padding: 10px 12px; }
  body.page-2048.en-partie .jeu-banner,
  body.page-2048.en-partie .top-bar .back-link,
  body.page-2048.en-partie .sous-titre-page,
  body.page-2048.en-partie .choix-taille { display: none; }
  body.page-2048.en-partie .top-bar { border: 0; margin: 0 0 6px; padding: 0; justify-content: flex-start; gap: 10px; }
  body.page-2048.en-partie .zone-jeu {
    display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 16px; align-items: start;
  }
  body.page-2048.en-partie .zone-plateau { grid-column: 1; grid-row: 1 / span 12; margin: 0; }
  body.page-2048.en-partie .zone-jeu > :not(.zone-plateau) { grid-column: 2; }
  
  body.page-2048.en-partie .zone-jeu > .cote-haut { margin-top: 48px; }
  body.page-2048.en-partie .plateau {
    --cote: clamp(200px, min(100vh - 28px, 58vw), var(--cote-max));
    --cote: clamp(200px, min(100dvh - 28px, 58vw), var(--cote-max));
  }
  .info-bar { padding: 6px 10px; margin-bottom: 8px; }
  .scores-direct { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .tuile { transition: none; }
  .tuile.apparait .tuile-face, .tuile.fusion .tuile-face, .info-valeur.gain { animation: none; }
  .confetti { display: none; }
}