/* 2048 by Gabriele Cirulli (MIT), restyled for Rocket Games. Every rule is scoped under .g2048 so nothing leaks
   into the site around it. The board is fluid: tiles are sized and positioned from --gap and the board width,
   and tile text scales with the board (container query units). Classic tile colours are kept. */
@import url(fonts/clear-sans.css);

.g2048 {
  --gap: 14px;
  --ink: #f4f7ff;
  --gold: #ffd166;
  margin: 0;
  padding: 4px 0 8px;
  background: transparent;
  color: #8aa3c4;
  font-family: "Clear Sans", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  font-size: 17px;
}
.g2048 .container { width: 100%; max-width: 500px; margin: 0 auto; }
.g2048 p { margin: 0 0 10px; line-height: 1.6; }
.g2048 strong { color: var(--ink); }

/* ---- heading: title + scores ---- */
.g2048 .heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 14px; }
.g2048 .title { margin: 0; font-size: 72px; line-height: 1; font-weight: 700; color: var(--ink); letter-spacing: -0.02em; }
.g2048 .scores-container { display: flex; gap: 8px; }
.g2048 .score-container, .g2048 .best-container {
  position: relative; min-width: 78px; padding: 22px 14px 8px; border-radius: 10px;
  background: #1c2b4a; color: var(--ink); font-size: 24px; font-weight: 700; line-height: 1.1; text-align: center;
  font-variant-numeric: tabular-nums;
}
.g2048 .score-container::after, .g2048 .best-container::after {
  position: absolute; top: 7px; left: 0; width: 100%; text-align: center;
  font-size: 11px; line-height: 11px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700; color: #8aa3c4;
}
.g2048 .score-container::after { content: "Score"; }
.g2048 .best-container::after { content: "Best"; }
.g2048 .score-addition {
  position: absolute; right: 0; left: 0; top: 22px; z-index: 100;
  font-size: 22px; line-height: 22px; font-weight: 700; color: var(--gold);
  animation: g2048-move-up 600ms ease-in both; pointer-events: none;
}
@keyframes g2048-move-up { 0% { transform: translateY(0); opacity: 1; } 100% { transform: translateY(-48px); opacity: 0; } }

