/* 2048 — board styles. Structure follows the original (MIT, Gabriele Cirulli):
   positioned tiles + CSS transitions; rewritten to be fluid and to use the
   site's --gm-* tokens instead of fixed pixel sizes and the Clear Sans font. */

#gm-2048 {
  --g: 12px;                     /* grid gap */
  --tile: calc((100% - var(--g) * 3) / 4);
  width: 100%;
  max-width: 520px;
}

#gm-2048 .heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

#gm-2048 .scores-container {
  display: flex;
  gap: 8px;
}

#gm-2048 .score-container,
#gm-2048 .best-container {
  position: relative;
  min-width: 84px;
  padding: 10px 14px 8px;
  text-align: center;
  border-radius: 10px;
  background: var(--gm-surface, #1b2740);
  border: 1px solid var(--gm-line, rgba(255, 255, 255, 0.09));
  font: 500 1.35rem/1.1 var(--gm-display, "Fraunces", Georgia, serif);
  font-variant-numeric: tabular-nums;
}

#gm-2048 .score-container::after,
#gm-2048 .best-container::after {
  display: block;
  margin-top: 4px;
  font: 600 0.62rem/1 var(--gm-body, "DM Sans", system-ui, sans-serif);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gm-muted, rgba(242, 238, 230, 0.66));
}

#gm-2048 .score-container::after { content: attr(data-label); }
#gm-2048 .best-container::after { content: attr(data-label); }

#gm-2048 .score-addition {
  position: absolute;
  right: 14px;
  top: 6px;
  color: var(--gm-accent-bright, #e0584a);
  font-size: 1rem;
  font-weight: 600;
  animation: gm-2048-up 600ms ease-in both;
}

@keyframes gm-2048-up {
  0% { transform: translateY(0); opacity: 1; }
  100% { transform: translateY(-40px); opacity: 0; }
}

#gm-2048 .game-container {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  padding: var(--g);
  box-sizing: border-box;
  border-radius: var(--gm-radius, 12px);
  background: var(--gm-surface, #1b2740);
  border: 1px solid var(--gm-line, rgba(255, 255, 255, 0.09));
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.7);
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

#gm-2048 .grid-container {
  position: absolute;
  inset: var(--g);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 1fr);
  gap: var(--g);
}

#gm-2048 .grid-row {
  display: contents;
}

#gm-2048 .grid-cell {
  border-radius: 8px;
  background: var(--gm-bg-2, #131c2b);
}

#gm-2048 .tile-container {
  position: absolute;
  inset: var(--g);
  z-index: 2;
}

#gm-2048 .tile {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--tile);
  height: var(--tile);
  transition: transform 100ms ease-in-out;
}

#gm-2048 .tile .tile-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  border-radius: 8px;
  font: 600 clamp(1.4rem, 7vw, 2.4rem)/1 var(--gm-display, "Fraunces", Georgia, serif);
  font-variant-numeric: tabular-nums;
  color: #1c1a17;
  background: #efe6d4;
}

/* translate by n tile widths plus n gaps; percentages refer to the tile's own size */
#gm-2048 .tile-position-1-1 { transform: translate(0, 0); }
#gm-2048 .tile-position-2-1 { transform: translate(calc(100% + var(--g)), 0); }
#gm-2048 .tile-position-3-1 { transform: translate(calc(200% + var(--g) * 2), 0); }
#gm-2048 .tile-position-4-1 { transform: translate(calc(300% + var(--g) * 3), 0); }
#gm-2048 .tile-position-1-2 { transform: translate(0, calc(100% + var(--g))); }
#gm-2048 .tile-position-2-2 { transform: translate(calc(100% + var(--g)), calc(100% + var(--g))); }
#gm-2048 .tile-position-3-2 { transform: translate(calc(200% + var(--g) * 2), calc(100% + var(--g))); }
#gm-2048 .tile-position-4-2 { transform: translate(calc(300% + var(--g) * 3), calc(100% + var(--g))); }
#gm-2048 .tile-position-1-3 { transform: translate(0, calc(200% + var(--g) * 2)); }
#gm-2048 .tile-position-2-3 { transform: translate(calc(100% + var(--g)), calc(200% + var(--g) * 2)); }
#gm-2048 .tile-position-3-3 { transform: translate(calc(200% + var(--g) * 2), calc(200% + var(--g) * 2)); }
#gm-2048 .tile-position-4-3 { transform: translate(calc(300% + var(--g) * 3), calc(200% + var(--g) * 2)); }
#gm-2048 .tile-position-1-4 { transform: translate(0, calc(300% + var(--g) * 3)); }
#gm-2048 .tile-position-2-4 { transform: translate(calc(100% + var(--g)), calc(300% + var(--g) * 3)); }
#gm-2048 .tile-position-3-4 { transform: translate(calc(200% + var(--g) * 2), calc(300% + var(--g) * 3)); }
#gm-2048 .tile-position-4-4 { transform: translate(calc(300% + var(--g) * 3), calc(300% + var(--g) * 3)); }

