/* 2048 — grille, tuiles de papier et surligneurs (le reste vient de carnet.css). */
.head { align-items: center; }

.goal { margin: 0; font: 500 22px var(--hand); color: var(--pencil); transform: rotate(-1.5deg); }
.goal b { color: var(--ink); font-weight: 700; background: linear-gradient(transparent 50%, var(--fluo) 50%, var(--fluo) 88%, transparent 88%); padding: 0 2px; }

.score-box { position: relative; }

.gain {
  position: absolute;
  left: 0;
  bottom: 100%;
  font: 700 22px var(--hand);
  color: var(--pen);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
}
.gain.show { animation: gain .7s ease-out; }
@keyframes gain {
  0%   { opacity: 0; transform: translateY(6px); }
  20%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(-22px); }
}

.stat { font-variant-numeric: tabular-nums; }

/* ---- Grille ---- */
.board {
  position: relative;
  aspect-ratio: 1;
  width: 100%;
  background: #FBFAF6;
  container-type: inline-size;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  touch-action: none;   /* le balayage ne fait jamais défiler la page */
  outline: none;
  cursor: grab;
}
.board:focus-visible { box-shadow: 0 0 0 3px var(--fluo), 0 0 0 5px var(--ink); }

.board .ink { z-index: 0; }

.tiles { position: absolute; inset: 0; z-index: 1; }

/* Une tuile occupe une case (25 %) ; translate en % de sa propre taille = colonne/ligne. */
.tile {
  position: absolute;
  top: 0; left: 0;
  width: 25%;
  height: 25%;
  padding: 3.2%;
  transform: translate(calc(var(--c) * 100%), calc(var(--row) * 100%));
  transition: transform .11s ease-in-out;
  will-change: transform;
}
.tile.gone { z-index: 0; }
.tile.merged, .tile.fresh { z-index: 2; }

.paper {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  border: 2px solid var(--ink);
  border-radius: var(--box-a);
  background: #fff;
  box-shadow: 2px 3px 0 rgba(14, 14, 12, .13);
  transform: rotate(var(--pr, 0deg));
  font-family: var(--marker);
  font-size: 13cqw;
  line-height: 1;
  color: var(--ink);
  overflow: hidden;
}
.tile.alt .paper { border-radius: var(--box-b); }

.paper .n {
  position: relative;
  z-index: 1;
  display: inline-block;
  transform: translate(var(--dx, 0), var(--dy, 0)) rotate(var(--r, 0deg));
}

.d3 .paper { font-size: 10cqw; }
.d4 .paper { font-size: 7.6cqw; }
.d5 .paper { font-size: 6cqw; }

.fresh .paper  { animation: appear .2s ease-out both; }
.merged .paper { animation: fuse .2s ease-out; }

@keyframes appear {
  0%   { transform: scale(0) rotate(var(--pr, 0deg)); opacity: 0; }
  100% { transform: scale(1) rotate(var(--pr, 0deg)); opacity: 1; }
}
@keyframes fuse {
  0%   { transform: scale(1) rotate(var(--pr, 0deg)); }
  50%  { transform: scale(1.14) rotate(var(--pr, 0deg)); }
  100% { transform: scale(1) rotate(var(--pr, 0deg)); }
}

/* ---- Progression des couleurs : crayon, puis surligneurs pâles, puis soutenus, puis encre ---- */
.t-4 {
  background:
    repeating-linear-gradient(-45deg, rgba(119, 115, 106, .16) 0 2px, transparent 2px 7px),
    #fff;
}
.t-8    { background: #FFF6A6; }
.t-16   { background: #FFDFAE; }
.t-32   { background: #FFD0E2; }
.t-64   { background: #FFBE9E; }
.t-128  { background: #FFE83D; }
.t-256  { background: #FFA94D; }
.t-512  { background: #FF7FB6; }
.t-1024 { background: var(--fluo); }
.t-2048, .t-big { background: var(--ink); color: var(--fluo); }
.t-big { color: #FF7FB6; }

/* Coup de surligneur : bande un peu plus claire, comme un trait de feutre. */
.t-8, .t-16, .t-32, .t-64, .t-128, .t-256, .t-512, .t-1024 {
  background-image: linear-gradient(170deg, rgba(255, 255, 255, .35) 0 18%, transparent 18% 78%, rgba(14, 14, 12, .04) 78%);
}

.t-2048 .n, .t-big .n { text-shadow: 0 0 10px rgba(200, 255, 61, .35); }

/* ---- Côté ---- */
.actions { grid-template-columns: 1fr 1.4fr; align-items: stretch; }
.actions .tool { flex-direction: row; justify-content: center; gap: 6px; font-size: 21px; }
.actions .tool .ico { font-size: 22px; }

.legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 18px 0 0;
}
.legend span {
  display: grid;
  place-items: center;
  min-width: 40px;
  height: 36px;
  padding: 0 6px;
  border: 2px solid var(--ink);
  border-radius: var(--box-a);
  font: 400 18px var(--marker);
}
.legend .t-2 { background: #fff; }
.legend span:nth-child(even) { border-radius: var(--box-b); }

.modal-actions { display: grid; gap: 10px; }
.modal-card .modal-actions .btn { width: 100%; }

.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;
}

button { touch-action: manipulation; }

@media (max-width: 820px) {
  .layout { gap: 16px; }
  .legend { display: none; }
  .help { font-size: 17px; }
}

@media (max-width: 420px) {
  .goal { font-size: 19px; }
  .stats { gap: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  .tile { transition: none; }
  .fresh .paper, .merged .paper, .gain.show { animation: none; }
}