/* ---- intro + new game ---- */
.g2048 .above-game { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 16px; }
.g2048 .game-intro { margin: 0; line-height: 1.4; }
.g2048 .restart-button, .g2048 .game-message button {
  flex: none; appearance: none; border: 0; cursor: pointer; font: inherit; font-size: 16px; font-weight: 700;
  height: 42px; padding: 0 20px; border-radius: 10px; background: var(--gold); color: #1a1200;
  transition: background-color .15s ease, transform .1s ease; -webkit-tap-highlight-color: transparent;
}
.g2048 .restart-button:hover, .g2048 .game-message button:hover { background: #ffe08a; }
.g2048 .restart-button:active, .g2048 .game-message button:active { transform: scale(0.97); }
.g2048 .restart-button:focus-visible, .g2048 .game-message button:focus-visible { outline: 2px solid #55d6ff; outline-offset: 2px; }

/* ---- board ---- */
.g2048 .game-container {
  position: relative; width: 100%; aspect-ratio: 1 / 1; padding: var(--gap); margin: 0 auto;
  background: #24324d; border-radius: 14px; box-sizing: border-box;
  container-type: inline-size; cursor: default;
  -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; touch-action: none;
}
.g2048 .grid-container, .g2048 .tile-container { position: absolute; inset: var(--gap); }
.g2048 .grid-container { z-index: 1; display: grid; grid-template: repeat(4, 1fr) / repeat(4, 1fr); gap: var(--gap); }
.g2048 .grid-row { display: contents; }
.g2048 .grid-cell { border-radius: 8px; background: rgba(255, 255, 255, 0.07); }
.g2048 .tile-container { z-index: 2; }

.g2048 .tile {
  --x: 0; --y: 0;
  position: absolute; left: 0; top: 0;
  width: calc((100% - 3 * var(--gap)) / 4); height: calc((100% - 3 * var(--gap)) / 4);
  transform: translate(calc(var(--x) * (100% + var(--gap))), calc(var(--y) * (100% + var(--gap))));
  transition: transform 100ms ease-in-out;
}
.g2048 .tile-position-1-1 { --x: 0; --y: 0; } .g2048 .tile-position-2-1 { --x: 1; --y: 0; } .g2048 .tile-position-3-1 { --x: 2; --y: 0; } .g2048 .tile-position-4-1 { --x: 3; --y: 0; }
.g2048 .tile-position-1-2 { --x: 0; --y: 1; } .g2048 .tile-position-2-2 { --x: 1; --y: 1; } .g2048 .tile-position-3-2 { --x: 2; --y: 1; } .g2048 .tile-position-4-2 { --x: 3; --y: 1; }
.g2048 .tile-position-1-3 { --x: 0; --y: 2; } .g2048 .tile-position-2-3 { --x: 1; --y: 2; } .g2048 .tile-position-3-3 { --x: 2; --y: 2; } .g2048 .tile-position-4-3 { --x: 3; --y: 2; }
.g2048 .tile-position-1-4 { --x: 0; --y: 3; } .g2048 .tile-position-2-4 { --x: 1; --y: 3; } .g2048 .tile-position-3-4 { --x: 2; --y: 3; } .g2048 .tile-position-4-4 { --x: 3; --y: 3; }

.g2048 .tile-inner {
  display: flex; align-items: center; justify-content: center; width: 100%; height: 100%;
  border-radius: 8px; background: #eee4da; color: #776e65; font-weight: 700; line-height: 1;
  font-size: 54px; font-size: 11cqi; font-variant-numeric: tabular-nums;
}
.g2048 .tile-2 .tile-inner { background: #eee4da; }
.g2048 .tile-4 .tile-inner { background: #ede0c8; }
.g2048 .tile-8 .tile-inner { color: #f9f6f2; background: #f2b179; }
.g2048 .tile-16 .tile-inner { color: #f9f6f2; background: #f59563; }
.g2048 .tile-32 .tile-inner { color: #f9f6f2; background: #f67c5f; }
.g2048 .tile-64 .tile-inner { color: #f9f6f2; background: #f65e3b; }
.g2048 .tile-128 .tile-inner, .g2048 .tile-256 .tile-inner, .g2048 .tile-512 .tile-inner { font-size: 45px; font-size: 9cqi; }
.g2048 .tile-1024 .tile-inner, .g2048 .tile-2048 .tile-inner { font-size: 35px; font-size: 7.2cqi; }
.g2048 .tile-128 .tile-inner { color: #f9f6f2; background: #edcf72; box-shadow: 0 0 24px 6px rgba(243, 215, 116, 0.18), inset 0 0 0 1px rgba(255, 255, 255, 0.14); }
.g2048 .tile-256 .tile-inner { color: #f9f6f2; background: #edcc61; box-shadow: 0 0 24px 6px rgba(243, 215, 116, 0.24), inset 0 0 0 1px rgba(255, 255, 255, 0.19); }
.g2048 .tile-512 .tile-inner { color: #f9f6f2; background: #edc850; box-shadow: 0 0 24px 6px rgba(243, 215, 116, 0.30), inset 0 0 0 1px rgba(255, 255, 255, 0.24); }
.g2048 .tile-1024 .tile-inner { color: #f9f6f2; background: #edc53f; box-shadow: 0 0 24px 6px rgba(243, 215, 116, 0.36), inset 0 0 0 1px rgba(255, 255, 255, 0.29); }
.g2048 .tile-2048 .tile-inner { color: #f9f6f2; background: #edc22e; box-shadow: 0 0 24px 6px rgba(243, 215, 116, 0.42), inset 0 0 0 1px rgba(255, 255, 255, 0.33); }
.g2048 .tile-super .tile-inner { color: #f9f6f2; background: #3c3a32; font-size: 30px; font-size: 6cqi; }

@keyframes g2048-appear { 0% { opacity: 0; transform: scale(0); } 100% { opacity: 1; transform: scale(1); } }
@keyframes g2048-pop { 0% { transform: scale(0); } 50% { transform: scale(1.2); } 100% { transform: scale(1); } }
.g2048 .tile-new .tile-inner { animation: g2048-appear 200ms ease 100ms backwards; }
.g2048 .tile-merged { z-index: 20; }
.g2048 .tile-merged .tile-inner { animation: g2048-pop 200ms ease 100ms backwards; }

/* ---- win / game over overlay ---- */
.g2048 .game-message {
  display: none; position: absolute; inset: 0; z-index: 100; border-radius: 14px;
  flex-direction: column; align-items: center; justify-content: center; gap: 22px; text-align: center;
  background: rgba(6, 11, 24, 0.78); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); color: var(--ink);
  animation: g2048-fade-in 600ms ease 900ms both;
}
@keyframes g2048-fade-in { 0% { opacity: 0; } 100% { opacity: 1; } }
.g2048 .game-message.game-won, .g2048 .game-message.game-over { display: flex; }
.g2048 .game-message.game-won { background: rgba(237, 194, 46, 0.86); color: #1a1200; }
.g2048 .game-message p { margin: 0; font-size: 56px; font-size: 11cqi; font-weight: 700; line-height: 1.1; color: inherit; }
.g2048 .game-message .lower { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.g2048 .game-message .keep-playing-button { display: none; }
.g2048 .game-message.game-won .keep-playing-button { display: inline-block; }
.g2048 .game-message.game-won button { background: #1a1200; color: #ffe08a; }
.g2048 .game-message.game-won button:hover { background: #3a2c00; }

/* ---- text below the board ---- */
.g2048 .game-explanation { margin: 22px 0 8px; font-size: 15px; }
.g2048 .game-explanation strong.important { text-transform: uppercase; letter-spacing: 0.04em; }
.g2048 .credit { margin: 0; font-size: 12.5px; color: #6f86a6; }
.g2048 .credit a { color: #8aa3c4; text-decoration: underline; }

@media (max-width: 520px) {
  .g2048 { --gap: 9px; font-size: 15px; }
  .g2048 .title { font-size: 46px; }
  .g2048 .score-container, .g2048 .best-container { min-width: 64px; padding: 20px 10px 7px; font-size: 19px; border-radius: 8px; }
  .g2048 .score-addition { top: 20px; font-size: 18px; }
  .g2048 .above-game { margin-bottom: 12px; }
  .g2048 .restart-button { height: 40px; padding: 0 16px; font-size: 15px; }
  .g2048 .game-container, .g2048 .game-message { border-radius: 10px; }
  .g2048 .grid-cell, .g2048 .tile-inner { border-radius: 6px; }
  .g2048 .game-explanation { margin-top: 16px; font-size: 14px; }
}
@media (max-width: 360px) {
  .g2048 .title { font-size: 38px; }
  .g2048 .score-container, .g2048 .best-container { min-width: 56px; padding-left: 8px; padding-right: 8px; font-size: 17px; }
  .g2048 .game-intro { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .g2048 .tile { transition-duration: 0ms; }
  .g2048 .tile-new .tile-inner, .g2048 .tile-merged .tile-inner { animation: none; }
  .g2048 .game-message { animation-delay: 300ms; animation-duration: 200ms; }
}

/* ---- full-screen play (html.rg-immersive, see stage.js): the board takes the largest square that fits,
   with title, scores and New Game in one compact row above it (portrait) or a column beside it (landscape).
   The long intro and credit stay on the normal page. ---- */
html.rg-immersive .g2048 {
  --pad: 16px; --hdr: 52px;
  container: g2048 / size; display: flex; align-items: center; justify-content: center;
  padding: 0; overflow: hidden; touch-action: none; overscroll-behavior: none;
}
html.rg-immersive .g2048 .game-intro, html.rg-immersive .g2048 .game-explanation, html.rg-immersive .g2048 .credit { display: none; }
html.rg-immersive .g2048 .heading, html.rg-immersive .g2048 .above-game { display: contents; }
html.rg-immersive .g2048 .container {
  --board: min(100cqw - 2 * var(--pad), 100cqh - 2 * var(--pad) - var(--hdr) - 12px);
  width: var(--board); max-width: none; margin: 0;
  display: grid; grid-template-columns: 1fr auto auto; grid-template-rows: var(--hdr) auto; align-items: center; column-gap: 8px; row-gap: 12px;
}
html.rg-immersive .g2048 .title { display: none; }   /* the stage bar already names the game */
html.rg-immersive .g2048 .scores-container { grid-column: 1; }
html.rg-immersive .g2048 .restart-button { grid-column: 3; white-space: nowrap; }
html.rg-immersive .g2048 .scores-container { gap: 6px; }
html.rg-immersive .g2048 .score-container, html.rg-immersive .g2048 .best-container { min-width: 62px; padding: 19px 10px 6px; font-size: 18px; border-radius: 8px; }
html.rg-immersive .g2048 .score-container::after, html.rg-immersive .g2048 .best-container::after { top: 6px; font-size: 10px; }
html.rg-immersive .g2048 .score-addition { top: 19px; font-size: 17px; }
html.rg-immersive .g2048 .restart-button { height: 44px; padding: 0 14px; font-size: 15px; }
html.rg-immersive .g2048 .game-container { grid-column: 1 / -1; width: var(--board); }
@container g2048 (max-width: 359px) {
  html.rg-immersive .g2048 .score-container, html.rg-immersive .g2048 .best-container { min-width: 52px; padding-left: 7px; padding-right: 7px; font-size: 16px; }
  html.rg-immersive .g2048 .restart-button { padding: 0 10px; font-size: 14px; }
}
/* wide spaces (phone landscape, desktop): controls in a column to the left of the board */
@container g2048 (min-aspect-ratio: 5 / 4) {
  html.rg-immersive .g2048 .container {
    --side: 168px;
    --board: min(100cqh - 2 * var(--pad), 100cqw - 2 * var(--pad) - var(--side) - 20px);
    width: auto; grid-template-columns: var(--side) var(--board); grid-template-rows: 1fr auto auto auto 1fr; column-gap: 20px; row-gap: 12px; align-content: center;
  }
  html.rg-immersive .g2048 .title { display: block; grid-column: 1; grid-row: 2; font-size: 44px; }
  html.rg-immersive .g2048 .scores-container { grid-column: 1; grid-row: 3; }
  html.rg-immersive .g2048 .scores-container > div { flex: 1; min-width: 0; }
  html.rg-immersive .g2048 .restart-button { grid-column: 1; grid-row: 4; width: 100%; }
  html.rg-immersive .g2048 .game-container { grid-column: 2; grid-row: 1 / -1; }
}
/* big screens: scale the side controls with the board */
@container g2048 (min-aspect-ratio: 5 / 4) and (min-height: 600px) {
  html.rg-immersive .g2048 .container { --side: 220px; column-gap: 32px; row-gap: 16px; }
  html.rg-immersive .g2048 .title { font-size: 64px; }
  html.rg-immersive .g2048 .score-container, html.rg-immersive .g2048 .best-container { padding: 24px 12px 9px; font-size: 26px; border-radius: 10px; }
  html.rg-immersive .g2048 .score-container::after, html.rg-immersive .g2048 .best-container::after { top: 8px; font-size: 11px; }
  html.rg-immersive .g2048 .restart-button { height: 50px; font-size: 17px; }
}