/* Number Merge */
.cg-layout { display: grid; grid-template-columns: minmax(0, 520px) minmax(260px, 1fr); gap: 20px; margin: 18px 0; align-items: start; }
.cg-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin: 18px 0 0; }
.cg-head h1 { font-size: calc(28px * var(--fs, 1)); }
.side { padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.buddy { max-width: 240px; margin: 0 auto; width: 100%; }
.bubble { background: var(--raised); border: 2px solid var(--border); border-radius: 14px; padding: 10px 14px; font-weight: 600; min-height: 56px; }
.stat { color: var(--text-2); font-size: calc(16px * var(--fs, 1)); }
.confirm { max-width: 420px; }
.confirm-body { padding: 20px; display: flex; flex-direction: column; gap: 12px; }
.confirm-body h2 { font-size: calc(22px * var(--fs, 1)); }
.confirm-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 6px; }
.confirm-actions .btn { min-height: 52px; }

.nm-scores { display: flex; gap: 8px; }
.nm-score { display: flex; flex-direction: column; align-items: center; min-width: 88px; padding: 4px 12px; border-radius: var(--radius); background: var(--logic-bg); border: 2px solid var(--logic-line); line-height: 1.3; }
.nm-score span { font-size: calc(13px * var(--fs, 1)); font-weight: 700; color: var(--logic); }
.nm-score b { font: 800 calc(22px * var(--fs, 1)) "Plus Jakarta Sans", sans-serif; }

/* tile colors: a calm warm-to-plum ramp; every number keeps at least 4.5:1 on its tile, day and night */
.nm-board-card { padding: 12px; position: relative; }
.nm-board { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; padding: 10px; border-radius: 14px; background: var(--secondary);
  aspect-ratio: 1; direction: ltr; user-select: none; touch-action: none; -webkit-user-select: none; }
.nm-row { display: contents; }
.nm-cell { border-radius: 10px; display: flex; align-items: center; justify-content: center; min-width: 0;
  font: 800 calc(clamp(22px, 7.5vw, 40px) * var(--fs, 1)) "Plus Jakarta Sans", sans-serif; background: var(--nm-bg, var(--card)); color: var(--nm-ink, var(--text)); }
.nm-cell.empty { background: var(--raised); opacity: .7; }
.nm-cell.long { font-size: calc(clamp(17px, 5.6vw, 32px) * var(--fs, 1)); }
.nm-cell.big { font-size: calc(clamp(14px, 4.6vw, 26px) * var(--fs, 1)); }
:root {
  --nm2: #FDFBF7; --nm4: #F3EAD8; --nm8: #F2D6AE; --nm16: #EDBF8C; --nm32: #E3A27A; --nm64: #D38766;
  --nm128: #E9DCF3; --nm256: #D9C4EC; --nm512: #C3A6E0; --nm1024: #765598; --nm2048: #5A3F7A; --nm4096: #2F3A35;
  --nm-dark-ink: #1C2420; --nm-light-ink: #FDFBF7;
}
:root[data-theme="dark"] {
  --nm2: #2B3531; --nm4: #34403B; --nm8: #4A3D2A; --nm16: #5A4528; --nm32: #6A4527; --nm64: #7A4126;
  --nm128: #3A2F4C; --nm256: #4A3A62; --nm512: #5E4A7C; --nm1024: #C2A8E3; --nm2048: #E3D5F2; --nm4096: #ECE8DF;
  --nm-dark-ink: #ECE8DF; --nm-light-ink: #141917;
}
.t2 { --nm-bg: var(--nm2); } .t4 { --nm-bg: var(--nm4); } .t8 { --nm-bg: var(--nm8); } .t16 { --nm-bg: var(--nm16); }
.t32 { --nm-bg: var(--nm32); } .t64 { --nm-bg: var(--nm64); } .t128 { --nm-bg: var(--nm128); } .t256 { --nm-bg: var(--nm256); }
.t512 { --nm-bg: var(--nm512); } .t1024 { --nm-bg: var(--nm1024); --nm-ink: var(--nm-light-ink); } .t2048 { --nm-bg: var(--nm2048); --nm-ink: var(--nm-light-ink); }
.t4096 { --nm-bg: var(--nm4096); --nm-ink: var(--nm-light-ink); }
.t2, .t4, .t8, .t16, .t32, .t64, .t128, .t256, .t512 { --nm-ink: var(--nm-dark-ink); }
.nm-cell.t2 { box-shadow: inset 0 0 0 2px var(--border); }
.nm-cell.fresh { animation: nm-pop .18s ease-out; }
.nm-cell.merged { animation: nm-join .2s ease-out; }
@keyframes nm-pop { from { transform: scale(.4); opacity: .3; } to { transform: scale(1); opacity: 1; } }
@keyframes nm-join { 50% { transform: scale(1.1); } }

/* the end / goal card sits over the board */
.nm-layer { position: absolute; inset: 12px; display: flex; align-items: center; justify-content: center; padding: 14px;
  background: color-mix(in srgb, var(--card) 80%, transparent); border-radius: 14px; }
.nm-layer .card { padding: 18px; text-align: center; max-width: 360px; width: 100%; }
.nm-layer h2 { font-size: calc(22px * var(--fs, 1)); color: var(--primary); }
.nm-layer p { margin: 6px 0 12px; }
.over-actions { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }

/* direction buttons: a cross, always left-to-right like the arrows on a keyboard */
.nm-controls { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: center; margin-top: 12px; }
.nm-pad { display: grid; grid-template-columns: repeat(3, 56px); grid-template-rows: repeat(2, 56px); gap: 6px; direction: ltr;
  grid-template-areas: ". up ." "left down right"; }
.nm-dir { min-height: 56px; min-width: 56px; padding: 0; font: 800 calc(24px * var(--fs, 1)) "Plus Jakarta Sans", sans-serif; }
.nm-up { grid-area: up; } .nm-left { grid-area: left; } .nm-right { grid-area: right; } .nm-down { grid-area: down; }
.nm-side-actions { display: grid; gap: 8px; }
.nm-side-actions [aria-disabled="true"] { opacity: .5; }

@media (max-width: 900px) { .cg-layout { grid-template-columns: 1fr; } }
@media (max-width: 480px) {
  .main-nm { padding: 0 10px; }
  .cg-head h1 { font-size: calc(24px * var(--fs, 1)); }
  .nm-board-card { padding: 8px; }
  .nm-layer { inset: 8px; }
  .nm-board { gap: 8px; padding: 8px; }
  .nm-score { min-width: 76px; }
}

/* Full screen for play (shared mode in core.js / main.css): the board as large as the screen allows, the arrows and
   Undo below it (upright) or beside it (sideways); New game waits outside (the end card has its own) */
:root[data-focus="on"] .nm-board-card { width: min(100cqw, var(--pc-fy) - 200px); padding: 0; border: 0; background: none; box-shadow: none; align-self: center; }
:root[data-focus="on"] .nm-layer { inset: 0; }
:root[data-focus="on"] .nm-controls { margin-top: 0; justify-content: center; }
@media (orientation: landscape) {
  :root[data-focus="on"] .nm-board-card { width: min(var(--pc-fy), 60cqw); }
  :root[data-focus="on"] .nm-controls { grid-template-columns: auto; justify-items: center; }
}