:root {
  --mobile-safe-top: env(safe-area-inset-top, 0px);
  --mobile-safe-bottom: env(safe-area-inset-bottom, 0px);
}

body[data-game] {
  height: 100dvh;
  min-height: 100dvh;
  overflow: hidden;
  overscroll-behavior: none;
  background: #f8d8ea;
}

body[data-game] #root,
body[data-game] .app-shell,
body[data-game] .device-frame {
  height: 100dvh;
  min-height: 0;
}

body[data-game] .app-shell {
  padding: 0;
  overflow: hidden;
}

body[data-game] .ambient {
  display: none;
}

body[data-game] .device-frame {
  display: flex;
  flex-direction: column;
  width: min(100%, 480px);
  max-width: 480px;
  margin: 0 auto;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background:
    radial-gradient(circle at 92% 8%, color-mix(in srgb, var(--game-accent) 22%, transparent), transparent 28%),
    linear-gradient(180deg, #fff9fb 0%, #fff2f7 100%);
  box-shadow: 0 0 60px rgba(78, 45, 78, .18);
}

body[data-game] .topbar {
  position: relative;
  flex: 0 0 auto;
  min-height: 62px;
  padding: calc(8px + var(--mobile-safe-top)) 12px 7px;
  border-bottom: 1px solid rgba(83, 48, 75, .08);
  background: rgba(255, 250, 252, .94);
  backdrop-filter: blur(18px);
}

body[data-game] .icon-btn {
  width: 36px;
  height: 36px;
  border-radius: 13px;
  background: #fff;
  box-shadow: 0 6px 16px rgba(107, 64, 94, .12);
}

body[data-game] .ghost-btn span {
  width: 17px;
  height: 3px;
  margin: 2px auto;
  background: var(--game-accent, #f47aa1);
}

body[data-game] .topbar-actions {
  top: calc(8px + var(--mobile-safe-top));
  right: 12px;
  gap: 6px;
}

body[data-game] .pill {
  padding: 7px 10px;
  border-radius: 12px;
  font-size: 11px;
  box-shadow: none;
}

body[data-game] .pill-plus,
body[data-game] .pill-remove,
body[data-game] .screen-title p {
  display: none;
}

body[data-game] .screen-title {
  position: absolute;
  left: 58px;
  right: 90px;
  top: calc(9px + var(--mobile-safe-top));
  min-width: 0;
  padding: 0;
}

body[data-game] .screen-title h1 {
  margin: 0;
  overflow: hidden;
  color: #442d43;
  font-size: 20px;
  line-height: 36px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-game] .game-screen {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 6px;
  overflow: hidden;
  padding: 6px 9px calc(7px + var(--mobile-safe-bottom));
}

body[data-game] .back-link {
  min-height: 28px;
  margin: 0;
  padding: 5px 11px;
  border-radius: 999px;
  justify-self: start;
  color: #85546f;
  background: rgba(255, 255, 255, .82);
  font-size: 12px;
  font-weight: 800;
}

body[data-game] .game-hero,
body[data-game] .game-canvas-card,
body[data-game] .game-footer-card {
  border: 2px solid rgba(255, 255, 255, .95);
  border-radius: 20px;
  box-shadow: 0 9px 24px rgba(105, 58, 88, .11);
}

body[data-game] .game-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(84px, .78fr) minmax(0, 1.4fr);
  align-items: center;
  gap: 8px;
  min-height: 72px;
  padding: 8px 66px 8px 10px;
  overflow: hidden;
  background:
    radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--game-accent) 25%, white), transparent 50%),
    rgba(255, 255, 255, .9);
}

body[data-game] .game-hero::after {
  position: absolute;
  right: 8px;
  top: 50%;
  width: 52px;
  height: 52px;
  content: "";
  transform: translateY(-50%) rotate(3deg);
  background-image: var(--game-atlas);
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: 400% 400%;
  filter: drop-shadow(0 6px 8px rgba(72, 40, 61, .16));
}

body[data-game] .game-hero h2 {
  margin: 4px 0 0;
  color: #3f2b3d;
  font-size: 16px;
  line-height: 1.1;
}

body[data-game] .game-hero p {
  display: none;
}

body[data-game] .card-badge {
  padding-bottom: 2px;
  border-bottom-width: 2px;
  font-size: 9px;
}

body[data-game] .game-stats {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
}

body[data-game] .game-stats article {
  min-width: 0;
  padding: 6px 4px;
  border-radius: 12px;
  text-align: center;
  background: rgba(255, 255, 255, .78);
}

body[data-game] .game-stats span {
  display: block;
  overflow: hidden;
  font-size: 8px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-game] .game-stats strong {
  display: block;
  margin-top: 2px;
  overflow: hidden;
  color: #3d2b3b;
  font-size: 13px;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-game] .game-canvas-card {
  position: relative;
  min-height: 0;
  display: grid;
  gap: 6px;
  place-items: center;
  overflow: hidden;
  padding: 7px;
  background:
    radial-gradient(circle at 8% 8%, color-mix(in srgb, var(--game-accent) 13%, transparent), transparent 24%),
    rgba(255, 255, 255, .9);
  touch-action: manipulation;
}

body[data-game] .game-canvas-card::before {
  position: absolute;
  z-index: 3;
  top: 6px;
  right: 6px;
  width: 28px;
  height: 28px;
  content: "";
  pointer-events: none;
  background-image: var(--game-atlas);
  background-repeat: no-repeat;
  background-position: 100% 100%;
  background-size: 400% 400%;
  opacity: .82;
  filter: drop-shadow(0 4px 6px rgba(55, 32, 50, .18));
}

