:root{--cell:64px;--border:8px;--gap:8px}@media (min-width:512px){:root{--cell:100px;--border:16px;--gap:16px}}body{color:#f5f5f5;background-color:#2a2a2a;margin:0;font-family:system-ui,sans-serif}h1,h2,p,dl,dd{margin:0}kbd{color:#000;background-color:#f5f5f5;border-radius:2px;padding:1px 6px;font-size:20px;box-shadow:0 4px 12px #0003}.sr-only{white-space:nowrap;clip-path:inset(50%);border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;top:0;overflow:hidden}.title--lg{font-size:40px}@media (min-width:512px){.title--lg{font-size:60px}}.title--md{font-size:20px}.text{font-size:16px;line-height:28px}.main{flex-direction:column;justify-content:center;max-width:296px;min-height:100svh;margin:0 auto;padding-inline:12px;display:flex}@media (min-width:512px){.main{max-width:480px}}.header{align-items:center;column-gap:6px;margin-bottom:16px;padding-block:16px;display:flex}@media (min-width:512px){.header{column-gap:8px}}.header>*{flex:1}.score{color:#e3e3e3;text-align:center;text-transform:uppercase;background-color:#3c3c3c;border:8px solid #3c3c3c;border-radius:8px;font-size:12px;font-weight:700;box-shadow:0 4px 12px #0003}@media (min-width:512px){.score{font-size:16px}}.score__value{margin-top:4px;font-size:20px;display:block}@media (min-width:512px){.score__value{font-size:28px}}.board{touch-action:none;position:relative}.splash.hidden{display:none}.splash{z-index:20;border-radius:8px;flex-direction:column;justify-content:center;align-items:center;row-gap:16px;display:flex;position:absolute;inset:0}.splash__title{color:#000}.win{background-color:#00ff6499}.lost{background-color:#f009}.restart{cursor:pointer;color:#e3e3e3;background-color:#3c3c3c;border:8px solid #3c3c3c;border-radius:8px;padding:8px 16px;font-size:20px;font-weight:700;transition:border-color .18s,background-color .18s;box-shadow:0 4px 12px #0003}.restart:hover{background-color:#2a2a2a;border-color:#2a2a2a}.restart:focus-visible{outline-offset:0;outline:4px solid #6e8cfb}.tiles{-webkit-user-select:none;user-select:none;z-index:10;position:absolute;inset:0}.tile{pointer-events:none;width:var(--cell);height:var(--cell);font-size:32px;font-weight:700;line-height:var(--cell);text-align:center;border-radius:8px;transition:translate .2s,scale .1s;position:absolute;translate:0;scale:1}@media (min-width:512px){.tile{font-size:48px}}@media (prefers-reduced-motion:reduce){.tile{transition:none}}.tile2{background-color:#778da9}.tile4{background-color:#415a77}.tile8{background-color:#6366f1}.tile16{background-color:#4f46e5}.tile32{background-color:#4338ca}.tile64{background-color:#3730a3}.tile128{background-color:#312e81}.tile256{background-color:#14b8a6}.tile512{background-color:#0d9488}.tile1024{background-color:#0f766e}.tile2048{background-color:#115e59}.tile128,.tile256,.tile512{font-size:26px}@media (min-width:512px){.tile128,.tile256,.tile512{font-size:44px}}.tile1024,.tile2048{font-size:22px}@media (min-width:512px){.tile1024,.tile2048{font-size:32px}}.grid{gap:var(--gap);border:var(--border)solid #3c3c3c;background-color:#3c3c3c;border-radius:8px;flex-wrap:wrap;display:flex;box-shadow:0 4px 12px #0003}.cell{width:var(--cell);height:var(--cell);background-color:#4a4a4a;border-radius:8px}@media (min-width:512px){.cell{width:var(--cell);height:var(--cell)}}.instructions{padding-block:16px}.instructions__title{margin-bottom:16px}.instructions__keys{white-space:nowrap}.instructions__accent{color:#6e8cfb;font-weight:800}