.number-merge-page { --merge-violet: #7767e8; }
body.dark-mode .number-merge-header h1 { color: #f4f4f8; } body.dark-mode .number-merge-header p { color: #aeb2c3; }
.number-merge-container { max-width: 620px; }.number-merge-top-label { color: #6857da; font-size: .7rem; font-weight: 900; letter-spacing: .1em; }.number-merge-heading-icon { width: 70px; height: 70px; margin: 0 auto 12px; border-radius: 20px; display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #e8e2ff, #cfc2ff); color: #5a48cf; font-size: 2rem; font-weight: 900; }.number-merge-panel { padding: clamp(16px, 4vw, 30px); }
.number-merge-toolbar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; max-width: 360px; margin: 0 auto 13px; }.number-merge-toolbar div { min-width: 0; padding: 10px; border-radius: 13px; background: #f1efff; color: #4b3b9b; text-align: center; }.number-merge-toolbar span { display: block; font-size: .62rem; font-weight: 900; letter-spacing: .08em; }.number-merge-toolbar strong { display: block; margin-top: 3px; font-size: 1.35rem; }
.number-merge-status { min-height: 22px; margin: 0 0 14px; color: var(--muted-text, #74798a); font-size: .82rem; font-weight: 700; text-align: center; }.number-merge-board { width: min(500px, 100%); aspect-ratio: 1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(6px, 1.7vw, 11px); margin: 0 auto; padding: clamp(8px, 2.3vw, 13px); border-radius: 18px; background: #b8b1d0; touch-action: none; user-select: none; }.merge-cell { min-width: 0; min-height: 0; border-radius: clamp(7px, 1.7vw, 12px); background: rgba(255,255,255,.3); }.merge-tile { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; border-radius: inherit; color: #353042; font-size: clamp(1.2rem, 7vw, 2.45rem); font-weight: 900; line-height: 1; animation: mergeAppear .12s ease-out; }
.merge-tile[data-value="2"] { background: #eee9e2; }.merge-tile[data-value="4"] { background: #e6dcc9; }.merge-tile[data-value="8"] { background: #efb66b; color: #fff; }.merge-tile[data-value="16"] { background: #ea9357; color: #fff; }.merge-tile[data-value="32"] { background: #e96e56; color: #fff; }.merge-tile[data-value="64"] { background: #d9574c; color: #fff; }.merge-tile[data-value="128"] { background: #cda348; color: #fff; font-size: clamp(1.05rem, 6vw, 2rem); }.merge-tile[data-value="256"] { background: #bb8e38; color: #fff; font-size: clamp(1.05rem, 6vw, 2rem); }.merge-tile[data-value="512"] { background: #9e72d1; color: #fff; font-size: clamp(1rem, 5.5vw, 1.8rem); }.merge-tile[data-value="1024"], .merge-tile[data-value="2048"] { background: #7158cb; color: #fff; font-size: clamp(.92rem, 5vw, 1.65rem); }.merge-tile[data-value^="4"] { background: #463b7a; color: #fff; font-size: clamp(.82rem, 4.5vw, 1.45rem); }
.number-merge-actions { margin-top: 19px; }.number-merge-modal { position: fixed; z-index: 50; inset: 0; display: grid; place-items: center; padding: 20px; background: rgba(25, 22, 43, .7); }.number-merge-modal[hidden] { display: none; }.number-merge-modal-card { width: min(430px, 100%); padding: 28px; border-radius: 23px; background: var(--card-bg, #fff); color: var(--text-color, #171a2b); text-align: center; box-shadow: 0 20px 55px rgba(0,0,0,.3); }.number-merge-modal-value { display: inline-flex; align-items: center; justify-content: center; width: 76px; height: 76px; border-radius: 17px; background: #7158cb; color: #fff; font-size: 1.15rem; font-weight: 900; }.number-merge-modal-card h2 { margin: 16px 0 8px; font-size: 1.5rem; }.number-merge-modal-card p { margin: 0; color: var(--muted-text, #74798a); line-height: 1.5; }.number-merge-modal-actions { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin-top: 22px; }
body.dark-mode .number-merge-toolbar div { background: #302b4b; color: #ddd6ff; } body.dark-mode .number-merge-board { background: #474257; } body.dark-mode .number-merge-heading-icon { background: #34275f; color: #d8ceff; } @keyframes mergeAppear { 0% { transform: scale(.82); } 100% { transform: scale(1); } } @media (max-width: 560px) { .number-merge-top-label { display: none; } .number-merge-actions { margin-top: 16px; } .number-merge-modal-card { padding: 23px 17px; } } @media (prefers-reduced-motion: reduce) { .merge-tile { animation: none; } }