/* Cat Number Merge. Builds on /assets/styles.css tokens. A soft storybook board:
   wooden frame, cream cells, rounded tiles whose number is always printed. */
:root {
  --cm-wood: #c9955f;
  --cm-board: #e8d3b8;
  --cm-cell: #f6ead9;
  --cm-gap: clamp(6px, 2.2vw, 10px);
}

.cm-main { padding-block: .25rem 2.5rem; }
.cm-heading { display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .6rem; margin: 0 0 .35rem; }
.cm-heading h1 { font-size: clamp(1.45rem, 5vw, 2.1rem); line-height: 1.15; letter-spacing: -.02em; }
.cm-subtitle { margin: 0; color: var(--muted); font-size: .9rem; font-weight: 700; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

.cm-card { max-width: 30rem; display: grid; gap: .5rem; padding: .6rem; border: 1px solid var(--line-strong); border-radius: 1.1rem; background: linear-gradient(#fffaf2, #fff 45%); box-shadow: 0 10px 28px rgba(16, 35, 63, .08); }

.cm-topbar { display: flex; align-items: stretch; gap: .45rem; }
.cm-scores { flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: .35rem; margin: 0; }
.cm-scores div { display: grid; justify-items: center; padding: .2rem .3rem; border-radius: .7rem; background: var(--soft); }
.cm-scores dt { color: var(--muted); font-size: .78rem; font-weight: 700; line-height: 1.3; }
.cm-scores dd { margin: 0; font-size: 1.25rem; font-weight: 820; line-height: 1.25; font-variant-numeric: tabular-nums; }
.cm-new { min-width: 6.5rem; min-height: 2.75rem; padding: .3rem .6rem; border: 1px solid var(--accent); border-radius: .7rem; background: #fff; color: var(--accent-dark); font: inherit; font-size: .85rem; font-weight: 780; line-height: 1.25; cursor: pointer; }
.cm-new.is-confirming { border-color: #b45309; background: #fff4e5; color: #8a3c00; }

.cm-cheer { display: flex; align-items: center; gap: .45rem; min-height: 2.6rem; margin: 0; }
.cm-cheer-cat { flex: none; width: 2.2rem; height: 2.2rem; color: #8a5a30; }
.cm-bubble { position: relative; padding: .2rem .7rem; border: 2px solid #f0c36b; border-radius: 1rem; background: #fff; font-size: .9rem; font-weight: 650; line-height: 1.45; }
.cm-bubble::before { content: ""; position: absolute; left: -.55rem; top: 50%; margin-top: -.35rem; border: .35rem solid transparent; border-right: .5rem solid #f0c36b; border-left: 0; }

/* The board: a square; tiles sit at (--x, --y) and glide there with transform. Swipes are taken here only. */
.cm-board-wrap { position: relative; width: 100%; max-width: 26rem; margin-inline: auto; }
.cm-board { --cell: calc((100% - 5 * var(--cm-gap)) / 4); position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--cm-gap); aspect-ratio: 1; padding: var(--cm-gap); border-radius: 1rem; background: var(--cm-board); box-shadow: inset 0 0 0 3px var(--cm-wood); container-type: inline-size; isolation: isolate; touch-action: none; overscroll-behavior: contain; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; }
.cm-board:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.cm-cell { border-radius: .7rem; background: var(--cm-cell); }
.cm-tile { position: absolute; top: var(--cm-gap); left: var(--cm-gap); width: var(--cell); height: var(--cell); display: grid; place-items: center; border-radius: .7rem; color: var(--ink); font-size: 13cqi; font-weight: 850; line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: -.02em; box-shadow: 0 2px 0 rgba(16, 35, 63, .12); transform: translate(calc(var(--x) * (100% + var(--cm-gap))), calc(var(--y) * (100% + var(--cm-gap)))); pointer-events: none; }
.cm-tile.cm-d3 { font-size: 10.5cqi; }
.cm-tile.cm-d4 { font-size: 8.4cqi; }
.cm-tile.cm-d5 { font-size: 6.8cqi; }
.cm-board.is-sliding .cm-tile { transition: transform 110ms ease-out; }

.cm-v2 { background: #fffaf0; box-shadow: inset 0 0 0 2px #ecdcc4, 0 2px 0 rgba(16, 35, 63, .1); }
.cm-v4 { background: #fdecc8; }
.cm-v8 { background: #fbd29a; }
.cm-v16 { background: #f8b878; }
.cm-v32 { background: #f59e7a; }
.cm-v64 { background: #ef8a8a; }
.cm-v128 { background: #f6d36b; }
.cm-v256 { background: #9fd9b3; }
.cm-v512 { background: #8cc8ec; }
.cm-v1024 { background: #c3b2f0; }
.cm-v2048 { background: #f2b134; box-shadow: 0 0 0 3px #fff3c4, 0 0 16px rgba(242, 177, 52, .75); }
.cm-vbig { background: var(--ink); color: #fff; }

.cm-tile.is-new { animation: cm-appear 160ms ease-out; }
.cm-tile.is-merged { animation: cm-pop 180ms ease-out; z-index: 1; }
.cm-board.is-stuck { animation: cm-stuck 260ms ease; }
@keyframes cm-appear { from { scale: .2; opacity: 0; } to { scale: 1; opacity: 1; } }
@keyframes cm-pop { 0% { scale: 1; } 45% { scale: 1.16; } 100% { scale: 1; } }
@keyframes cm-stuck { 25% { translate: -4px 0; } 75% { translate: 4px 0; } }

/* Clear and game-over screens, over the board. */
.cm-overlay { position: absolute; inset: 0; display: grid; place-items: center; padding: 6%; border-radius: 1rem; background: rgba(255, 250, 242, .82); }
.cm-overlay[hidden] { display: none; }
.cm-overlay-box { position: relative; width: 100%; max-width: 20rem; padding: 1rem .9rem; border: 2px solid #f0c36b; border-radius: 1rem; background: #fff; text-align: center; box-shadow: 0 10px 28px rgba(16, 35, 63, .14); }
.cm-overlay-box:focus { outline: none; }
.cm-overlay-box:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.cm-overlay-box h2 { margin: 0 0 .3rem; font-size: clamp(1.3rem, 6vw, 1.7rem); line-height: 1.2; }
.cm-overlay-box p { margin: 0 0 .7rem; font-size: .92rem; }
.cm-overlay.is-won .cm-overlay-box h2 { color: #8a4a00; }
.cm-overlay-actions { display: grid; gap: .4rem; }
.cm-overlay-actions .primary-button { min-height: 3rem; margin: 0; }
.cm-again { min-height: 2.75rem; border: 1px solid var(--accent); border-radius: .7rem; background: #fff; color: var(--accent-dark); font: inherit; font-weight: 760; cursor: pointer; }
.cm-burst { position: absolute; left: 50%; top: 1.6rem; width: 0; height: 0; pointer-events: none; }
.cm-overlay:not(.is-won) .cm-burst { display: none; }
.cm-burst span { position: absolute; left: -.35rem; top: -.35rem; width: .7rem; height: .7rem; border-radius: 50%; background: #f2b134; opacity: 0; animation: cm-burst 900ms ease-out 2; }
.cm-burst span:nth-child(2n) { background: #ef8a8a; }
.cm-burst span:nth-child(3n) { background: #8cc8ec; }
.cm-burst span:nth-child(1) { --dx: 0; --dy: -4.2rem; }
.cm-burst span:nth-child(2) { --dx: 3rem; --dy: -3rem; }
.cm-burst span:nth-child(3) { --dx: 4.2rem; --dy: 0; }
.cm-burst span:nth-child(4) { --dx: 3rem; --dy: 3rem; }
.cm-burst span:nth-child(5) { --dx: 0; --dy: 4.2rem; }
.cm-burst span:nth-child(6) { --dx: -3rem; --dy: 3rem; }
.cm-burst span:nth-child(7) { --dx: -4.2rem; --dy: 0; }
.cm-burst span:nth-child(8) { --dx: -3rem; --dy: -3rem; }
.cm-overlay.is-won .cm-overlay-box { animation: cm-pop 360ms ease-out; }
@keyframes cm-burst { 0% { opacity: 1; translate: 0 0; scale: .6; } 100% { opacity: 0; translate: var(--dx) var(--dy); scale: 1.1; } }

/* Direction buttons: a small cross under the board. */
.cm-pad { display: grid; grid-template-columns: repeat(3, 3.25rem); grid-template-areas: ". up ." "left down right"; justify-content: center; gap: .35rem; }
.cm-dir { min-width: 2.75rem; min-height: 2.75rem; border: 1px solid var(--line-strong); border-radius: .8rem; background: #fff; color: var(--accent-dark); font: inherit; font-size: 1.05rem; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.cm-dir:active { background: var(--soft); }
.cm-dir-up { grid-area: up; } .cm-dir-left { grid-area: left; } .cm-dir-down { grid-area: down; } .cm-dir-right { grid-area: right; }
.cm-new:focus-visible, .cm-dir:focus-visible, .cm-again:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.cm-storage-note { margin: 0; color: var(--muted); font-size: .82rem; }
.cm-storage-note[hidden] { display: none; }

.cm-content .key-list { display: grid; grid-template-columns: max-content 1fr; gap: .35rem .9rem; margin: .55rem 0; }
.cm-content .key-list dt { font-weight: 760; }
.cm-content .key-list dd { margin: 0; }
.cm-content kbd { display: inline-block; min-width: 1.6em; padding: 0 .3em; border: 1px solid var(--line-strong); border-bottom-width: 2px; border-radius: .35rem; background: #fff; font: inherit; font-size: .9em; text-align: center; }

@media (prefers-reduced-motion: reduce) {
  .cm-board.is-sliding .cm-tile { transition: none; }
  .cm-tile.is-new, .cm-tile.is-merged, .cm-board.is-stuck, .cm-overlay.is-won .cm-overlay-box { animation: none; }
  .cm-burst { display: none; }
}