/* 2048: a calm board in the site's greens, dark numbers on the light tiles and
   white on the dark ones, large arrow buttons under the board. */
.t48 { --gap: 10px; max-width: 480px; margin: 0 auto; }
.t48-top { display: flex; gap: 8px; margin: 0 0 12px; }
.t48-stat { flex: 1; display: flex; flex-direction: column; justify-content: space-between; gap: 2px; margin: 0; padding: 8px 10px; border-radius: 12px; background: #eef4f0; text-align: center; }
.t48-stat__label { display: block; font: 600 14px/1.2 Inter, system-ui, sans-serif; color: #2f5d45; }
.t48-stat__value { display: block; font: 700 26px/1.2 Georgia, 'Times New Roman', serif; color: #1a1a1a; }
.t48-stat--goal { background: #fbf6e3; }

.t48-grid { position: relative; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: var(--gap); padding: var(--gap); aspect-ratio: 1; border-radius: 14px; background: #d9e5dc; container-type: inline-size; touch-action: none; -webkit-user-select: none; user-select: none; }
.t48-cell { border-radius: 10px; background: #eef4f0; }
.t48-tiles { position: absolute; inset: var(--gap); pointer-events: none; }
.t48-tile {
  --t: calc((100cqw - (var(--n) - 1) * var(--gap)) / var(--n));
  position: absolute; top: 0; left: 0; width: var(--t); height: var(--t);
  display: grid; place-items: center; border-radius: 10px;
  translate: calc(var(--c) * (var(--t) + var(--gap))) calc(var(--r) * (var(--t) + var(--gap)));
  font: 700 calc(var(--t) * .46) / 1 Georgia, 'Times New Roman', serif; font-variant-numeric: lining-nums;
  color: #1a1a1a; background: #fbf9f4; box-shadow: 0 2px 4px rgba(31, 41, 55, .12);
}
.t48-tile[data-digits="3"] { font-size: calc(var(--t) * .36); }
.t48-tile[data-digits="4"] { font-size: calc(var(--t) * .31); }
.t48-tile[data-digits="5"] { font-size: calc(var(--t) * .22); }

/* The palette: sand, then ever deeper greens, and gold for the goal. */
.t48-tile[data-value="2"] { background: #fbf9f4; box-shadow: inset 0 0 0 2px #e1ded6; }
.t48-tile[data-value="4"] { background: #f1e9d6; }
.t48-tile[data-value="8"] { background: #e5d5ae; }
.t48-tile[data-value="16"] { background: #cfe2d6; }
.t48-tile[data-value="32"] { background: #a9cfb8; }
.t48-tile[data-value="64"] { background: #8fc1a4; }
.t48-tile[data-value="128"] { background: #3d7a5a; color: #fff; }
.t48-tile[data-value="256"] { background: #2f5d45; color: #fff; }
.t48-tile[data-value="512"] { background: #244a37; color: #fff; }
.t48-tile[data-value="1024"] { background: #173427; color: #fff; }
.t48-tile[data-value="2048"], .t48-tile[data-value="big"] { background: #f2b705; color: #1a1a1a; }


.t48-pad { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 14px 0 0; }
.t48-arrow { display: grid; place-items: center; min-height: 60px; padding: 0; border: 1.5px solid #2f5d45; border-radius: 14px; background: #fff; color: #2f5d45; cursor: pointer; touch-action: manipulation; }
.t48-arrow svg { fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.t48-arrow:hover { background: #eef4f0; }
.t48-arrow:active { background: #2f5d45; color: #fff; }
.t48-arrow:focus-visible { outline: 3px solid #f2b705; outline-offset: 2px; }

/* A tip: the arrow to tap pulses in a yellow ring. */
.t48-arrow.is-hint { background: #fff3c4; border-width: 3px; box-shadow: 0 0 0 4px #f2b705; animation: t48-hint 1.1s ease-in-out infinite; }
@keyframes t48-hint { 50% { box-shadow: 0 0 0 9px rgba(242, 183, 5, .35); } }

/* 2048 reached: a card over the board with the choice to stop or play on. */
.t48-won { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 10px; padding: 18px; border-radius: 14px; background: rgba(251, 246, 227, .94); text-align: center; }
.t48-won[hidden] { display: none; }
.t48-won__title { margin: 0; font: 700 26px/1.2 Georgia, 'Times New Roman', serif; color: #1a1a1a; }
.t48-won__text { margin: 0; max-width: 22em; font-size: 17px; line-height: 1.45; color: #374151; }
.t48-won__buttons { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 6px; }
.t48-won__buttons .sp-button { min-width: 150px; min-height: 52px; font-size: 18px; }

/* Larger: the board and the arrows may take more room. More contrast: firm lines, darker labels. */
.sp--large .t48 { max-width: 560px; }
.sp--large .t48-arrow { min-height: 70px; }
.sp--large .t48-stat__label { font-size: 16px; }
.sp--contrast .t48-grid { background: #b9cfc0; }
.sp--contrast .t48-tile { box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .35); }
.sp--contrast .t48-tile[data-value="2"] { box-shadow: inset 0 0 0 2px #6b7280; }
.sp--contrast .t48-stat__label { color: #173427; }
.sp--contrast .t48-arrow { border-width: 2.5px; border-color: #173427; color: #173427; }

@media (prefers-reduced-motion: reduce) {
  .t48-arrow.is-hint { animation: none; }
}

@media (max-width: 760px) {
  .t48 { --gap: 8px; }
  .t48-stat { padding: 6px 4px; }
  .t48-stat__label { font-size: 13px; }
  .t48-stat__value { font-size: 22px; }
}
@media (max-width: 520px) {
  .t48-won__title { font-size: 22px; }
  .t48-won__text { font-size: 16px; }
  .t48-won { gap: 8px; padding: 12px; }
  .t48-won__buttons { flex-direction: column; width: 100%; max-width: 260px; }
  .t48-won__buttons .sp-button { width: 100%; min-width: 0; padding: 0 12px; }
}