/* 2048 Cupcakes theme layer — loaded AFTER /games/2048/game.css.
   Everything is scoped under html[data-g2048-theme="cupcakes"];
   shared game.css/game.js are untouched by design. */

/* Hide the numeric tile text with font-size:0 (NOT display:none) so screen
   readers still announce the value; the visual number lives in the badge. */
html[data-g2048-theme="cupcakes"] .tile-inner { font-size: 0 !important; }

/* Cupcake art per tier (pastel plate color behind each transparent SVG). */
html[data-g2048-theme="cupcakes"] .tile[data-v="2"]    .tile-inner { background: #fff6e9 url(art/2.svg)    center/88% no-repeat !important; }
html[data-g2048-theme="cupcakes"] .tile[data-v="4"]    .tile-inner { background: #ffeef4 url(art/4.svg)    center/88% no-repeat !important; }
html[data-g2048-theme="cupcakes"] .tile[data-v="8"]    .tile-inner { background: #f3e6da url(art/8.svg)    center/88% no-repeat !important; }
html[data-g2048-theme="cupcakes"] .tile[data-v="16"]   .tile-inner { background: #e6f8f0 url(art/16.svg)   center/88% no-repeat !important; }
html[data-g2048-theme="cupcakes"] .tile[data-v="32"]   .tile-inner { background: #e9edff url(art/32.svg)   center/88% no-repeat !important; }
html[data-g2048-theme="cupcakes"] .tile[data-v="64"]   .tile-inner { background: #fffae0 url(art/64.svg)   center/88% no-repeat !important; }
html[data-g2048-theme="cupcakes"] .tile[data-v="128"]  .tile-inner { background: #fbeae7 url(art/128.svg)  center/88% no-repeat !important; box-shadow: 0 0 16px rgba(122, 31, 43, .35); }
html[data-g2048-theme="cupcakes"] .tile[data-v="256"]  .tile-inner { background: #fdf1dc url(art/256.svg)  center/88% no-repeat !important; box-shadow: 0 0 18px rgba(209, 145, 47, .4); }
html[data-g2048-theme="cupcakes"] .tile[data-v="512"]  .tile-inner { background: #f2f0ea url(art/512.svg)  center/88% no-repeat !important; box-shadow: 0 0 20px rgba(47, 47, 51, .35); }
html[data-g2048-theme="cupcakes"] .tile[data-v="1024"] .tile-inner { background: #eeecff url(art/1024.svg) center/88% no-repeat !important; box-shadow: 0 0 24px rgba(79, 70, 229, .45); }
html[data-g2048-theme="cupcakes"] .tile[data-v="2048"] .tile-inner { background: #fff0fa url(art/2048.svg) center/88% no-repeat !important; box-shadow: 0 0 32px rgba(176, 58, 158, .55); }
html[data-g2048-theme="cupcakes"] .tile[data-v="4096"] .tile-inner { background: #221a4d url(art/4096.svg) center/88% no-repeat !important; box-shadow: 0 0 32px rgba(76, 58, 143, .6); }
html[data-g2048-theme="cupcakes"] .tile[data-v="8192"] .tile-inner { background: #fff7dc url(art/8192.svg) center/88% no-repeat !important; box-shadow: 0 0 36px rgba(245, 181, 10, .65); }
/* Values above 8192 fall through to the stock .tile.super gold gradient. */

/* Corner number badge — .tile carries data-v, so attr() works here. */
html[data-g2048-theme="cupcakes"] .tile::after {
  content: attr(data-v);
  position: absolute;
  right: 4px;
  bottom: 4px;
  z-index: 2;
  font-family: 'Orbitron', sans-serif;
  font-weight: 700;
  font-size: clamp(.58rem, 2.4vw, .78rem);
  line-height: 1;
  color: #fff;
  background: rgba(20, 16, 28, .62);
  padding: 2px 5px;
  border-radius: 6px;
  pointer-events: none;
}
html[data-g2048-theme="cupcakes"][data-g2048-badges="off"] .tile::after { display: none; }

/* Merge-order legend (Task 3 markup). */
html[data-g2048-theme="cupcakes"] .cupcake-legend {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 14px;
  margin: 18px 0 0;
  padding: 0;
}
html[data-g2048-theme="cupcakes"] .cupcake-legend figure {
  margin: 0;
  text-align: center;
  background: rgba(127, 127, 160, .1);
  border-radius: 12px;
  padding: 12px 6px 10px;
}
html[data-g2048-theme="cupcakes"] .cupcake-legend img { width: 64px; height: 64px; }
html[data-g2048-theme="cupcakes"] .cupcake-legend figcaption {
  font-family: 'Space Grotesk', sans-serif;
  font-size: .78rem;
  margin-top: 6px;
  color: var(--muted);
}
html[data-g2048-theme="cupcakes"] .cupcake-legend b {
  display: block;
  font-family: 'Orbitron', sans-serif;
  font-size: .72rem;
  margin-bottom: 2px;
}

/* Numbers toggle row under the controls. */
html[data-g2048-theme="cupcakes"] #badge-row {
  width: 100%;
  max-width: 480px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'Space Grotesk', sans-serif;
  font-size: .74rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted);
}