:root{font-family:var(--font-family);color-scheme:light;--bg:#f5f7f5;--surface:#fff;--soft:#f0f4f1;--text:#293b35;--secondary:#435e50;--muted:#526456;--border:#e1e8e2;--green:#256648;--green-soft:#eaf4ef;--board:#b3b7a2;--cell:#cbd0bc;--shadow:0 7px 28px #29442b05;background:var(--bg);color:var(--text)}
:root[data-theme=dark]{color-scheme:dark;--bg:#17211e;--surface:#212d28;--soft:#293831;--text:#dde8df;--secondary:#a2b6aa;--muted:#adbfb0;--border:#35453b;--green:#8abbab;--green-soft:#2b4037;--board:#5e695a;--cell:#74806d;--shadow:0 8px 30px #0000000a}
*{box-sizing:border-box}body{margin:0}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}button:disabled{opacity:.5;cursor:default}a{color:inherit;text-decoration:none}a:hover{color:var(--green)}button:focus-visible,a:focus-visible,.board:focus-visible{outline:3px solid var(--green);outline-offset:4px}[hidden]{display:none!important}
.game-subheader{height:76px;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:0 max(28px,calc((100vw - 1080px)/2));background:var(--surface);border-bottom:1px solid var(--border)}.brand{display:flex;align-items:center;gap:11px}.brand strong{font-size:20px;font-weight:650;letter-spacing:1px}.brand strong>span{font-size:16px;font-weight:450;letter-spacing:.5px;color:var(--secondary);margin-left:10px}.brand-logo{display:block;flex-shrink:0;width:28px;height:28px;object-fit:contain}.game-subheader nav{display:flex;align-items:center;gap:24px}.game-subheader nav>a{font-size:var(--font-body,1rem);color:var(--secondary)}.theme-toggle{display:grid;place-items:center;width:34px;height:34px;background:transparent;border:1px solid var(--border);border-radius:50%;color:var(--secondary);font-size:22px}
main{max-width:1036px;margin:0 auto;padding:30px 28px 0}.page-heading{display:flex;align-items:center;justify-content:space-between;margin:0 0 25px}.eyebrow{display:flex;align-items:center;gap:7px;color:var(--green);font-size:var(--font-small,.9375rem);letter-spacing:normal;margin:0 0 7px}.eyebrow>span{width:6px;height:6px;border-radius:50%;background:#8cae94}h1{font-size:54px;line-height:1.1;letter-spacing:1px;margin:0;font-weight:750}.intro{font-size:var(--font-body,1rem);line-height:var(--line-body,1.625);color:var(--secondary);margin:8px 0 0}.heading-mark{height:70px;width:80px;border-radius:22px;display:flex;align-items:center;justify-content:center;background:var(--green-soft);transform:rotate(8deg);font-size:26px;font-weight:650;gap:5px;color:#526456;margin-right:9px}.heading-mark>span{font-size:var(--font-small,.9375rem);font-weight:400}
.play-layout{display:grid;grid-template-columns:minmax(0,1.23fr) minmax(0,1fr);gap:28px;align-items:start}.game-panel{position:relative;background:var(--surface);border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow);padding:22px}.game-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:17px}.score-pair{display:flex;gap:9px}.score-card{position:relative;min-width:100px;background:var(--green-soft);border:1px solid #729d7f18;border-radius:8px;text-align:center;padding:9px 13px}.score-card>span:first-child{display:block;font-size:var(--font-small,.9375rem);line-height:1.5;color:var(--secondary);letter-spacing:normal}.score-card>strong{display:block;color:var(--green);font-size:23px;line-height:1.3;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}.score-card.best{background:var(--soft)}.score-card.best>strong{color:var(--text)}.score-addition{position:absolute;left:0;right:0;top:23px;font-size:19px;font-weight:650;color:var(--green);pointer-events:none;animation:score-rise .65s ease-out both}.button{min-height:38px;padding:9px 13px;border:1px solid var(--border);border-radius:7px;background:var(--surface);color:var(--secondary);font-size:var(--font-body,1rem);white-space:nowrap}.button:hover{border-color:var(--green);color:var(--green)}.button.primary{background:var(--green);border-color:var(--green);color:#fff}.restart>span{font-size:17px;vertical-align:-1px;margin-right:3px}
.board{position:relative;aspect-ratio:1;width:100%;border-radius:10px;background:var(--board);padding:var(--gap);--gap:11px;touch-action:none;user-select:none;-webkit-user-select:none;outline-offset:4px}.board-grid{height:100%;display:grid;grid-template-rows:repeat(4,minmax(0,1fr));gap:var(--gap)}.grid-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gap)}.grid-cell{border-radius:6px;background:var(--cell)}.tile-layer{position:absolute;inset:var(--gap);pointer-events:none}.tile{position:absolute;left:calc(var(--x) * (100% + var(--gap)) / 4);top:calc(var(--y) * (100% + var(--gap)) / 4);width:calc((100% - 3 * var(--gap)) / 4);height:calc((100% - 3 * var(--gap)) / 4);display:grid;place-items:center;border-radius:6px;font-size:clamp(24px,3.9vw,44px);font-weight:730;letter-spacing:-1px;font-variant-numeric:tabular-nums;background:#eee4da;color:#665b4b;animation:tile-slide .12s ease-out}.tile-new{animation:tile-new .16s ease-out}.tile-merged{animation:tile-pop .18s ease-out}.tile-4{background:#ece1c7}.tile-8{background:#efb36f;color:#fff9ef}.tile-16{background:#ed9c62;color:#fffaf4}.tile-32{background:#ed845e;color:#fffaf4}.tile-64{background:#e76845;color:#fffaf4}.tile-128{background:#e4c266;color:#fffdf2;font-size:clamp(23px,3.5vw,37px)}.tile-256{background:#dfbb4f;color:#fffdf2;font-size:clamp(23px,3.5vw,37px)}.tile-512{background:#dcb13e;color:#fffdf2;font-size:clamp(23px,3.5vw,37px)}.tile-1024{background:#d4a42c;color:#fffdf2;font-size:clamp(20px,3.1vw,31px)}.tile-2048{background:#edc343;color:#fffdf2;font-size:clamp(20px,3.1vw,31px);box-shadow:0 0 22px #e9c54f65}.tile-super{background:#536f60;color:#fffdf2;font-size:clamp(17px,2.8vw,27px)}.tile-huge{font-size:clamp(11px,1.9vw,20px);letter-spacing:-.5px}
.game-status{min-height:20px;color:var(--green);font-size:var(--font-body,1rem);line-height:1.8;text-align:center;margin:14px 0 11px}.direction-controls{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.direction-controls>button{min-height:45px;display:flex;align-items:center;justify-content:center;gap:8px;background:var(--soft);border:1px solid var(--border);border-radius:7px;color:var(--secondary);font-size:var(--font-body,1rem);touch-action:manipulation}.direction-controls>button>span:first-child{font-size:21px}.direction-controls>button:hover:not(:disabled){background:var(--green-soft);border-color:var(--green);color:var(--green)}.controls-hint{color:var(--muted);font-size:var(--font-small,.9375rem);line-height:var(--line-body,1.625);text-align:center;margin:12px 0 0}.storage-note{color:var(--muted);font-size:var(--font-small,.9375rem);line-height:var(--line-body,1.625);text-align:center;border-top:1px solid var(--border);padding-top:13px;margin:13px 0 0}.storage-note.unavailable{color:#a0824e}.result{position:absolute;z-index:2;top:111px;left:33px;right:33px;aspect-ratio:1;border-radius:7px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:25px;background:#f5f3e9eb;backdrop-filter:blur(3px)}.result>span{font-size:37px;color:#b99b43}.result h2{font-size:var(--font-section,1.375rem);color:#5b654c;margin:11px 0 9px;line-height:1.4;font-weight:600}.result p{font-size:var(--font-body,1rem);line-height:var(--line-body,1.625);margin:0 0 22px;color:#526456;max-width:270px}.result>div{display:flex;flex-wrap:wrap;justify-content:center;gap:9px}.result .button{min-height:42px;font-size:var(--font-body,1rem);padding:11px 16px}
.guide{display:flex;flex-direction:column;gap:17px}.guide-card{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:27px 27px 22px;box-shadow:var(--shadow)}.guide-kicker{font-size:var(--font-small,.9375rem);color:var(--green);letter-spacing:normal}.guide h2{font-size:var(--font-section,1.375rem);line-height:1.5;margin:8px 0 22px;font-weight:600}.guide ol{list-style:none;margin:0;padding:0;counter-reset:step}.guide li{padding-left:29px;position:relative;margin:0 0 20px;counter-increment:step}.guide li:last-child{margin-bottom:0}.guide li:before{content:counter(step);position:absolute;left:0;top:1px;display:grid;place-items:center;border-radius:50%;width:18px;height:18px;background:var(--green-soft);color:var(--green);font-size:var(--font-body,1rem);font-weight:600}.guide li>strong{font-size:var(--font-body,1rem);line-height:1.8;font-weight:600}.guide li p{font-size:var(--font-body,1rem);color:var(--secondary);line-height:var(--line-body,1.625);margin:5px 0 0}.merge-example{display:flex;align-items:center;gap:8px;margin-top:13px}.merge-example>span{width:36px;height:36px;display:grid;place-items:center;border-radius:5px;background:#eee4da;color:#756a57;font-size:18px;font-weight:650}.merge-example>span:last-child{background:#ece1c7}.merge-example>b{font-size:var(--font-small,.9375rem);font-weight:400;color:var(--muted)}.tip-card{background:var(--green-soft);border:1px solid var(--border);border-radius:12px;padding:19px 20px;display:flex;gap:12px}.tip-card>span{font-size:25px;color:var(--green);line-height:1.2}.tip-card h2{font-size:var(--font-section,1.375rem);font-weight:600;margin:0 0 7px;line-height:1.7}.tip-card p{font-size:var(--font-body,1rem);color:var(--secondary);line-height:var(--line-body,1.625);margin:0}.play-note{text-align:center;color:var(--muted);font-size:var(--font-small,.9375rem);line-height:var(--line-body,1.625);margin:2px 0 0}
footer{display:flex;justify-content:space-between;gap:15px;align-items:center;border-top:1px solid var(--border);padding:23px 0 28px;margin-top:28px;font-size:var(--font-small,.9375rem);line-height:1.9;color:var(--muted)}footer a{color:var(--secondary)}dialog{padding:29px;border:1px solid var(--border);border-radius:15px;background:var(--surface);color:var(--text);width:min(390px,calc(100% - 34px));box-shadow:0 20px 90px #0003}dialog::backdrop{background:#17281e75;backdrop-filter:blur(3px)}dialog form{margin:0}.dialog-mark{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;color:var(--green);background:var(--green-soft);font-size:25px}dialog h2{font-size:var(--font-section,1.375rem);margin:18px 0 9px;line-height:1.5;font-weight:600}dialog p{font-size:var(--font-body,1rem);color:var(--secondary);line-height:var(--line-body,1.625);margin:0}.dialog-actions{display:flex;justify-content:flex-end;gap:9px;margin-top:25px}.noscript{position:fixed;inset:20% 15% auto;padding:25px;background:var(--surface);border:1px solid var(--border);z-index:10;font-size:16px;line-height:2}
[data-theme=dark] .button.primary{color:#183328}[data-theme=dark] .result{background:#23382eea}[data-theme=dark] .result h2{color:#dae5c5;font-weight:600}[data-theme=dark] .result p{color:#afbea2}[data-theme=dark] .result>span{color:#d5bb73}[data-theme=dark] .storage-note.unavailable{color:#cab082}
@keyframes tile-slide{from{transform:translate(calc(var(--move-x,0) * (100% + var(--gap))),calc(var(--move-y,0) * (100% + var(--gap))))}to{transform:translate(0,0)}}@keyframes tile-new{from{transform:scale(.5);opacity:.2}to{transform:scale(1);opacity:1}}@keyframes tile-pop{0%{transform:scale(.9)}50%{transform:scale(1.1)}100%{transform:scale(1)}}@keyframes score-rise{0%{transform:translateY(0);opacity:1}100%{transform:translateY(-32px);opacity:0}}
@media(min-width:1000px){.tile{font-size:44px}.tile-128,.tile-256,.tile-512{font-size:37px}.tile-1024,.tile-2048{font-size:31px}.tile-super{font-size:27px}.tile-huge{font-size:20px}}
@media(max-width:760px){main{max-width:540px;padding:25px 22px 0}.game-subheader{padding:0 22px;height:67px}.game-subheader nav{gap:15px}.brand strong{font-size:18px}.brand strong>span{font-size:var(--font-small,.9375rem);margin-left:7px}.play-layout{grid-template-columns:1fr;gap:22px}.page-heading{margin-bottom:21px}h1{font-size:47px}.heading-mark{width:67px;height:61px;font-size:23px}.game-panel{padding:20px}.score-card{min-width:103px}.board{--gap:11px}.tile{font-size:clamp(30px,9vw,46px)}.tile-128,.tile-256,.tile-512{font-size:clamp(27px,8vw,40px)}.tile-1024,.tile-2048{font-size:clamp(23px,6.8vw,34px)}.tile-super{font-size:clamp(18px,5.7vw,29px)}.tile-huge{font-size:clamp(13px,4vw,20px)}.result{top:109px;left:31px;right:31px}.guide-card{padding:24px 26px}.guide h2{margin-bottom:20px;font-weight:600}.guide li{margin-bottom:19px}.guide li p{font-size:var(--font-body,1rem)}.guide li>strong{font-size:var(--font-body,1rem)}.guide-kicker{font-size:var(--font-small,.9375rem)}.guide{gap:15px}.play-note{display:none}.tip-card p{font-size:var(--font-body,1rem)}.tip-card h2{font-size:var(--font-section,1.375rem);font-weight:600}footer{flex-direction:column;align-items:flex-start;gap:8px;padding:19px 0 24px;margin-top:22px}.controls-hint{font-size:var(--font-small,.9375rem)}.game-status{font-size:var(--font-body,1rem)}}
@media(max-width:390px){main{padding:22px 15px 0}.game-subheader{padding:0 16px}.game-subheader nav>a{font-size:var(--font-body,1rem)}.game-subheader nav{gap:11px}.game-panel{padding:15px;border-radius:13px}.score-card{min-width:85px;padding:8px 9px}.score-card>strong{font-size:22px}.score-pair{gap:7px}.game-toolbar{gap:8px}.restart{font-size:var(--font-body,1rem);padding:8px 9px}.board{--gap:8px}.result{top:103px;left:23px;right:23px;padding:15px}.result h2{font-size:var(--font-section,1.375rem);font-weight:600}.result p{font-size:var(--font-body,1rem);margin-bottom:15px}.result>span{font-size:30px}.intro{font-size:var(--font-body,1rem)}.game-status{font-size:var(--font-body,1rem)}.guide-card{padding:23px}.direction-controls>button{min-height:43px}.controls-hint{font-size:var(--font-small,.9375rem)}.storage-note{font-size:var(--font-small,.9375rem)}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}
.board-frame{position:relative}.board-frame>.result{inset:11px;aspect-ratio:auto}
@media(max-width:390px){.board-frame>.result{inset:8px}}
/* Keep the whole playing area visible on common 720px-high desktop screens. */
@media(min-width:761px) and (max-height:800px){
  .game-subheader{height:64px}
  main{padding-top:20px}
  .page-heading{margin-bottom:16px}
  .page-heading>div{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:18px;align-items:center}
  .page-heading .eyebrow{grid-column:2;grid-row:1;margin:0;font-size:var(--font-small,.9375rem)}
  .page-heading h1{grid-column:1;grid-row:1/3;font-size:40px}
  .page-heading .intro{grid-column:2;grid-row:2;margin:4px 0 0;font-size:var(--font-body,1rem)}
  .heading-mark{height:54px;width:62px;border-radius:17px;font-size:22px}
  .play-layout{grid-template-columns:360px minmax(0,1fr);gap:24px}
  .game-panel{padding:16px}
  .game-toolbar{margin-bottom:12px}
  .score-card{min-width:82px;padding:7px 10px}
  .score-card>strong{font-size:22px}
  .restart{font-size:var(--font-body,1rem);padding:8px 10px}
  .board{--gap:9px}
  .board-frame>.result{inset:9px}
  .game-status{font-size:var(--font-body,1rem);min-height:18px;margin:10px 0 8px}
  .direction-controls>button{min-height:40px}
  .controls-hint{font-size:var(--font-small,.9375rem);margin-top:8px}
  .storage-note{font-size:var(--font-small,.9375rem);margin-top:10px;padding-top:9px}
  .tile{font-size:36px}
  .tile-128,.tile-256,.tile-512{font-size:31px}
  .tile-1024,.tile-2048{font-size:26px}
  .tile-super{font-size:22px}
  .tile-huge{font-size:16px}
  .result h2{font-size:var(--font-section,1.375rem);font-weight:600}
  .result p{font-size:var(--font-body,1rem);margin-bottom:17px}
  .guide-card{padding:23px 25px 21px}
  .guide h2{margin-bottom:18px;font-weight:600}
  .guide li{margin-bottom:17px}
  .guide li:last-child{margin-bottom:0}
}