.qy-game2048 {
  --qy-2048-gap: clamp(7px, 1.6vw, 12px);
  --qy-2048-size: min(440px, calc(100vw - 62px));
  display: grid;
  gap: 14px;
  max-width: 680px;
  margin: 0 auto;
}

.qy-game2048__header,
.qy-game2048__toolbar,
.qy-game2048__stats,
.qy-game2048__toolbar > div {
  display: flex;
  align-items: center;
}

.qy-game2048__header { justify-content: space-between; gap: 16px; }
.qy-game2048__header > div:first-child { display: grid; gap: 1px; }
.qy-game2048__header > div:first-child span {
  color: var(--qy-accent);
  font-size: 0.5rem;
  font-weight: 850;
  letter-spacing: 0.15em;
}
.qy-game2048__header > div:first-child strong { font-size: clamp(1.7rem, 5vw, 2.65rem); letter-spacing: -0.07em; }

.qy-game2048__stats { gap: 8px; }
.qy-game2048__stats > div {
  display: grid;
  min-width: 68px;
  gap: 1px;
  padding: 8px 12px;
  border: 1px solid var(--qy-border);
  border-radius: 13px;
  background: var(--qy-surface-muted);
  text-align: center;
}
.qy-game2048__stats span { color: var(--qy-text-3); font-size: 0.47rem; }
.qy-game2048__stats strong { font-size: 0.78rem; font-variant-numeric: tabular-nums; }

.qy-game2048__toolbar { justify-content: space-between; gap: 12px; }
.qy-game2048__toolbar p { margin: 0; color: var(--qy-text-3); font-size: 0.6rem; }
.qy-game2048__toolbar > div { gap: 7px; }
.qy-game2048__toolbar button,
.qy-game2048__overlay button {
  min-height: 32px;
  padding: 0 13px;
  border: 1px solid var(--qy-border);
  border-radius: var(--qy-radius-pill);
  color: var(--qy-text-2);
  background: var(--qy-surface-solid);
  cursor: pointer;
  font-family: inherit;
  font-size: 0.56rem;
  font-weight: 720;
  transition: transform var(--qy-duration-fast) var(--qy-ease-spring), border-color var(--qy-duration-fast);
}
.qy-game2048__toolbar button:hover { border-color: color-mix(in srgb, var(--qy-accent) 35%, var(--qy-border)); transform: translateY(-1px); }
.qy-game2048__toolbar button.is-primary { color: #fff; border-color: transparent; background: var(--qy-gradient-accent); }
.qy-game2048__toolbar button:disabled { cursor: default; opacity: 0.42; transform: none; }

.qy-game2048__board {
  position: relative;
  width: var(--qy-2048-size);
  aspect-ratio: 1;
  margin: 0 auto;
  padding: var(--qy-2048-gap);
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--qy-accent) 22%, var(--qy-border));
  border-radius: clamp(20px, 5vw, 32px);
  outline: none;
  background:
    radial-gradient(circle at 16% 9%, color-mix(in srgb, var(--qy-accent) 14%, transparent), transparent 38%),
    color-mix(in srgb, var(--qy-surface-muted) 88%, var(--qy-surface-solid));
  box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 35%, transparent), var(--qy-shadow-sm);
  touch-action: none;
}
.qy-game2048__board:focus-visible { box-shadow: 0 0 0 3px color-mix(in srgb, var(--qy-accent) 22%, transparent), var(--qy-shadow-sm); }

