:root { font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Microsoft YaHei', sans-serif; color: #24342f; background: #f4f6f5; font-synthesis: none; }
* { box-sizing: border-box; letter-spacing: 0; }
body { margin: 0; }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; cursor: pointer; color: inherit; }
button:disabled { cursor: default; opacity: .35; }
button:focus-visible, a:focus-visible, #board:focus-visible { outline: 3px solid #13866b; outline-offset: 4px; }
main { max-width: 1056px; padding: 0 32px; margin: auto; }
header { display: flex; align-items: center; justify-content: space-between; padding: 27px 0; border-bottom: 1px solid #dbe2de; }
.brand { text-decoration: none; color: #25362f; font-size: 23px; font-weight: 800; display: flex; align-items: center; gap: 22px; }
.brand span { color: #7f8b84; font-size: 12px; font-weight: 400; }
.edition, .section-label { color: #6a8074; font-size: 11px; font-weight: 650; }
.layout { display: grid; grid-template-columns: minmax(0, 480px) minmax(0, 290px); justify-content: space-between; gap: 50px; margin: 38px 0 40px; }
.heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 93px; margin-bottom: 22px; }
h1 { font-size: 76px; margin: 0; line-height: 1; font-weight: 800; }
.dot { color: #16866a; }
.scores { display: flex; gap: 22px; text-align: right; }
.scores > div { position: relative; min-width: 76px; }
.scores span { display: block; font-size: 11px; color: #7b8881; margin-bottom: 8px; }
.scores strong { font-size: 23px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
#gain { position: absolute; right: 0; bottom: -20px; color: #16866a; white-space: nowrap; }
.board-top { display: flex; justify-content: space-between; color: #64766b; font-size: 12px; margin-bottom: 12px; }
#board { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; padding: 12px; background: #c7d5cc; border-radius: 8px; aspect-ratio: 1; touch-action: none; user-select: none; }
.cell { min-width: 0; min-height: 0; border-radius: 5px; display: flex; align-items: center; justify-content: center; background: #dce5df; font-size: 39px; font-weight: 750; color: #37584a; font-variant-numeric: tabular-nums; }
.v2 { background: #f4f8f2; }.v4 { background: #d7efc4; }.v8 { background: #a6d6ba; }.v16 { background: #68b99c; color: #fff; }.v32 { background: #2f957c; color: #fff; }.v64 { background: #e9c768; color: #5b481c; }.v128 { background: #e9a87c; color: #5a302c; }.v256 { background: #cf7283; color: #fff; }.v512 { background: #987faf; color: #fff; }.v1024 { background: #627bb2; color: #fff; }.v2048, .vlarge { background: #e8bb39; color: #513d0d; }
.cell.digits4 { font-size: 31px; }.cell.digits5 { font-size: 23px; }.cell.digits6 { font-size: 17px; }
.spawn { animation: appear .16s ease-out; }.merge { animation: merge .2s ease-out; }
@keyframes appear { from { transform: scale(.8); opacity: .4; } to { transform: scale(1); opacity: 1; } }
@keyframes merge { 50% { transform: scale(1.09); } }
.toolbar { display: flex; align-items: center; gap: 7px; margin-top: 18px; }
.toolbar button { width: 37px; height: 37px; flex: 0 0 37px; border: 1px solid #d4dfd7; border-radius: 5px; background: transparent; font-size: 23px; }
.toolbar button:hover:not(:disabled) { background: #e3eae5; }
.divider { width: 1px; height: 21px; background: #d4dfd7; margin: 0 3px; }
#combo { margin-left: auto; font-size: 12px; white-space: nowrap; color: #16866a; }
aside { padding-top: 12px; }
h2 { margin: 0; font-size: 18px; }
.mission h2 { font-size: 26px; margin: 10px 0 24px; }
.target { display: flex; justify-content: space-between; font-size: 12px; margin-bottom: 9px; }
.target span { color: #7a897f; }
progress { display: block; width: 100%; height: 5px; border: 0; border-radius: 4px; overflow: hidden; background: #dfe7e1; accent-color: #23896d; margin: 0 0 22px; }
progress::-webkit-progress-bar { background: #dfe7e1; } progress::-webkit-progress-value { background: #23896d; }
.status-line { display: flex; justify-content: space-between; gap: 8px; font-size: 10px; color: #859188; }
.chapters { border-top: 1px solid #dbe2de; padding-top: 26px; margin-top: 26px; }
.section-heading { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; }
.section-heading h2 { font-size: 14px; }.section-heading > span { color: #7c8b81; font-size: 11px; }
.level { display: flex; align-items: center; width: 100%; gap: 13px; padding: 12px 9px; background: transparent; border: 0; border-bottom: 1px solid #e2e8e3; text-align: left; }
.level.active { background: #e0ece4; border-radius: 5px; }.level .number { color: #8fa397; font-size: 12px; }.level b { font-size: 12px; font-weight: 500; }.level .target-number { margin-left: auto; font-size: 12px; color: #687e70; }
footer { display: flex; align-items: center; gap: 7px; margin-top: 24px; font-size: 10px; color: #859288; }.live-dot { width: 5px; height: 5px; background: #23896d; border-radius: 50%; }
.page-footer { display: flex; justify-content: space-between; border-top: 1px solid #dbe2de; padding: 22px 0; color: #97a299; font-size: 11px; }
dialog { width: min(390px, calc(100% - 32px)); padding: 0; border: 1px solid #d4dfd7; border-radius: 8px; background: #f4f6f5; color: #24342f; }
dialog::backdrop { background: #1a302b99; backdrop-filter: blur(4px); }.dialog-content { padding: 28px; }.dialog-content h2 { margin: 10px 0; font-size: 26px; }.dialog-content p { color: #708176; line-height: 1.8; font-size: 14px; white-space: pre-line; }.dialog-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 24px; }.dialog-actions button { padding: 10px 16px; border: 1px solid #d4dfd7; border-radius: 5px; background: transparent; }.dialog-actions .primary { color: #fff; background: #23896d; border-color: #23896d; }
@media (max-width: 780px) { main { max-width: 520px; padding: 0 20px; }.layout { grid-template-columns: minmax(0, 1fr); gap: 25px; margin-top: 24px; }aside { padding-top: 0; }.edition { display: none; }.heading { min-height: 70px; }h1 { font-size: 62px; }.brand span { font-size: 11px; }.scores { gap: 14px; }#levels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 14px; }.mission h2 { font-size: 22px; }.cell { font-size: 33px; }.cell.digits4 { font-size: 26px; }.cell.digits5 { font-size: 19px; } }
@media (max-width: 380px) { main { padding: 0 12px; }.scores { gap: 9px; }.scores > div { min-width: 57px; }.scores strong { font-size: 20px; }h1 { font-size: 54px; }#board { padding: 8px; gap: 7px; }.toolbar { gap: 5px; }.toolbar button { width: 32px; flex-basis: 32px; }.cell { font-size: 28px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; } }