/* a warm ramp that stays readable on the dark board */
#gm-2048 .tile-2 .tile-inner { background: #efe6d4; }
#gm-2048 .tile-4 .tile-inner { background: #e9dcc0; }
#gm-2048 .tile-8 .tile-inner { background: #f2b179; color: #fff; }
#gm-2048 .tile-16 .tile-inner { background: #f59563; color: #fff; }
#gm-2048 .tile-32 .tile-inner { background: #f67c5f; color: #fff; }
#gm-2048 .tile-64 .tile-inner { background: #f65e3b; color: #fff; }
#gm-2048 .tile-128 .tile-inner { background: #edcf72; color: #fff; font-size: clamp(1.2rem, 6vw, 2rem); }
#gm-2048 .tile-256 .tile-inner { background: #edcc61; color: #fff; font-size: clamp(1.2rem, 6vw, 2rem); box-shadow: 0 0 24px 4px rgba(243, 215, 116, 0.25); }
#gm-2048 .tile-512 .tile-inner { background: #edc850; color: #fff; font-size: clamp(1.2rem, 6vw, 2rem); box-shadow: 0 0 28px 6px rgba(243, 215, 116, 0.3); }
#gm-2048 .tile-1024 .tile-inner { background: #edc53f; color: #fff; font-size: clamp(1rem, 5vw, 1.6rem); box-shadow: 0 0 32px 8px rgba(243, 215, 116, 0.35); }
#gm-2048 .tile-2048 .tile-inner { background: var(--gm-accent, #c0392b); color: #fff; font-size: clamp(1rem, 5vw, 1.6rem); box-shadow: 0 0 36px 10px rgba(224, 88, 74, 0.35); }
#gm-2048 .tile-super .tile-inner { background: #2c2a29; color: #fff; font-size: clamp(0.9rem, 4.5vw, 1.4rem); }

#gm-2048 .tile-new .tile-inner { animation: gm-2048-appear 200ms ease 100ms both; }
#gm-2048 .tile-merged .tile-inner { z-index: 20; animation: gm-2048-pop 200ms ease 100ms both; }

@keyframes gm-2048-appear {
  0% { opacity: 0; transform: scale(0); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes gm-2048-pop {
  0% { transform: scale(0); }
  50% { transform: scale(1.2); }
  100% { transform: scale(1); }
}

#gm-2048 .game-message {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 100;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  text-align: center;
  border-radius: var(--gm-radius, 12px);
  background: rgba(15, 21, 32, 0.82);
  backdrop-filter: blur(3px);
  animation: gm-2048-fade 400ms ease both;
}

#gm-2048 .game-message p {
  margin: 0;
  font: 500 clamp(1.6rem, 5vw, 2.4rem)/1.1 var(--gm-display, "Fraunces", Georgia, serif);
  color: var(--gm-text, #f2eee6);
}

#gm-2048 .game-message .lower {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}

#gm-2048 .game-message.game-won,
#gm-2048 .game-message.game-over { display: flex; }

#gm-2048 .game-message .keep-playing-button { display: none; }
#gm-2048 .game-message.game-won .keep-playing-button { display: inline-flex; }

@keyframes gm-2048-fade {
  0% { opacity: 0; }
  100% { opacity: 1; }
}