body[data-game] .game-footer-card {
  display: grid;
  gap: 5px;
  min-height: 0;
  padding: 6px 8px;
  background: rgba(255, 255, 255, .92);
}

body[data-game] .game-footer-card > p {
  overflow: hidden;
  color: #6f4f66;
  font-size: 11px;
  line-height: 15px;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-game] .game-actions {
  display: flex;
  flex-wrap: nowrap;
  gap: 5px;
}

body[data-game] .action-btn {
  flex: 1 1 0;
  min-width: 0;
  min-height: 38px;
  padding: 7px 5px;
  border-radius: 12px;
  color: #fff;
  font-size: 11px;
  line-height: 1.05;
  background: linear-gradient(180deg, color-mix(in srgb, var(--game-accent) 78%, white), var(--game-accent));
  box-shadow: 0 5px 12px color-mix(in srgb, var(--game-accent) 22%, transparent);
}

body[data-game] .action-btn.soft {
  color: #5e4360;
  background: linear-gradient(180deg, #fff3c8, #ffd887);
}

body[data-game] .control-hint {
  display: none;
}

body[data-game] .game-canvas {
  width: auto;
  max-width: 100%;
  height: 100%;
  max-height: 100%;
  object-fit: contain;
  border: 2px solid rgba(255, 255, 255, .95);
  border-radius: 16px;
  box-shadow: 0 8px 18px rgba(50, 34, 49, .13);
  touch-action: none;
}

body[data-game] .dpad {
  grid-template-columns: repeat(3, 42px);
  gap: 4px;
}

body[data-game] .dpad button {
  height: 36px;
  border-radius: 12px;
  font-size: 11px;
  box-shadow: 0 4px 9px rgba(84, 55, 31, .13);
}

body[data-game="game-2048"] .board-2048,
body[data-game="color-block-jam"] .jam-board-shell {
  width: min(100%, calc(100dvh - 420px), 300px);
}

body[data-game="sudoku"] .sudoku-grid {
  width: min(100%, calc(100dvh - 418px), 302px);
}

body[data-game="sudoku"] .sudoku-keypad {
  width: min(100%, calc(100dvh - 418px), 302px);
  gap: 5px;
}

body[data-game="sudoku"] .sudoku-keypad button {
  min-height: 31px;
  padding: 5px 0;
  border-radius: 10px;
}

body[data-game="minesweeper"] .minesweeper-grid,
body[data-game="slide-puzzle"] .slide-puzzle-grid,
body[data-game="memory-match"] .memory-grid,
body[data-game="lights-out"] .lights-grid,
body[data-game="link-match"] .link-grid,
body[data-game="one-line"] .one-line-shell,
body[data-game="pipe-connect"] .pipe-grid {
  width: min(100%, calc(100dvh - 316px), 336px);
  max-height: 100%;
}

body[data-game="block-blast"] .blockblast-board,
body[data-game="block-blast"] .piece-rack {
  width: min(100%, calc(100dvh - 404px), 310px);
}

body[data-game="block-blast"] .piece-card {
  min-height: 56px;
  padding: 6px 4px;
  border-radius: 14px;
}

body[data-game="block-blast"] .piece-preview {
  min-height: 42px;
}

body[data-game="block-blast"] .piece-dot {
  width: 12px;
  height: 12px;
}

body[data-game] .board-2048,
body[data-game] .minesweeper-grid,
body[data-game] .sudoku-grid,
body[data-game] .slide-puzzle-grid,
body[data-game] .memory-grid,
body[data-game] .lights-grid,
body[data-game] .blockblast-board,
body[data-game] .jam-board,
body[data-game] .link-grid,
body[data-game] .one-line-shell,
body[data-game] .pipe-grid {
  max-height: 100%;
  padding: 7px;
  gap: 5px;
  border-radius: 18px;
}

body[data-game] .tile-2048,
body[data-game] .mine-cell,
body[data-game] .sudoku-cell,
body[data-game] .slide-tile,
body[data-game] .memory-card,
body[data-game] .light-cell,
body[data-game] .block-cell,
body[data-game] .jam-cell,
body[data-game] .link-tile,
body[data-game] .line-cell,
body[data-game] .pipe-cell {
  border-radius: 11px;
}

body[data-game="memory-match"] .memory-card,
body[data-game="slide-puzzle"] .slide-tile,
body[data-game="minesweeper"] .mine-cell,
body[data-game="sudoku"] .sudoku-cell {
  background-repeat: no-repeat;
  background-position: center;
}

body[data-game="memory-match"] .memory-card.open span {
  display: block;
  width: 76%;
  height: auto;
  aspect-ratio: 1;
  color: transparent;
  background-image: var(--game-atlas);
  background-repeat: no-repeat;
  background-size: 400% 400%;
  filter: drop-shadow(0 4px 5px rgba(76, 43, 67, .13));
}

body[data-game="slide-puzzle"] .slide-tile {
  color: #fff;
  text-shadow: 0 2px 4px rgba(44, 44, 80, .35);
  background-color: #72a4ff;
  background-size: 400% 400%;
  background-blend-mode: soft-light;
}

body[data-game="lights-out"] .light-cell {
  background-image: none;
  border: 3px solid #d69f0d;
  background: #ffd638;
  box-shadow: inset 0 3px 0 rgba(255,255,255,.5), 0 0 15px rgba(255,213,56,.65);
}

body[data-game="lights-out"] .light-cell:nth-child(4n + 1) { background-position: 0 0; }
body[data-game="lights-out"] .light-cell:nth-child(4n + 2) { background-position: 33.333% 0; }
body[data-game="lights-out"] .light-cell:nth-child(4n + 3) { background-position: 66.666% 0; }
body[data-game="lights-out"] .light-cell:nth-child(4n) { background-position: 100% 0; }
body[data-game="lights-out"] .light-cell.off { filter: none; opacity: 1; border-color: #6f7480; background: #969ba5; box-shadow: inset 0 2px 0 rgba(255,255,255,.18); }

body[data-game="block-blast"] .block-cell[class*="tone-"] {
  background-image: var(--game-atlas);
  background-repeat: no-repeat;
  background-size: 400% 400%;
}
body[data-game="block-blast"] .block-cell.tone-pink { background-position: 0 0; }
body[data-game="block-blast"] .block-cell.tone-gold { background-position: 33.333% 0; }
body[data-game="block-blast"] .block-cell.tone-mint { background-position: 66.666% 0; }
body[data-game="block-blast"] .block-cell.tone-sky { background-position: 100% 0; }
body[data-game="block-blast"] .block-cell.tone-peach { background-position: 0 33.333%; }
body[data-game="block-blast"] .block-cell.tone-violet { background-position: 33.333% 33.333%; }
body[data-game="block-blast"] .block-cell.tone-berry { background-position: 66.666% 33.333%; }
body[data-game="block-blast"] .block-cell.tone-citrus { background-position: 100% 33.333%; }

body[data-game="color-block-jam"] .jam-cell[class*="color-"] {
  color: transparent;
  background-image: var(--game-atlas);
  background-repeat: no-repeat;
  background-size: 400% 400%;
}
body[data-game="color-block-jam"] .jam-cell.color-red { background-position: 0 0; }
body[data-game="color-block-jam"] .jam-cell.color-blue { background-position: 33.333% 0; }
body[data-game="color-block-jam"] .jam-cell.color-yellow { background-position: 66.666% 0; }
body[data-game="color-block-jam"] .jam-cell.color-green { background-position: 100% 0; }
body[data-game="color-block-jam"] .jam-cell.color-purple { background-position: 0 33.333%; }
body[data-game="color-block-jam"] .jam-cell.color-orange { background-position: 33.333% 33.333%; }

body[data-game="one-line"] .line-cell.active,
body[data-game="one-line"] .line-cell.visited {
  color: transparent;
  background-image: var(--game-atlas);
  background-repeat: no-repeat;
  background-size: 400% 400%;
  background-position: 0 0;
}

body[data-game="one-line"] .line-cell.visited {
  background-position: 66.666% 33.333%;
}

body[data-game="pipe-connect"] .pipe-cell:not(.empty) {
  background-image: var(--game-atlas);
  background-repeat: no-repeat;
  background-size: 400% 400%;
  background-blend-mode: soft-light;
}
body[data-game="pipe-connect"] .pipe-cell.straight { background-position: 0 0; }
body[data-game="pipe-connect"] .pipe-cell.corner { background-position: 33.333% 0; }
body[data-game="pipe-connect"] .pipe-cell.source { background-position: 0 33.333%; }
body[data-game="pipe-connect"] .pipe-cell.goal { background-position: 33.333% 33.333%; }

@media (max-height: 700px) {
  body[data-game] .topbar { min-height: 54px; padding-bottom: 4px; }
  body[data-game] .screen-title { top: calc(6px + var(--mobile-safe-top)); }
  body[data-game] .topbar-actions { top: calc(6px + var(--mobile-safe-top)); }
  body[data-game] .game-screen { gap: 4px; padding-top: 4px; }
  body[data-game] .back-link { min-height: 24px; padding: 3px 9px; }
  body[data-game] .game-hero { min-height: 60px; padding-top: 5px; padding-bottom: 5px; }
  body[data-game] .game-hero::after { width: 44px; height: 44px; }
  body[data-game] .game-footer-card { padding: 4px 6px; }
  body[data-game] .game-footer-card > p { display: none; }
  body[data-game] .action-btn { min-height: 34px; padding: 5px 4px; font-size: 10px; }
  body[data-game="game-2048"] .board-2048,
  body[data-game="color-block-jam"] .jam-board-shell { width: min(100%, calc(100dvh - 360px), 270px); }
  body[data-game="sudoku"] .sudoku-grid,
  body[data-game="sudoku"] .sudoku-keypad { width: min(100%, calc(100dvh - 356px), 270px); }
  body[data-game="block-blast"] .blockblast-board,
  body[data-game="block-blast"] .piece-rack { width: min(100%, calc(100dvh - 348px), 278px); }
}

@media (max-height: 590px) {
  body[data-game] .game-hero > div:first-child,
  body[data-game] .game-hero::after { display: none; }
  body[data-game] .game-hero { grid-template-columns: 1fr; min-height: 44px; padding: 4px 7px; }
  body[data-game] .back-link { position: absolute; z-index: 8; top: calc(8px + var(--mobile-safe-top)); left: 56px; color: transparent; width: 34px; padding: 0; }
  body[data-game] .back-link::after { content: "←"; color: #85546f; font-size: 18px; }
  body[data-game] .game-screen { grid-template-rows: auto minmax(0, 1fr) auto; }
}

body[data-game] .back-link { display: none !important; }
body[data-game] .ghost-btn { color: #85546f; font-size: 27px; line-height: 1; font-weight: 900; }
body[data-game="game-2048"] .tile-2048-value { right: 2px !important; bottom: 2px !important; }
body[data-game="game-2048"] .board-2048 { touch-action: none; }
body[data-game="memory-match"] .memory-card:not(.open) span { background-image: none !important; }
body[data-game="link-match"] .link-tile { padding: 2px; }
body[data-game="link-match"] .link-tile img { width: 94%; height: 94%; object-fit: contain; }
body[data-game="link-match"] .game-actions .action-btn:last-child { background: linear-gradient(180deg, #51a9ff, #1678e8); color: #fff; box-shadow: 0 7px 16px rgba(22,120,232,.28); }

body[data-game="minesweeper"] .game-actions .action-btn {
  font-size: 14px;
}

body[data-game="minesweeper"] .minesweeper-stage {
  position: relative;
  width: min(100%, calc(100dvh - 316px), 336px);
}

body[data-game="minesweeper"] .minesweeper-grid { width: 100%; }

body[data-game="minesweeper"] .minesweeper-success {
  position: absolute;
  z-index: 8;
  inset: 12% 8%;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
  padding: 18px;
  border: 3px solid rgba(255,255,255,.96);
  border-radius: 24px;
  color: #51333f;
  text-align: center;
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,236,196,.98));
  box-shadow: 0 18px 42px rgba(81,51,63,.28);
  animation: success-pop .32s cubic-bezier(.2,.9,.3,1.25);
}

body[data-game="minesweeper"] .minesweeper-success .success-badge { font-size: 34px; }
body[data-game="minesweeper"] .minesweeper-success strong { font-size: 22px; }
body[data-game="minesweeper"] .minesweeper-success p { margin: 0; font-size: 13px; }
body[data-game="minesweeper"] .minesweeper-success button {
  min-width: 150px;
  padding: 11px 18px;
  border-radius: 14px;
  color: #fff;
  font-size: 15px;
  font-weight: 900;
  background: linear-gradient(180deg,#ff799e,#ec4e7e);
}

@keyframes success-pop { from { opacity: 0; transform: scale(.78); } to { opacity: 1; transform: scale(1); } }

body[data-game="sudoku"] .sudoku-inline-status {
  width: min(100%, calc(100dvh - 418px), 302px);
  min-height: 22px;
  margin: -2px 0 0;
  color: #6a5960;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.25;
  text-align: center;
}

body[data-game="sudoku"] .sudoku-inline-status.error { color: #e14362; }
body[data-game="sudoku"] .game-footer-card > p { display: none; }
body[data-game] .game-actions:empty { display: none; }

body[data-game="animal-stack"] .game-actions { flex-wrap: nowrap; gap: 4px; }
body[data-game="animal-stack"] .game-actions .action-btn { min-width: 0; padding-inline: 3px; font-size: 10px; }

body[data-game="memory-match"] .memory-card { overflow: visible; padding: 0; }
body[data-game="memory-match"] .memory-card.open span {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  background-size: 128% 128%;
  background-position: center;
}

body[data-game="lights-out"] .lights-stage {
  display: grid;
  justify-items: center;
  gap: 7px;
  width: 100%;
}

body[data-game="lights-out"] .lights-help {
  width: min(100%, 326px);
  margin: 0;
  padding: 7px 10px;
  border-radius: 12px;
  color: #5d5361;
  font-size: 11px;
  font-weight: 750;
  line-height: 1.35;
  text-align: center;
  background: #fff8d9;
}

body[data-game="lights-out"] .light-cell.flipping { animation: light-panel-flip .34s ease both; }
@keyframes light-panel-flip {
  0% { transform: perspective(180px) rotateY(0deg) scale(1); }
  48% { transform: perspective(180px) rotateY(88deg) scale(.88); }
  52% { transform: perspective(180px) rotateY(-88deg) scale(.88); }
  100% { transform: perspective(180px) rotateY(0deg) scale(1); }
}

body[data-game="link-match"] .link-board {
  position: relative;
  width: min(100%, calc(100dvh - 316px), 336px);
  max-height: 100%;
}

body[data-game="link-match"] .link-board .link-grid { width: 100%; }
body[data-game="link-match"] .link-tile { position: relative; overflow: visible; }
body[data-game="link-match"] .link-tile img {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: contain;
  transform: translate(-50%, -50%) scale(1.3);
  pointer-events: none;
}
body[data-game="link-match"] .link-flash {
  position: absolute;
  z-index: 10;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
}

body[data-game="link-match"] .link-flash path {
  fill: none;
  stroke: #168cff;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 2px #fff) drop-shadow(0 0 5px #168cff);
  stroke-dasharray: 120;
  stroke-dashoffset: 120;
  animation: link-zap .24s ease-out both;
}

@keyframes link-zap { 55% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }

body[data-game="suika"] .suika-canvas {
  width: 100%;
  height: auto;
  aspect-ratio: 320 / 420;
  object-fit: fill;
}

/* 2048: pure-number crystal blocks */
body[data-game="game-2048"] .board-2048 {
  gap: 7px;
  padding: 10px;
  border: 3px solid rgba(255,255,255,.82);
  background: radial-gradient(circle at 18% 8%,rgba(255,255,255,.2),transparent 28%),linear-gradient(155deg,#492e78,#24143f 72%);
  box-shadow: inset 0 8px 20px rgba(9,3,28,.28),0 12px 25px rgba(54,25,84,.2);
}
body[data-game="game-2048"] .tile-2048 {
  position: relative;
  overflow: hidden;
  border: 1.5px solid rgba(255,255,255,.48);
  border-radius: 16px;
  background: rgba(255,255,255,.09);
  box-shadow: inset 0 3px 6px rgba(255,255,255,.18),inset 0 -7px 12px rgba(25,9,52,.14),0 5px 10px rgba(15,5,34,.2);
}
body[data-game="game-2048"] .tile-2048:not(.value-0)::before {
  position: absolute;
  inset: 5% 9% 53%;
  content: "";
  border-radius: 999px;
  pointer-events: none;
  background: linear-gradient(180deg,rgba(255,255,255,.72),rgba(255,255,255,0));
  opacity: .7;
}
body[data-game="game-2048"] .tile-2048-value {
  position: relative !important;
  z-index: 1;
  right: auto !important;
  bottom: auto !important;
  width: 100%;
  padding: 0;
  color: #fff;
  font: 950 clamp(18px,7vw,30px)/1 "Arial Rounded MT Bold","Microsoft YaHei",sans-serif;
  text-align: center;
  letter-spacing: -.05em;
  background: none;
  box-shadow: none;
  text-shadow: 0 2px 0 rgba(70,28,80,.28),0 4px 8px rgba(34,12,62,.28),0 -1px 2px rgba(255,255,255,.66);
}
body[data-game="game-2048"] .value-2 { background: linear-gradient(145deg,#ff8cc9,#ed4f9c); }
body[data-game="game-2048"] .value-4 { background: linear-gradient(145deg,#71e8ff,#2686f3); }
body[data-game="game-2048"] .value-8 { background: linear-gradient(145deg,#ffd77a,#ff8d42); }
body[data-game="game-2048"] .value-16 { background: linear-gradient(145deg,#b7fa8d,#49c96b); }
body[data-game="game-2048"] .value-32 { background: linear-gradient(145deg,#d2a1ff,#8959f5); }
body[data-game="game-2048"] .value-64 { background: linear-gradient(145deg,#ff9f9a,#f34667); }
body[data-game="game-2048"] .value-128 { background: linear-gradient(145deg,#87f5db,#23bfa5); }
body[data-game="game-2048"] .value-256 { background: linear-gradient(145deg,#ffe887,#e8b11e); }
body[data-game="game-2048"] .value-512 { background: linear-gradient(145deg,#9abaff,#4a64ea); }
body[data-game="game-2048"] .value-1024 { background: linear-gradient(145deg,#ff97e0,#a938bc); }
body[data-game="game-2048"] .value-2048 { background: linear-gradient(145deg,#fff38d,#ffae19); box-shadow: 0 0 18px rgba(255,211,52,.56),inset 0 4px 7px rgba(255,255,255,.5); }
body[data-game="game-2048"] .value-1024 .tile-2048-value,
body[data-game="game-2048"] .value-2048 .tile-2048-value { font-size: clamp(14px,5.2vw,23px); }

/* Minesweeper: toy-like orthographic dessert tiles */
body[data-game="minesweeper"] .minesweeper-grid {
  gap: 3px;
  padding: 7px;
  border: 3px solid #fff;
  background: linear-gradient(145deg,#394257,#252c3d);
  box-shadow: inset 0 6px 12px rgba(7,11,24,.3),0 10px 20px rgba(44,40,60,.18);
}
body[data-game="minesweeper"] .mine-cell {
  position: relative;
  overflow: visible;
  border: 0;
  border-radius: 8px;
  color: #513546;
  background-color: transparent !important;
  background-image: url('/assets/cartoon-atlases/dessert-puzzle-v2/processed/dessert-prop-1.png') !important;
  background-position: center !important;
  background-size: 130% !important;
  box-shadow: none;
}
body[data-game="minesweeper"] .mine-cell.revealed { background-image: url('/assets/cartoon-atlases/dessert-puzzle-v2/processed/dessert-prop-2.png') !important; }
body[data-game="minesweeper"] .mine-cell.revealed:nth-child(3n) { background-image: url('/assets/cartoon-atlases/dessert-puzzle-v2/processed/dessert-prop-3.png') !important; }
body[data-game="minesweeper"] .mine-cell.flagged { background-image: url('/assets/cartoon-atlases/dessert-puzzle-v2/processed/dessert-prop-1.png') !important; }
body[data-game="minesweeper"] .mine-number {
  position: relative;
  z-index: 2;
  display: grid;
  width: 100%;
  height: 100%;
  place-items: center;
  font: 950 14px/1 "Arial Rounded MT Bold","Microsoft YaHei",sans-serif;
  color: #4b326c;
  text-shadow: 0 1px 0 rgba(255,255,255,.85);
}
body[data-game="minesweeper"] .number-2 .mine-number { color:#0c7b9d; }
body[data-game="minesweeper"] .number-3 .mine-number { color:#df4267; }
body[data-game="minesweeper"] .number-4 .mine-number,
body[data-game="minesweeper"] .number-5 .mine-number { color:#7e40aa; }
body[data-game="minesweeper"] .mine-art {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 50%;
  width: 145%;
  height: 145%;
  object-fit: contain;
  transform: translate(-50%,-50%);
  filter: drop-shadow(0 3px 3px rgba(36,23,44,.22));
}
body[data-game="minesweeper"] .mine-art.flag { width: 135%; height: 135%; }

/* Sudoku: cute dessert puzzle board */
body[data-game="sudoku"] .sudoku-grid {
  position: relative;
  gap: 2px;
  padding: 8px;
  border: 3px solid #fff;
  background: linear-gradient(145deg,#f7d776,#dba857);
  box-shadow: inset 0 5px 10px rgba(110,68,22,.16),0 11px 22px rgba(116,72,36,.16);
}
body[data-game="sudoku"] .sudoku-grid::after {
  position: absolute;
  z-index: 4;
  right: -9px;
  top: -12px;
  width: 42px;
  height: 42px;
  content: "";
  pointer-events: none;
  background: url('/assets/cartoon-atlases/dessert-puzzle-v2/processed/dessert-prop-8.png') center/contain no-repeat;
  filter: drop-shadow(0 4px 5px rgba(99,57,28,.2));
}
body[data-game="sudoku"] .sudoku-cell {
  position: relative;
  border: 0;
  border-radius: 7px;
  color: #8a5838;
  font: 950 15px/1 "Arial Rounded MT Bold","Microsoft YaHei",sans-serif;
  background-color: transparent !important;
  background-image: url('/assets/cartoon-atlases/dessert-puzzle-v2/processed/dessert-prop-7.png') !important;
  background-position: center !important;
  background-size: 137% !important;
  text-shadow: 0 1px 0 #fff;
}
body[data-game="sudoku"] .sudoku-cell.fixed {
  color: #704126;
  background-image: url('/assets/cartoon-atlases/dessert-puzzle-v2/processed/dessert-prop-6.png') !important;
}
body[data-game="sudoku"] .sudoku-cell.selected {
  z-index: 2;
  color: #bc3764;
  background-image: url('/assets/cartoon-atlases/dessert-puzzle-v2/processed/dessert-prop-3.png') !important;
  outline: 3px solid #ff6e9a;
  outline-offset: -2px;
  transform: translateY(-1px) scale(1.04);
  filter: drop-shadow(0 4px 4px rgba(205,66,113,.2));
}
body[data-game="sudoku"] .sudoku-cell:nth-child(3n):not(:nth-child(9n)) { border-right: 2px solid rgba(145,84,35,.4); }
body[data-game="sudoku"] .sudoku-cell:nth-child(n+19):nth-child(-n+27),
body[data-game="sudoku"] .sudoku-cell:nth-child(n+46):nth-child(-n+54) { border-bottom: 2px solid rgba(145,84,35,.4); }
body[data-game="sudoku"] .sudoku-keypad button {
  border: 2px solid rgba(255,255,255,.86);
  color: #754627;
  font-size: 15px;
  background: linear-gradient(180deg,#fff9dd,#ffd879);
  box-shadow: inset 0 3px 0 rgba(255,255,255,.7),0 5px 8px rgba(126,78,30,.14);
}

body[data-game="memory-match"] .memory-card {
  transform-style: preserve-3d;
  transform-origin: center;
  will-change: transform;
}
body[data-game="memory-match"] .memory-card.open {
  animation: memory-card-flip .42s cubic-bezier(.2,.72,.28,1) both;
}
body[data-game="memory-match"] .memory-card.open span {
  animation: memory-face-reveal .42s ease both;
}
@keyframes memory-card-flip {
  0% { transform: perspective(420px) rotateY(0deg) scale(1); }
  48% { transform: perspective(420px) rotateY(88deg) scale(.94); }
  52% { transform: perspective(420px) rotateY(-88deg) scale(.94); }
  100% { transform: perspective(420px) rotateY(0deg) scale(1); }
}
@keyframes memory-face-reveal {
  0%,48% { opacity: 0; }
  54%,100% { opacity: 1; }
}

body[data-game="game-2048"] .board-2048 { position: relative; }
body[data-game="game-2048"] .tile-2048-motion-layer,
body[data-game="game-2048"] .tile-2048-final-layer {
  position: absolute;
  inset: 10px;
  z-index: 4;
  pointer-events: none;
}
body[data-game="game-2048"] .tile-2048-motion-layer { z-index: 3; }
body[data-game="game-2048"] .tile-2048-positioned {
  position: absolute;
  left: var(--tile-left);
  top: var(--tile-top);
  width: calc((100% - 21px) / 4);
  height: calc((100% - 21px) / 4);
  aspect-ratio: auto;
}
body[data-game="game-2048"] .tile-2048-moving {
  animation: tile-2048-point-to-point 200ms cubic-bezier(.2,.72,.28,1) both;
  will-change: transform;
}
body[data-game="game-2048"] .tile-2048-moving.tile-2048-colliding {
  animation:
    tile-2048-collision-move 133ms cubic-bezier(.2,.72,.28,1) both,
    tile-2048-hide 141ms steps(1,end) both;
  will-change: transform,opacity;
}
body[data-game="game-2048"] .tile-2048-final-layer.is-animating .tile-2048-final.tile-2048-shifting {
  animation: tile-2048-shift 200ms cubic-bezier(.2,.72,.28,1) both;
  will-change: transform;
}
body[data-game="game-2048"] .tile-2048-final-layer.is-animating .tile-2048-final.tile-2048-merged {
  z-index: 5;
  transform-origin: 50% 50%;
  animation:
    tile-2048-show 118ms steps(1,end) both,
    tile-2048-jelly 250ms cubic-bezier(.2,.78,.24,1) 110ms both;
  will-change: transform;
}
body[data-game="game-2048"] .tile-2048-final-layer.is-animating .tile-2048-final.tile-2048-new {
  transform-origin: 50% 50%;
  animation:
    tile-2048-reveal 42ms ease-out 183ms both,
    tile-2048-new-jelly 150ms cubic-bezier(.2,.78,.24,1) 183ms both;
  will-change: transform;
}
@keyframes tile-2048-point-to-point {
  0% { opacity: 1; transform: translate(0,0); }
  80% { opacity: 1; transform: translate(var(--move-x),var(--move-y)); }
  100% { opacity: 0; transform: translate(var(--move-x),var(--move-y)); }
}
@keyframes tile-2048-shift {
  from { transform: translate(var(--shift-x),var(--shift-y)); }
  to { transform: translate(0,0); }
}
@keyframes tile-2048-collision-move {
  from { transform: translate(0,0); }
  to { transform: translate(var(--move-x),var(--move-y)); }
}
@keyframes tile-2048-hide {
  from { opacity: 1; }
  to { opacity: 0; }
}
@keyframes tile-2048-show {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes tile-2048-reveal {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes tile-2048-arrive {
  0%,74% { opacity: 0; }
  to { opacity: 1; }
}
@keyframes tile-2048-jelly {
  0% { transform: scale(1); }
  50% { transform: scale(1.12); }
  100% { transform: scale(1); }
}
@keyframes tile-2048-new-jelly {
  0% { transform: scale(1); }
  50% { transform: scale(1.14); }
  100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  body[data-game="game-2048"] .tile-2048-final-layer.is-animating .tile-2048-final.tile-2048-merged,
  body[data-game="game-2048"] .tile-2048-final-layer.is-animating .tile-2048-final.tile-2048-new {
    opacity: 1;
    animation: none;
  }
}

/* 2048 candy workshop assets */
body[data-game="game-2048"] .game-hero {
  min-height: 84px;
  padding-right: 10px;
  border-color: rgba(255,247,232,.98);
  background: linear-gradient(180deg,rgba(255,252,244,.97),rgba(255,238,218,.95));
  box-shadow: 0 8px 18px rgba(176,103,68,.13);
}
body[data-game="game-2048"] .game-hero > div:first-child {
  min-height: 48px;
  background: url('/assets/generated/candy-2048/logo.png') left center / contain no-repeat;
}
body[data-game="game-2048"] .game-hero > div:first-child > * {
  opacity: 0;
}
body[data-game="game-2048"] .game-hero::after {
  display: none;
}
body[data-game="game-2048"] .game-stats {
  gap: 0;
  overflow: hidden;
  border: 1px solid rgba(225,171,132,.18);
  border-radius: 16px;
  background: rgba(255,250,239,.86);
  box-shadow: inset 0 1px rgba(255,255,255,.9),0 4px 10px rgba(173,101,65,.09);
}
body[data-game="game-2048"] .game-stats article {
  position: relative;
  padding: 7px 3px 6px;
  border-radius: 0;
  background: transparent;
}
body[data-game="game-2048"] .game-stats article + article {
  border-left: 1px dashed rgba(216,150,111,.26);
}
body[data-game="game-2048"] .game-stats span {
  font-size: 8px;
  color: #70504a;
}
body[data-game="game-2048"] .game-stats article:nth-child(1) span::before { content:"⭐ "; }
body[data-game="game-2048"] .game-stats article:nth-child(2) span::before { content:"👑 "; }
body[data-game="game-2048"] .game-stats article:nth-child(3) span::before { content:"🎯 "; }
body[data-game="game-2048"] .game-stats strong {
  margin-top: 4px;
  font-size: 16px;
  color: #493638;
}
body[data-game="game-2048"] .game-canvas-card {
  overflow: visible;
  border-color: rgba(255,244,224,.98);
  background:
    radial-gradient(circle at 50% 0%,rgba(255,255,255,.88),transparent 42%),
    linear-gradient(180deg,#fff5e6,#ffe8d5);
  box-shadow: inset 0 1px rgba(255,255,255,.95),0 10px 24px rgba(179,97,65,.13);
}
body[data-game="game-2048"] .game-canvas-card::before { display:none; }
body[data-game="game-2048"] .game-footer-card {
  position: relative;
  border-color: rgba(255,244,224,.98);
  background: linear-gradient(180deg,#fffaf1,#fff0df);
}
body[data-game="game-2048"] .game-build-version {
  position: absolute;
  right: 9px;
  bottom: 5px;
  color: rgba(112,80,74,.58);
  font-size: 9px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .02em;
  pointer-events: none;
}
body[data-game="game-2048"] .game-actions {
  justify-content: center;
}
body[data-game="game-2048"] .game-actions .action-btn {
  flex: 0 0 auto;
  width: min(38vw,180px);
  min-width: 0;
  min-height: 0;
  aspect-ratio: 36 / 11;
  padding: 0;
  border: 0;
  border-radius: 0;
  color: transparent;
  background: url('/assets/generated/candy-2048/button-base.png') center / contain no-repeat;
  box-shadow: none;
  text-shadow: none;
}
body[data-game="game-2048"] .board-2048 {
  display: block;
  position: relative;
  width: min(100%,calc(100dvh - 330px),400px);
  aspect-ratio: 1;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: url('/assets/generated/candy-2048/board-frame-woodbox-flat-alpha.png') 46.8% 50% / 120.5% 120.5% no-repeat;
  filter:
    drop-shadow(2px 4px 2px rgba(76,43,30,.34))
    drop-shadow(7px 17px 11px rgba(76,43,30,.28));
  box-shadow: none;
}
body[data-game="game-2048"] .tile-2048-cell { display: none; }
body[data-game="game-2048"] .tile-2048-motion-layer,
body[data-game="game-2048"] .tile-2048-final-layer {
  inset: 11.5% 9.5% 10.5% 9.5%;
  transform: scale(.95);
  transform-origin: 50% 50%;
}
body[data-game="game-2048"] .tile-2048-positioned {
  width: calc((100% - 15px) / 4);
  height: calc((100% - 15px) / 4);
}
body[data-game="game-2048"] .tile-2048:not(.value-0) {
  overflow: visible;
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}
body[data-game="game-2048"] .tile-2048:not(.value-0)::before { display: none; }
body[data-game="game-2048"] .tile-2048:not(.value-0)::after {
  position: absolute;
  z-index: 0;
  left: 8%;
  bottom: 0;
  width: 86%;
  height: 16%;
  content: "";
  border-radius: 50%;
  background: rgba(64,34,24,.42);
  filter: blur(2.5px);
  box-shadow: 3px 5px 6px rgba(64,34,24,.22);
  transform: translate(3px,22%);
  pointer-events: none;
}
body[data-game="game-2048"] .tile-2048 .tile-2048-art {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 50%;
  width: 108%;
  max-width: none;
  height: 108%;
  object-fit: contain;
  transform: translate(-50%,-50%) scaleY(.935);
  filter:
    drop-shadow(1px 2px 1px rgba(64,34,24,.40))
    drop-shadow(4px 7px 4px rgba(64,34,24,.24));
  pointer-events: none;
  user-select: none;
}
body[data-game="game-2048"] .tile-2048 .tile-2048-number-art {
  position: absolute;
  z-index: 3;
  right: 9%;
  bottom: -2%;
  width: 46%;
  max-width: none;
  height: 46%;
  object-fit: contain;
  filter: drop-shadow(1px 3px 2px rgba(64,34,24,.24));
  pointer-events: none;
  user-select: none;
}
body[data-game="game-2048"] .tile-2048-value {
  position: absolute !important;
  z-index: 3;
  width: 1px;
  height: 1px;
  padding: 0;
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}
body[data-game="game-2048"] .tile-2048-value.is-visible {
  left: auto;
  top: auto;
  right: 2px !important;
  bottom: 2px !important;
  width: auto;
  height: auto;
  min-width: 22px;
  padding: 2px 3px 1px;
  clip-path: none;
  overflow: visible;
  border: 1.5px solid rgba(255,255,255,.88);
  border-radius: 7px;
  color: #fff;
  font: 950 clamp(11px,3.2vw,15px)/1 "Arial Rounded MT Bold","Microsoft YaHei",sans-serif;
  text-align: center;
  letter-spacing: -.04em;
  background: linear-gradient(180deg,color-mix(in srgb,var(--tile-badge,#7d58c7) 72%,white),var(--tile-badge,#7d58c7));
  box-shadow: inset 0 1px rgba(255,255,255,.34),0 3px 4px rgba(76,37,32,.26);
  transform: none;
  text-shadow: 0 1px 2px rgba(57,28,31,.34);
}
body[data-game="game-2048"] .value-2 { --tile-badge:#ef6178; }
body[data-game="game-2048"] .value-4 { --tile-badge:#4f86d8; }
body[data-game="game-2048"] .value-8 { --tile-badge:#ed8b31; }
body[data-game="game-2048"] .value-16 { --tile-badge:#9b50b6; }
body[data-game="game-2048"] .value-32 { --tile-badge:#75ad2e; }
body[data-game="game-2048"] .value-64 { --tile-badge:#e2a727; }
body[data-game="game-2048"] .value-128 { --tile-badge:#ed7979; }
body[data-game="game-2048"] .value-256 { --tile-badge:#73a92e; }
body[data-game="game-2048"] .value-512 { --tile-badge:#39aaa2; }
body[data-game="game-2048"] .value-1024 { --tile-badge:#278fae; }
body[data-game="game-2048"] .value-2048 { --tile-badge:#9d38b4; }
body[data-game="game-2048"] .value-4096 { --tile-badge:#d38a28; }
body[data-game="game-2048"] .value-8192 { --tile-badge:#6650ba; }
body[data-game="game-2048"] .value-1024 .tile-2048-value,
body[data-game="game-2048"] .value-2048 .tile-2048-value,
body[data-game="game-2048"] .value-4096 .tile-2048-value,
body[data-game="game-2048"] .value-8192 .tile-2048-value {
  min-width: 29px;
  padding-right: 3px;
  padding-left: 3px;
  font-size: clamp(9px,2.8vw,12px);
}

@media (max-width: 540px) {
  body[data-game="game-2048"] .game-screen {
    grid-template-rows: auto auto auto;
    align-content: start;
    padding-right: 0;
    padding-left: 0;
    overflow-x: hidden;
    overflow-y: auto;
  }
  body[data-game="game-2048"] .game-hero,
  body[data-game="game-2048"] .game-footer-card {
    margin-right: 9px;
    margin-left: 9px;
  }
  body[data-game="game-2048"] .game-canvas-card {
    width: 100%;
    min-height: 0;
    grid-template-columns: minmax(0,1fr);
    padding: 0;
    overflow: visible;
    border: 0;
    border-radius: 0;
    place-items: start center;
    background: transparent;
    box-shadow: none;
  }
  body[data-game="game-2048"] .board-2048 {
    left: 50%;
    width: 112vw;
    max-width: none;
    max-height: none;
    justify-self: start;
    margin: 0;
    transform: translateX(-50%);
  }
}