:root{
  --bg: #faf8ef;
  --panel: #f9f6f2;
  --text: #776e65;
  --muted: #9e948a;
  --board-bg: #bbada0;
  --cell-bg: #cdc1b4;
  --tile-gap: 12px;
  --tile-size: 106px;
  --radius: 6px;
  --shadow: 0 6px 0 rgba(0,0,0,0.06);
  --score-bg: linear-gradient(180deg,#eee4da,#efe1c9);
  --score-best-bg: linear-gradient(180deg,#f3e6d6,#ecd9b9);
  --accent: #8f7a66;
  --tile-ease: cubic-bezier(.17,.67,.27,1);
  --anim-ms: 160ms;

  /* gallery specific */
  --card-bg: #fff;
  --card-radius: 10px;
  --card-shadow: 0 8px 20px rgba(15,15,15,0.06);
  --accent-color: #2b7cff;
  --container-max: 1100px;
}

/* Base */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: "Clear Sans", "Arial", sans-serif;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}



/* ---------- Header / Nav (site) ---------- */
.container-x{ max-width:var(--container-max); margin:0 auto; padding:0 16px; display:flex; align-items:center; justify-content:space-between; gap:12px; }
.site-header-nav{ background:#fff; box-shadow:0 1px 6px rgba(0,0,0,0.04); position:sticky; top:0; z-index:40; }
.site-header-nav .nav-inner{ padding:8px 0; }
.brand{ display:inline-block; padding:8px 12px; font-weight:700; color:var(--accent-color); text-decoration:none; font-size:1.1rem; }
.main-nav ul{ list-style:none; margin:0; padding:0; display:flex; align-items:center; gap:6px; }
.main-nav li{ margin:0; }
.main-nav a{ display:inline-block; padding:8px 10px; text-decoration:none; color:#333; border-radius:6px; font-size:0.95rem; }
.main-nav a:hover{ background:rgba(43,124,255,0.06); color:var(--accent-color); }
.dropdown{ position:relative; }
.dropdown-toggle{ background:none; border:0; padding:8px 10px; cursor:pointer; font-size:0.95rem; }
.dropdown-menu{ position:absolute; right:0; top:calc(100% + 8px); background:#fff; min-width:220px; box-shadow:0 10px 30px rgba(0,0,0,0.08); display:none; border-radius:8px; overflow:hidden; }
.dropdown-menu ul{ margin:0; padding:6px 0; }
.dropdown-menu li{ padding:0; }
.dropdown-menu a{ display:block; padding:10px 14px; color:#333; text-decoration:none; font-size:0.95rem; }
.dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu{ display:block; }

/* Mobile nav */
.nav-toggle{ display:none; background:none; border:0; padding:8px 12px; font-size:20px; cursor:pointer; }
.site-header-nav.open .main-nav{ display:block; position:absolute; left:0; right:0; top:64px; background:#fff; padding:12px; box-shadow:0 10px 30px rgba(0,0,0,0.06); z-index:30; }
@media (max-width:880px){
  .main-nav{ display:none; }
  .nav-toggle{ display:inline-block; }
  .container-x{ padding:0 12px; }
  .dropdown-menu{ right:8px; left:8px; }
  .brand{ font-size:1rem; }
}

/* ---------- Page container, header ---------- */
.container{ max-width:var(--container-max); margin: 28px auto; padding: 0 18px; }
.page-header{ padding: 18px 0; }
.page-header h1{ margin:0 0 8px 0; font-size:1.6rem; color:#332e2a; }
.page-header p{ margin:0; color:var(--muted); }

/* ---------- Gallery (cards) ---------- */
/* IMPORTANT: use card-grid to avoid colliding with game board .grid */
.card-grid{
  display:grid;
  grid-template-columns: repeat( auto-fill, minmax(220px, 1fr) );
  gap:18px;
  margin:18px 0 36px 0;
  align-items:stretch;
}

.card{
  display:flex;
  flex-direction:column;
  background:var(--card-bg);
  border-radius:var(--card-radius);
  overflow:hidden;
  text-decoration:none;
  color:inherit;
  box-shadow:var(--card-shadow);
  transition: transform .16s ease, box-shadow .16s ease;
}
.card:hover{ transform: translateY(-6px); box-shadow:0 18px 40px rgba(15,15,15,0.08); }

.card-media{ width:100%; height:140px; background:#efefef; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.card-media img{ width:100%; height:100%; object-fit:cover; display:block; }

.card-body{ padding:12px 14px; display:flex; flex-direction:column; gap:8px; flex:1 1 auto; }
.card-title{ margin:0; font-size:1.05rem; }
.card-text{ margin:0; color:var(--muted); font-size:0.95rem; flex:0 0 auto; }

/* small screens */
@media (max-width:520px){
  .card-media{ height:110px; }
  .card-grid{ gap:12px; }
}

/* ---------- Footer ---------- */
.site-footer{ padding:20px 0; text-align:center; color:var(--muted); }

/* ---------- Game board CSS (kept intact) ---------- */
/* Board */
.board {
  position: relative;
  width: calc( (var(--tile-size) * 4) + (var(--tile-gap) * 5) );
  height: calc( (var(--tile-size) * 4) + (var(--tile-gap) * 5) );
  background: var(--board-bg);
  padding: var(--tile-gap);
  border-radius: 8px;
  box-shadow: 0 4px 0 rgba(0,0,0,0.06);
  touch-action: none;
}

.grid {
  position:absolute; left: var(--tile-gap); top: var(--tile-gap);
  width: calc(100% - (var(--tile-gap) * 2));
  height: calc(100% - (var(--tile-gap) * 2));
  display:grid; grid-template-columns:repeat(4,1fr); grid-template-rows:repeat(4,1fr);
  gap:calc(var(--tile-gap) - 4px); z-index:1; pointer-events:none;
}
.grid > div { background: var(--cell-bg); border-radius:6px; box-shadow: inset 0 -3px 0 rgba(0,0,0,0.06); }

/* tile container */
.tile-container {
  position:absolute; left: var(--tile-gap); top: var(--tile-gap);
  width: calc(100% - (var(--tile-gap) * 2)); height: calc(100% - (var(--tile-gap) * 2));
  z-index: 50; pointer-events:none; transform: translateZ(0); will-change: transform;
}

/* --- Tiles --- */
/* tile: transition only on transform to avoid opacity conflicts */
.tile {
  position:absolute;
  border-radius:6px;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden; padding:0;
  box-shadow: 0 6px 0 rgba(0,0,0,0.06) inset;
  transform: translate(0,0);
  transition: transform var(--anim-ms) var(--tile-ease);
  will-change: transform;
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
}

/* inner */
/* IMPORTANT: include opacity transition so images can fade in smoothly */
.tile .tile-inner {
  display:flex; align-items:center; justify-content:center; width:100%; height:100%;
  font-weight:700; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  user-select:none; color: #fff; line-height:1; transform-origin:center center;
  transition: opacity 120ms linear, transform 120ms var(--tile-ease);
  will-change: opacity, transform;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  background-color: transparent;
  -webkit-transform: translateZ(0); transform: translateZ(0);
}

/* font sizes */
.tile[data-value="2"] .tile-inner,
.tile[data-value="4"] .tile-inner { font-size:55px; color:#776e65 !important; }
.tile[data-value="8"] .tile-inner,
.tile[data-value="16"] .tile-inner,
.tile[data-value="32"] .tile-inner,
.tile[data-value="64"] .tile-inner { font-size:48px; }
.tile[data-value="128"] .tile-inner,
.tile[data-value="256"] .tile-inner,
.tile[data-value="512"] .tile-inner { font-size:40px; }
.tile[data-value="1024"] .tile-inner,
.tile[data-value="2048"] .tile-inner { font-size:32px; }
.tile[data-value="4096"] .tile-inner,
.tile[data-value="8192"] .tile-inner { font-size:20px; }

/* class-based text */
.tile-2 .tile-text, .tile[data-value="2"] .tile-text { color: #776e65; font-size:55px;background: #000;font-size: 18px;padding: 6px;border-radius: 10px;margin: -3px;}
.tile-4 .tile-text, .tile[data-value="4"] .tile-text { color: #776e65; font-size:55px;background: #000;font-size: 18px;padding: 6px;border-radius: 10px;margin: -3px; }
.tile-8 .tile-text, .tile[data-value="8"] .tile-text { color: #fff; font-size:48px; background: #000;font-size: 18px;padding: 6px;border-radius: 10px;margin: -3px;}

.tile-text{    background: #000;
    float: left;
    margin-top: 0;
    padding: 8px;
    font-size: 16px;
    left: 0;
    border-radius: 5px;}
/* background colors for tile-<n> */
.tile-2 { background: #eee4da; }
.tile-4 { background: #ede0c8; }
.tile-8 { background: #f2b179; }
.tile-16 { background: #f59563; }
.tile-32 { background: #f67c5f; }
.tile-64 { background: #f65e3b; }
.tile-128 { background: #edcf72; }
.tile-256 { background: #edcc61; }
.tile-512 { background: #edc850; }
.tile-1024 { background: #edc53f; }
.tile-2048 { background: #edc22e; }

/* --- Animations: INNER only (no opacity on tile) --- */
/* spawn pop: small overshoot, short */
.tile-new .tile-inner {
  animation: pop 120ms cubic-bezier(.2,.8,.2,1);
}
@keyframes pop {
  0%   { transform: scale(0.78); }
  60%  { transform: scale(1.04); }
  100% { transform: scale(1); }
}

/* merge pulse */
.tile-merged .tile-inner {
  animation: merge 120ms var(--tile-ease);
}
@keyframes merge {
  0%   { transform: scale(1.08); }
  100% { transform: scale(1); }
}

/* removal animation (inner only) — used instead of toggling opacity transition on tile */
.tile-remove .tile-inner {
  animation: remove 120ms linear forwards;
}
@keyframes remove {
  0%   { transform: scale(1); opacity: 1; }
  100% { transform: scale(0.75); opacity: 0; }
}

/* Responsive tweaks */
@media (max-width:820px){ :root{ --tile-size:88px; --tile-gap:10px; } .title { font-size:44px; } }
@media (max-width:520px){ :root{ --tile-size:64px; --tile-gap:8px; } .title { font-size:34px; } }

/* ---------------------------
   APPEND-ONLY: Cookie-style UI
   Paste at the end of assets/style.css
   --------------------------- */

/* wrapper used on the game page */
.game-content-wrapper,
.game-page .container {
  /* keep layout centered and no horizontal overflow */
  max-width: var(--container-max);
  margin: 10px auto 40px;
  padding: 0 18px;
  box-sizing: border-box;
}

/* top controls row (score / heart / buttons) */
.top-controls,
.game-top,
.controls-top {
  display:flex;
  align-items:center;
  gap:18px;
  margin-bottom:12px;
  flex-wrap:wrap;
}

/* score boxes */
.score-box, .score-container, .score-box.best, .best-container {
  background:#bda79a;
  color:#fff;
  padding:12px 18px;
  min-width:112px;
  border-radius:6px;
  text-align:center;
  font-weight:700;
  box-shadow: 0 3px 0 rgba(0,0,0,0.06) inset;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}
.score-box .score-label, .score-container .score-label { font-size:12px; letter-spacing:0.6px; margin-bottom:6px; color:rgba(255,255,255,0.95); }
.score-value { font-size:28px; line-height:1; }

/* heart / favorite icon placeholder */
.favorite-icon, .heart {
  width:44px; height:44px; border-radius:6px;
  background:transparent; display:inline-flex; align-items:center; justify-content:center;
  border:2px solid rgba(0,0,0,0.06);
  color:#9e948a;
  font-size:20px;
}

/* top action buttons (Restart / Undo / Menu) */
.top-buttons, .above-game .buttons {
  display:flex;
  gap:8px;
  align-items:center;
}
.btn, .restart-button-trigger, .undo-button, .game-menu-button, .restart-button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:44px;
  padding:0 14px;
  border-radius:6px;
  cursor:pointer;
  text-decoration:none;
  font-weight:700;
  border:0;
}
.restart-button-trigger, .restart-button { background:#bda79a; color:#fff; }
.undo-button { background:#e9e2dd; color:#666; }
.game-menu-button { background:#cfc1ba; width:44px; padding:0; }

/* board container: add rounded background like all2048.com/cookies */
.board {
  border-radius:10px;
  background: #c9b6ac;
  padding: calc(var(--tile-gap) + 6px);
  box-shadow: 0 6px 0 rgba(0,0,0,0.04) inset;
  margin: 6px auto;
  /* ensure it doesn't force horizontal scroll */
  max-width: calc(var(--board-width) + 40px);
  box-sizing: border-box;
}

/* grid cell (pale inner space) */
.grid > div, .grid-cell {
  background: #d8c6bf;
  border-radius:6px;
}

/* small numeric badge on bottom-right of tiles (non-invasive) */
.tile .tile-text {
  position:absolute !important;
  right:8px !important;
  bottom:8px !important;
  background: rgba(0,0,0,0.7) !important;
  color: #fff !important;
  font-size:12px !important;
  padding:5px 7px !important;
  border-radius:6px !important;
  min-width:28px !important;
  text-align:center !important;
  line-height:1 !important;
  box-shadow: 0 1px 0 rgba(0,0,0,0.2) inset !important;
}

/* Ensure tile sizes respect --tile-size (do not override other tile rules) */
.tile {
  width: var(--tile-size);
  height: var(--tile-size);
}

/* ---------------------------
  PATCH: Fix top-controls layout (append-only)
  Overrides only a few rules to avoid breaking other pages
--------------------------- */

/* Make the whole top controls a horizontal row and center it */
.top-controls,
.game-top,
.controls-top,
.game-top .above-game,
.game-page .top-controls {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important; /* center across page */
  gap: 16px !important;
  flex-wrap: wrap !important;
  margin-bottom: 14px !important;
}

/* Ensure the scores group is horizontal (score + best side-by-side) */
.controls-top .scores,
.game-top .scores-container,
.top-controls .scores {
  display: flex !important;
  flex-direction: row !important;
  gap: 12px !important;
  align-items: center !important;
}

/* Keep score-boxes vertically stacked inside themselves (label + value) */
.score-box, .score-container, .best-container {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 104px !important;
  box-sizing: border-box !important;
}

/* Place action buttons to the right of the scores but allow wrap on small screens */
.top-buttons,
.above-game .buttons,
.controls-top .top-buttons {
  display: flex !important;
  gap: 10px !important;
  align-items: center !important;
  justify-content: flex-start !important;
}

/* Make the board stay centered and not push left */
.board {
  margin-left: auto !important;
  margin-right: auto !important;
}

/* If the score area was stacked left due to float/position, ensure it participates in flex flow */
.container .score-area,
.score-area {
  position: relative !important;
  float: none !important;
}

/* small screens: allow vertical stacking but keep score + best inline where possible */
@media (max-width: 820px) {
  .top-controls,
  .controls-top {
    justify-content: center !important;
    gap: 10px !important;
  }
  .controls-top .scores {
    gap: 8px !important;
  }
  .score-box, .score-container, .best-container {
    min-width: 88px !important;
    padding: 10px !important;
  }
}

/* extra safety: ensure tile badge still positioned nicely after layout changes */
.tile .tile-text {
  position: absolute !important;
  right: 6px !important;
  bottom: 6px !important;
  z-index: 60 !important;
}

/* small responsive tweaks to match the cookie-style layout */
@media (max-width: 980px) {
  .board { max-width: 100%; padding: calc(var(--tile-gap) + 4px); }
  .score-box, .score-value { min-width:88px; font-size:24px; }
}
@media (max-width: 720px) {
  .top-controls, .controls-top { gap:10px; }
  .tile, .grid-cell { width: calc(var(--tile-size) * 0.85); height: calc(var(--tile-size) * 0.85); }
  .tile .tile-text { font-size:11px; padding:4px 6px; right:6px; bottom:6px; }
  .game-menu-button { width:40px; height:40px; }
  .score-box { padding:10px 12px; min-width:76px; }
}