/* Merge Climb: glass gems that slide on a frosted board. */
.mc-board { --gap: 10px; position: relative; width: min(100%, 420px); aspect-ratio: 1; margin: 6px auto 0; padding: var(--gap); border-radius: 24px; background: var(--glass-strong); border: 1px solid var(--glass-edge); box-shadow: var(--glass-shadow); touch-action: none; user-select: none; outline: none; }
.mc-board:focus-visible { box-shadow: 0 0 0 3px var(--select), var(--glass-shadow); }
.mc-bg, .mc-layer { position: absolute; inset: var(--gap); }
.mc-bg { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap); }
.mc-cell { border-radius: 14px; background: color-mix(in srgb, var(--text) 7%, transparent); }
.mc-tile { --size: calc((100% - 3 * var(--gap)) / 4); position: absolute; left: 0; top: 0; width: var(--size); height: var(--size);
  transform: translate(calc(var(--c) * (100% + var(--gap))), calc(var(--r) * (100% + var(--gap))));
  transition: transform .12s ease-out; display: flex; align-items: center; justify-content: center; border-radius: 16px;
  font: 800 clamp(20px, 7vw, 36px) var(--display); color: #2B2A20; background: linear-gradient(160deg, #FFFDF4, #F1E7C8);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.7), inset 0 -4px 0 rgba(0,0,0,.08), 0 6px 14px rgba(0,0,0,.15); }
.mc-tile[data-v="4"] { background: linear-gradient(160deg, #FFF6D6, #FFE7A3); }
.mc-tile[data-v="8"] { background: linear-gradient(160deg, #FFD9B3, #FFB36B); }
.mc-tile[data-v="16"] { background: linear-gradient(160deg, #FFC4A8, #FF8F5E); color: #fff; }
.mc-tile[data-v="32"] { background: linear-gradient(160deg, #FFB3C1, #F2607A); color: #fff; }
.mc-tile[data-v="64"] { background: linear-gradient(160deg, #F2A3E0, #C2459F); color: #fff; }
.mc-tile[data-v="128"] { background: linear-gradient(160deg, #C9B8FF, #7A5CE0); color: #fff; font-size: clamp(18px, 6vw, 30px); }
.mc-tile[data-v="256"] { background: linear-gradient(160deg, #A8D8FF, #3A8BDB); color: #fff; font-size: clamp(18px, 6vw, 30px); }
.mc-tile[data-v="512"] { background: linear-gradient(160deg, #A6F0D9, #1FA37A); color: #fff; font-size: clamp(18px, 6vw, 30px); }
.mc-tile[data-v="1024"], .mc-tile[data-v="2048"], .mc-tile[data-v="big"] { background: linear-gradient(160deg, #FFE38F, #E0A100); color: #fff; font-size: clamp(15px, 5vw, 24px); box-shadow: 0 0 22px rgba(245,197,66,.7), inset 0 2px 0 rgba(255,255,255,.6); }
.mc-tile.new { animation: mc-in .18s ease-out; }
.mc-tile.join { animation: mc-join .2s ease-out; z-index: 2; }
@keyframes mc-in { from { opacity: 0; scale: .4; } to { opacity: 1; scale: 1; } }
@keyframes mc-join { 0% { scale: 1; } 50% { scale: 1.16; } 100% { scale: 1; } }
.mc-pad { display: flex; justify-content: center; gap: 8px; margin-top: 12px; }
.mc-pad .btn { min-width: 52px; font-size: 20px; }
#mc-again { display: block; margin: 8px auto 0; }
@media (prefers-reduced-motion: reduce) { .mc-tile { transition: none; } .mc-tile.new, .mc-tile.join { animation: none; } }