.qy-game2048__grid,
.qy-game2048__tiles {
  position: absolute;
  inset: var(--qy-2048-gap);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 1fr);
  gap: var(--qy-2048-gap);
}
.qy-game2048__grid { z-index: 0; }
.qy-game2048__cell {
  border: 1px solid color-mix(in srgb, var(--qy-border) 72%, transparent);
  border-radius: clamp(11px, 2.4vw, 18px);
  background: color-mix(in srgb, var(--qy-surface-solid) 48%, transparent);
}
.qy-game2048__tiles { z-index: 2; pointer-events: none; }
.qy-game2048__tile {
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: clamp(11px, 2.4vw, 18px);
  color: #5b425d;
  background: #f2e8f2;
  box-shadow: 0 8px 20px rgba(65, 43, 67, 0.11), inset 0 1px 0 rgba(255, 255, 255, 0.55);
  font-size: clamp(1rem, 5.4vw, 2rem);
  font-weight: 780;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.07em;
  transition: transform 120ms var(--qy-ease-spring);
}
.qy-game2048__tile[data-value="4"] { color: #624d69; background: #eadbed; }
.qy-game2048__tile[data-value="8"] { color: #fff; background: #c89ec6; }
.qy-game2048__tile[data-value="16"] { color: #fff; background: #b783bd; }
.qy-game2048__tile[data-value="32"] { color: #fff; background: #a16aaa; }
.qy-game2048__tile[data-value="64"] { color: #fff; background: #89518f; }
.qy-game2048__tile[data-value="128"] { color: #fff; background: #bd8c81; font-size: clamp(0.9rem, 4.8vw, 1.8rem); }
.qy-game2048__tile[data-value="256"] { color: #fff; background: #aa746e; font-size: clamp(0.9rem, 4.8vw, 1.8rem); }
.qy-game2048__tile[data-value="512"] { color: #fff; background: #93605f; font-size: clamp(0.9rem, 4.8vw, 1.8rem); }
.qy-game2048__tile[data-value="1024"] { color: #fff; background: #724b58; font-size: clamp(0.76rem, 4.1vw, 1.55rem); }
.qy-game2048__tile[data-value="2048"],
.qy-game2048__tile[data-value="4096"],
.qy-game2048__tile[data-value="8192"] {
  color: #fff7df;
  background: linear-gradient(145deg, #b58a52, #8c5aba);
  box-shadow: 0 0 34px color-mix(in srgb, var(--qy-accent) 36%, transparent);
  font-size: clamp(0.76rem, 4.1vw, 1.55rem);
}
.qy-game2048__tile.is-new { animation: qy-2048-new 260ms var(--qy-ease-spring) both; }
.qy-game2048__tile.is-merged { animation: qy-2048-merge 330ms var(--qy-ease-spring) both; }

.qy-game2048__overlay {
  position: absolute;
  z-index: 5;
  inset: 0;
  display: grid;
  visibility: hidden;
  place-content: center;
  justify-items: center;
  gap: 7px;
  padding: 28px;
  color: var(--qy-text-1);
  background: color-mix(in srgb, var(--qy-surface-solid) 76%, transparent);
  backdrop-filter: blur(18px) saturate(130%);
  -webkit-backdrop-filter: blur(18px) saturate(130%);
  opacity: 0;
  transition: opacity var(--qy-duration-base), visibility 0s linear var(--qy-duration-base);
  text-align: center;
}
.qy-game2048__overlay.is-visible { visibility: visible; opacity: 1; transition-delay: 0s; }
.qy-game2048__overlay strong { font-size: clamp(1.2rem, 4vw, 1.8rem); }
.qy-game2048__overlay span { max-width: 28em; color: var(--qy-text-3); font-size: 0.65rem; }
.qy-game2048__overlay button { margin-top: 8px; color: #fff; border-color: transparent; background: var(--qy-accent); }
.qy-game2048__status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }

@keyframes qy-2048-new {
  from { opacity: 0; transform: scale(0.42); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes qy-2048-merge {
  0% { transform: scale(0.78); }
  62% { transform: scale(1.13); }
  100% { transform: scale(1); }
}

@media (max-width: 540px) {
  .qy-game2048__header { align-items: flex-end; }
  .qy-game2048__toolbar { align-items: flex-start; }
  .qy-game2048__toolbar p { max-width: 17ch; line-height: 1.5; }
  .qy-game2048__stats > div { min-width: 58px; padding: 7px 9px; }
}

@media (prefers-reduced-motion: reduce) {
  .qy-game2048__tile,
  .qy-game2048__tile.is-new,
  .qy-game2048__tile.is-merged,
  .qy-game2048__overlay { animation: none !important; transition: none !important; }
}