/*! © 2026 LogosVox. All rights reserved. Copying, modifying or redistributing this code is not permitted. https://games.logosvox.com/terms */
/*
 * Logos 2048: the board, the tiles and their motion. LogosVox original code.
 * The tray, wells and keycaps are the kit's (.lv-board, .lv-well, .lv-piece);
 * the tiles climb our palette: a soft neutral 2, then cyan, cobalt, violet,
 * magenta and coral to a gold 2048, and ink beyond.
 */
/* The whole play area takes swipes; the board is the largest square the stage holds. */
.g-main { touch-action: none; user-select: none; -webkit-user-select: none; gap: 10px; padding-top: 10px; padding-bottom: 10px; max-width: 640px; }
/* Upright: a square stage as wide as the page (smaller when the height runs out), centred with the tools under it. */
.g-stage { flex: 0 1 auto; width: 100%; aspect-ratio: 1; max-height: 640px; }

.g-board {
  --n: 4;
  --size: min(100cqw, 100cqh, 560px);
  --gap: calc(var(--size) * 0.12 / (var(--n) + 1));
  --cell: calc((var(--size) - 2px - var(--gap) * (var(--n) + 1)) / var(--n));
  --step: calc(var(--cell) + var(--gap));
  --lv-g-piece-r: calc(var(--cell) * 0.15);
  --g-neutral: color-mix(in oklab, var(--lv-ink) 11%, var(--lv-g-tray));
  flex: none;
  width: var(--size);
  height: var(--size);
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .g-board { --g-neutral: color-mix(in oklab, var(--lv-ink) 16%, var(--lv-g-tray)); } }
:root[data-theme="dark"] .g-board { --g-neutral: color-mix(in oklab, var(--lv-ink) 16%, var(--lv-g-tray)); }
.g-grid { position: absolute; inset: var(--gap); }
.g-grid > * {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--cell);
  height: var(--cell);
  transform: translate(calc(var(--x) * var(--step)), calc(var(--y) * var(--step)));
}
.g-tile { transition: transform 110ms cubic-bezier(0.25, 0.8, 0.35, 1); }
.g-tile.is-top { z-index: 2; }

.g-piece {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-weight: 800;
  font-size: calc(var(--cell) * 0.44);
  line-height: 1;
  text-shadow: 0 1px 0 rgb(0 0 0 / 0.14);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.35), inset 0 calc(var(--cell) * -0.055) 0 rgb(0 0 0 / 0.16), 0 1px 2px rgb(13 13 13 / 0.18);
}
.g-piece[data-len="3"] { font-size: calc(var(--cell) * 0.36); }
.g-piece[data-len="4"] { font-size: calc(var(--cell) * 0.29); }
.g-piece[data-len="5"] { font-size: calc(var(--cell) * 0.235); }
.g-piece[data-len="6"], .g-piece[data-len="7"] { font-size: calc(var(--cell) * 0.19); }

/* The climb. Halfway steps mix the two colours either side. */
.g-2 { --c: var(--g-neutral); color: var(--lv-ink); text-shadow: none; }
.g-4 { --c: var(--lv-g-cyan); }
.g-8 { --c: color-mix(in oklab, var(--lv-g-cyan), var(--lv-g-cobalt)); }
.g-16 { --c: var(--lv-g-cobalt); }
.g-32 { --c: color-mix(in oklab, var(--lv-g-cobalt), var(--lv-g-violet)); }
.g-64 { --c: var(--lv-g-violet); }
.g-128 { --c: color-mix(in oklab, var(--lv-g-violet), var(--lv-g-magenta)); }
.g-256 { --c: var(--lv-g-magenta); }
.g-512 { --c: color-mix(in oklab, var(--lv-g-magenta), var(--lv-g-coral)); }
.g-1024 { --c: var(--lv-g-coral); }
.g-2048 {
  --c: var(--lv-g-gold);
  color: #2b1800;
  text-shadow: 0 1px 0 rgb(255 255 255 / 0.3);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.45), inset 0 calc(var(--cell) * -0.055) 0 rgb(0 0 0 / 0.14), 0 0 0 2px color-mix(in oklab, var(--lv-g-gold) 40%, transparent), 0 6px 22px -6px var(--lv-g-gold);
}
.g-big { --c: var(--lv-ink); color: var(--lv-void); text-shadow: none; }

/* Motion: tiles slide (transform), a joined tile pops once they meet, a new one grows in. */
.g-piece.is-new { animation: g-in 170ms var(--lv-ease) 100ms backwards; }
.g-piece.is-joined { animation: g-pop 210ms var(--lv-ease) 90ms backwards; }
.g-piece.is-back { animation: g-back 160ms var(--lv-ease); }
@keyframes g-in { from { opacity: 0; transform: scale(0.3); } }
@keyframes g-pop { 0% { opacity: 0; transform: scale(0.9); } 1% { opacity: 1; } 50% { transform: scale(1.14); } 100% { transform: scale(1); } }
@keyframes g-back { from { opacity: 0.4; transform: scale(0.94); } }
:root[data-motion="reduce"] .g-tile { transition: none; }
:root[data-motion="reduce"] .g-piece { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .g-tile { transition: none; }
  .g-piece { animation: none !important; }
}

/* Tools: Undo carries how many are left. */
.g-side { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.g-undo { position: relative; }
.g-badge {
  position: absolute;
  top: 3px;
  right: 3px;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: 9px;
  background: var(--lv-ink);
  color: var(--lv-void);
  font: 700 10px/17px var(--lv-display);
  font-variant-numeric: tabular-nums;
}
.g-badge:empty { display: none; }
.g-undo:disabled .g-badge { background: var(--lv-ink-subtle); }
#mode { min-height: 18px; }

.g-tools .lv-tool { min-width: 76px; }

/* Phones held sideways: the board on the left, the tools in a column beside it. */
@media (orientation: landscape) and (max-height: 540px) {
  .g-main { max-width: none; }
  .g-stage { width: auto; height: 100%; flex: 0 1 auto; max-height: none; }
  .g-tools { flex-direction: column; align-items: stretch; }
}