/* ═══ 2048 — design system jeux.html ═══ */
.jeu-v-wrap { max-width: 480px; margin: 0 auto; }

.jv2048-shell {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Utility */
.jv2048-shell .hidden { display: none !important; }

/* ── Grid wrapper ── */
.jv2048-grid-wrapper {
  position: relative;
  isolation: isolate;
  overscroll-behavior: contain;
}

/* ── Grid ── */
.jv2048-grid {
  --tile-size: clamp(52px, 16vw, 86px);
  --gap: clamp(6px, 1.6vw, 10px);
  --radius: clamp(10px, 2vw, 16px);

  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;

  position: relative;
  display: grid;
  grid-template-columns: repeat(4, var(--tile-size));
  grid-template-rows: repeat(4, var(--tile-size));
  gap: var(--gap);
  justify-content: center;
  padding: var(--gap);
  margin: 0 auto;
  border-radius: calc(var(--radius) + 8px);
  background: var(--bg2);
  border: 1px solid var(--bd);
  box-shadow: var(--s2);
}

.dk .jv2048-grid {
  background: var(--cd2);
  border-color: var(--bd2);
  box-shadow: var(--s3);
}

/* ── Cells ── */
.jv2048-cell {
  width: var(--tile-size);
  height: var(--tile-size);
  border-radius: var(--radius);
  background: var(--sf2);
}

.dk .jv2048-cell { background: rgba(255,255,255,.05); }

/* ── Tiles ── */
.jv2048-tile {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius);
  font-weight: 900;
  z-index: 2;
  transition: none;
  box-shadow: 0 4px 12px rgba(0,0,0,.12), inset 0 1px 0 rgba(255,255,255,.22);
}

.jv2048-tile--small  { font-size: clamp(22px, 6vw,   32px); }
.jv2048-tile--medium { font-size: clamp(18px, 5vw,   26px); }
.jv2048-tile--large  { font-size: clamp(13px, 4.3vw, 20px); }

.jv2048-tile[data-value="2"]    { background: #fef3c7; color: #92400e; }
.jv2048-tile[data-value="4"]    { background: #fde68a; color: #92400e; }
.jv2048-tile[data-value="8"]    { background: #fdba74; color: #fff; }
.jv2048-tile[data-value="16"]   { background: #fb923c; color: #fff; }
.jv2048-tile[data-value="32"]   { background: #f97316; color: #fff; }
.jv2048-tile[data-value="64"]   { background: #ef4444; color: #fff; }
.jv2048-tile[data-value="128"]  { background: #fbbf24; color: #fff; }
.jv2048-tile[data-value="256"]  { background: #f59e0b; color: #fff; }
.jv2048-tile[data-value="512"]  { background: #d97706; color: #fff; }
.jv2048-tile[data-value="1024"] { background: #b45309; color: #fff; }
.jv2048-tile[data-value="2048"] { background: var(--t2048-accent, var(--a1)); color: #fff; box-shadow: 0 4px 18px rgba(109,92,255,.35), inset 0 1px 0 rgba(255,255,255,.22); }
.jv2048-tile[data-value="super"]{ background: #6d28d9; color: #fff; }

/* ── Tile animations ── */
.jv2048-tile--pop   { animation: jv2048-pop   .2s  ease; }
.jv2048-tile--merge { animation: jv2048-pulse .25s ease; }

@keyframes jv2048-pop {
  0%   { transform: scale(0);    opacity: 0; }
  60%  { transform: scale(1.12); }
  100% { transform: scale(1);    opacity: 1; }
}

@keyframes jv2048-pulse {
  0%   { transform: scale(1);    }
  40%  { transform: scale(1.16); }
  100% { transform: scale(1);    }
}

/* ── Overlay ── */
.jv2048-overlay {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: grid;
  place-items: center;
  padding: 18px;
  backdrop-filter: blur(6px);
  background: rgba(0,0,0,.35);
  border-radius: calc(var(--radius, 14px) + 8px);
}

.jv2048-overlay.hidden          { display: none; }
.jv2048-overlay--win            { background: rgba(109,92,255,.18); }
.jv2048-overlay--gameover       { background: rgba(0,0,0,.44); }

.dk .jv2048-overlay--win        { background: rgba(168,152,255,.22); }
.dk .jv2048-overlay--gameover   { background: rgba(0,0,0,.58); }

.jv2048-overlay-title {
  font-size: clamp(18px, 5vw, 22px);
  font-weight: 800;
  letter-spacing: -.3px;
  margin: 0 0 4px;
}

.jv2048-overlay-score {
  font-size: 12px;
  color: var(--tx2);
  margin: 0 0 14px;
}

.jv2048-overlay-actions {
  display: flex;
  justify-content: center;
  gap: 6px;
  flex-wrap: wrap;
}

/* ── HTML page overlays (démarrage / fin) ── */
.jv2048-page-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: stretch;
  justify-content: stretch;
  background: var(--cd, #fff);
  overflow: hidden;
}

.jv2048-page-overlay.hidden { display: none; }

.jv2048-page-overlay > .snk-screen {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.jv2048-page-overlay .snk-screen {
  justify-content: center;
  align-items: center;
  padding-top: 14px;
  padding-bottom: 14px;
  width: 100%;
  min-height: 100%;
  box-sizing: border-box;
}

/* ── Responsive ── */
@media (max-width: 400px) {
  .jv2048-grid { --tile-size: clamp(46px, 21vw, 68px); }
}