:root{--game-size:500px;--game-padding:15px;--gap-size:14px;--cell-size:106px;--tile-size:106px;--tile-line-height:106px;--tile-step:120px;--font-display:Syne,'Syne Fallback',sans-serif;--font-mono:'Space Mono','Space Mono Fallback',monospace;--transition-fast:150ms ease;--transition-base:280ms cubic-bezier(.4,0,.2,1);--transition-slow:400ms cubic-bezier(.4,0,.2,1);--radius-sm:6px;--radius-md:10px;--radius-lg:16px;--radius-pill:999px}
[data-theme="dark"],:root{--bg-page:#0f0f13;--toggle-off:#323038;--toggle-on:#404f10;--bg-surface:#18181f;--bg-elevated:#22222e;--bg-board:#1c1c26;--bg-cell:#ffffff0f;--text-primary:#f0eef8;--text-secondary:#dfdbf3;--text-muted:#c2bef0;--accent-1:#c8ff00;--accent-2:#7c3aed;--accent-3:#06b6d4;--border-color:#ffffff14;--shadow-color:#0009;--score-bg:#22222e;--score-text:#f0eef8;--score-label:#9895a8;--nav-bg:#18181f;--nav-border:#c8ff0026;--nav-text:#d0cede;--nav-hover:#c8ff001a;--nav-active:#c8ff002e;--btn-bg:#c8ff001f;--btn-text:#c8ff00;--btn-border:#c8ff004d;--btn-hover-bg:#c8ff00;--btn-hover-text:#0f0f13;--msg-won:#c8ff0026;--msg-over:#0f0f13d9}
[data-theme="light"]{--bg-page:#f8f7ff;--bg-surface:#fff;--toggle-off:#afa8bb;--toggle-on:#18181f;--bg-elevated:#f0eef8;--bg-board:#e8e5f5;--bg-cell:#0000000f;--text-primary:#12101e;--text-secondary:#242231;--text-muted:#35343b;--accent-1:#5b21b6;--accent-2:#7c3aed;--accent-3:#0891b2;--border-color:#00000014;--shadow-color:#00000026;--score-bg:#ede9fe;--score-text:#12101e;--score-label:#5a5678;--nav-bg:#fff;--nav-border:#5b21b626;--nav-text:#3d3a52;--nav-hover:#5b21b614;--nav-active:#5b21b61f;--btn-bg:#5b21b614;--btn-text:#5b21b6;--btn-border:#5b21b640;--btn-hover-bg:#5b21b6;--btn-hover-text:#fff;--msg-won:#5b21b626;--msg-over:#f8f7ffe0}
*,::before,::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--font-display);background:var(--bg-page);color:var(--text-primary);line-height:1.65;min-height:100vh;transition:background var(--transition-slow),color var(--transition-slow);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
a{color:var(--accent-1);text-decoration:underline;text-underline-offset:3px;font-weight:600;transition:opacity var(--transition-fast)}
a:hover{opacity:.75}
p{margin-bottom:.9rem;line-height:1.7}
hr{border:none;border-top:1px solid var(--border-color);margin:2.5rem 0}
.navbar{background:var(--nav-bg);border-bottom:1px solid var(--nav-border);position:sticky;top:0;z-index:100;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);transition:background var(--transition-slow),border-color var(--transition-slow)}
.navbar .container-fluid{max-width:720px;margin:0 auto;padding:0 20px;display:flex;align-items:center;gap:1rem;height:52px}
.navbar-brand{display:flex;align-items:center;gap:.4rem;font-family:var(--font-mono);font-weight:700;font-size:.85rem;color:var(--accent-1);text-decoration:none;flex-shrink:0;letter-spacing:.02em}
.brand-icon{font-size:1.1rem}
.navbar .nav{list-style:none;display:flex;align-items:center;gap:2px;flex:1}
.navbar .nav li a{display:block;color:var(--nav-text);padding:5px 12px;border-radius:var(--radius-sm);font-size:.82rem;font-weight:600;text-decoration:none;letter-spacing:.03em;text-transform:uppercase;transition:background var(--transition-fast),color var(--transition-fast)}
.navbar .nav li a:hover{background:var(--nav-hover);color:var(--text-primary)}
.navbar .nav li.active a{background:var(--nav-active);color:var(--accent-1)}
.theme-toggle{width:38px;height:38px;border-radius:var(--radius-pill);border:1px solid var(--border-color);background:var(--bg-elevated);color:var(--text-primary);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:1rem;flex-shrink:0;margin-left:auto;transition:background var(--transition-fast),border-color var(--transition-fast),transform var(--transition-fast)}
.theme-toggle:hover{border-color:var(--accent-1);transform:scale(1.05)}
.theme-toggle::before{content:'☀️'}
[data-theme="dark"] .theme-toggle::before{content:'🌙'}
.container{max-width:580px;margin:0 auto;padding:28px 20px 48px}
.heading{display:flex;align-items:flex-end;justify-content:space-between;gap:1.5rem;margin-bottom:20px;flex-wrap:wrap}
.heading-left{flex-shrink:0}
h1.title{font-family:var(--font-display);font-size:clamp(1.6rem,5vw,2.4rem);font-weight:800;letter-spacing:-.03em;line-height:1.1;color:var(--text-primary)}
h1.title .accent{color:var(--accent-1)}
.subtitle{font-size:.78rem;color:var(--text-secondary);letter-spacing:.06em;text-transform:uppercase;font-family:var(--font-mono);margin:4px 0 0}
.scores-container{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.score-container,.best-container{background:var(--score-bg);border:1px solid var(--border-color);border-radius:var(--radius-md);padding:11px 14px 2px;text-align:center;min-width:70px;position:relative;transition:background var(--transition-slow)}
.score-container::after{content:"SCORE"}
.best-container::after{content:"BEST"}
.score-container::after,.best-container::after{position:absolute;top:2px;left:0;right:0;text-align:center;font-size:10px;font-weight:700;letter-spacing:1px;text-transform:uppercase;opacity:.85;line-height:1}
.score-label{display:block;font-family:var(--font-mono);font-size:.58rem;letter-spacing:.12em;text-transform:uppercase;color:var(--score-label);margin-bottom:2px}
.score-value{display:block;font-family:var(--font-mono);font-size:1.1rem;font-weight:700;color:var(--score-text);line-height:1.2}
@keyframes move-up {
0%{top:25px;opacity:1}
100%{top:-50px;opacity:0}
}
.score-container .score-addition,.best-container .score-addition{position:absolute;right:8px;top:25px;font-family:var(--font-mono);font-size:.9rem;font-weight:700;color:var(--accent-1);z-index:100;pointer-events:none;animation:move-up 600ms ease-in both}
.restart-button{display:inline-flex;align-items:center;justify-content:center;background:var(--btn-bg);color:var(--btn-text);border:1px solid var(--btn-border);border-radius:var(--radius-sm);padding:9px 18px;font-family:var(--font-mono);font-size:.75rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;text-decoration:none;cursor:pointer;white-space:nowrap;transition:background var(--transition-fast),color var(--transition-fast),border-color var(--transition-fast),transform var(--transition-fast)}
.restart-button:hover{background:var(--btn-hover-bg);color:var(--btn-hover-text);border-color:transparent;transform:translateY(-1px);text-decoration:none}
@keyframes fade-in {
from{opacity:0}
to{opacity:1}
}
.data-setting{background:var(--bg-card);border-radius:14px;padding:7px 10px;margin-bottom:16px;box-shadow:var(--shadow-sm);transition:background var(.25s ease in-out)}
.data-setting hr{display:none}
.setting-title.toggle{color:var(--text);font-family:var(--font-display);font-size:15px;font-weight:800;margin-bottom:2px}
.setting-desc.toggle{text-align:left;max-width:82%;display:inline-block}
.setting-desc{color:var(--text-muted);font-size:13px;line-height:1.4}
.data-setting .checkbox{width:48px;position:absolute;right:18px;top:50%;transform:translateY(-50%);margin:0}
.data-setting{position:relative}
.checkbox .label_check{display:block}
.checkbox input[type=checkbox]{display:none}
.checkbox input[type=checkbox] + .check_text{position:relative;display:block;width:48px;height:26px;cursor:pointer;text-indent:-9999px;border-radius:100px;background:var(--toggle-off);transition:background var(.25s ease in-out)}
.checkbox input[type=checkbox]:checked + .check_text{background:var(--toggle-on)}
.checkbox input[type=checkbox] + .check_text::after{position:absolute;top:3px;left:3px;width:20px;height:20px;content:'';transition:left .2s linear;border-radius:50%;background:#fff;box-shadow:0 1px 4px #0003}
.checkbox input[type=checkbox]:checked + .check_text::after{left:25px}
.game-container{position:relative;width:var(--game-size);height:var(--game-size);padding:var(--game-padding);background:var(--bg-board);border:1px solid var(--border-color);border-radius:var(--radius-lg);box-shadow:0 20px 60px var(--shadow-color),0 0 0 1px #ffffff08;cursor:default;-webkit-user-select:none;user-select:none;touch-action:none;box-sizing:border-box;transition:background var(--transition-slow),border-color var(--transition-slow);margin:0 auto}
.game-container .game-message{display:none;position:absolute;inset:0;border-radius:var(--radius-lg);background:var(--msg-over);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);z-index:100;text-align:center;animation:fade-in 800ms ease 1200ms both}
.game-container .game-message p{font-family:var(--font-display);font-size:clamp(2rem,8vw,3.5rem);font-weight:800;color:var(--text-primary);margin:0;position:absolute;top:50%;left:50%;transform:translate(-50%,-70%);width:90%;letter-spacing:-.03em}
.game-container .game-message .lower{position:absolute;bottom:30%;left:50%;transform:translateX(-50%);display:flex;gap:10px;white-space:nowrap}
.game-container .game-message a{display:inline-flex;align-items:center;justify-content:center;background:var(--bg-elevated);border:1px solid var(--border-color);border-radius:var(--radius-sm);padding:8px 18px;font-family:var(--font-mono);font-size:.75rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;text-decoration:none;color:var(--text-primary);cursor:pointer;transition:background var(--transition-fast),color var(--transition-fast)}
.game-container .game-message a:hover{background:var(--accent-1);color:#0f0f13;border-color:transparent}
.game-container .game-message a.keep-playing-button{display:none}
.game-container .game-message.game-won{background:var(--msg-won)}
.game-container .game-message.game-won a.keep-playing-button{display:inline-flex}
.game-container .game-message.game-won,.game-container .game-message.game-over{display:block}
.grid-container{position:absolute;z-index:1;top:var(--game-padding);left:var(--game-padding)}
.grid-row{display:flex;gap:var(--gap-size);margin-bottom:var(--gap-size)}
.grid-row:last-child{margin-bottom:0}
.grid-cell{width:var(--cell-size);height:var(--cell-size);border-radius:var(--radius-sm);background:var(--bg-cell);flex-shrink:0}
.tile-container{position:absolute;z-index:2;top:var(--game-padding);left:var(--game-padding)}
.tile,.tile .tile-inner{width:var(--tile-size);height:var(--tile-size);line-height:var(--tile-line-height)}
.tile{position:absolute;transition:transform 100ms ease-in-out}
.tile .tile-inner{border-radius:var(--radius-sm);background:var(--bg-elevated);text-align:center;font-family:var(--font-mono);font-weight:700;font-size:1.5rem;color:var(--text-primary);position:relative;z-index:10;box-shadow:0 4px 16px #0000004d;transition:background var(--transition-fast),color var(--transition-fast);display:flex;align-items:center;justify-content:center;    background-position: center !important;background-size: cover !important;background-repeat: no-repeat !important;line-height:1}
.tile .tile-inner .tile-text{font-weight:600;font-size:.875rem;line-height:1;text-align:center;margin:0;padding:2px 4px;min-width:1.25rem;position:absolute;right:0;bottom:0;color:#fffffff2;background:#000000b3;text-shadow:0 0 2px #000;border-bottom-right-radius:8px;border-top-left-radius:6px;font-family:var(--font-body)}
.tile-text.hide{display:none}
.tile-2 .tile-inner{background:#1e1e2a;color:#b0aec8;font-size:2rem;background-image:url(img/2.jpg)}
.tile-4 .tile-inner{background:#242334;color:#c8c6e0;font-size:2rem;background-image:url(img/4.jpg)}
.tile-8 .tile-inner{background:#2d1b4e;color:#c4b5fd;font-size:2rem;background-image:url(img/8.jpg)}
.tile-16 .tile-inner{background:#1a2d4a;color:#67e8f9;font-size:1.8rem;background-image:url(img/16.jpg)}
.tile-32 .tile-inner{background:#1a3a2a;color:#6ee7b7;font-size:1.8rem;background-image:url(img/32.jpg)}
.tile-64 .tile-inner{background:#3a2a10;color:#fbbf24;font-size:1.8rem;background-image:url(img/64.jpg)}
.tile-128 .tile-inner{background:#3a1a1a;color:#fca5a5;font-size:1.5rem;background-image:url(img/128.jpg)}
.tile-256 .tile-inner{background:#1a1a3a;color:#a5b4fc;font-size:1.5rem;background-image:url(img/256.jpg)}
.tile-512 .tile-inner{background:#0a2a2a;color:var(--accent-3);font-size:1.4rem;background-image:url(img/512.jpg)}
.tile-1024 .tile-inner{background:linear-gradient(135deg,#0f2a1a 0%,#1a3a0a 100%);color:var(--accent-1);font-size:1.1rem;box-shadow:0 0 20px #c8ff0040;background-image:url(img/1024.jpg)}
.tile-2048 .tile-inner{background:linear-gradient(135deg,#2d0066 0%,#0a0a40 100%);color:#fff;font-size:1rem;box-shadow:0 0 32px #7c3aed99 0 0 0 2px #c8ff0066;animation:glow-pulse 1.5s ease-in-out infinite alternate;background-image:url(img/2048.jpg)}
@keyframes glow-pulse {
from{box-shadow:0 0 20px #7c3aed80 0 0 0 2px #c8ff004d}
to{box-shadow:0 0 40px #7c3aede6 0 0 0 2px #c8ff00b3}
}
.tile.tile-position-1-1{transform:translate(0px,0px)}
.tile.tile-position-1-2{transform:translate(0px,120px)}
.tile.tile-position-1-3{transform:translate(0px,240px)}
.tile.tile-position-1-4{transform:translate(0px,360px)}
.tile.tile-position-2-1{transform:translate(120px,0px)}
.tile.tile-position-2-2{transform:translate(120px,120px)}
.tile.tile-position-2-3{transform:translate(120px,240px)}
.tile.tile-position-2-4{transform:translate(120px,360px)}
.tile.tile-position-3-1{transform:translate(240px,0px)}
.tile.tile-position-3-2{transform:translate(240px,120px)}
.tile.tile-position-3-3{transform:translate(240px,240px)}
.tile.tile-position-3-4{transform:translate(240px,360px)}
.tile.tile-position-4-1{transform:translate(360px,0px)}
.tile.tile-position-4-2{transform:translate(360px,120px)}
.tile.tile-position-4-3{transform:translate(360px,240px)}
.tile.tile-position-4-4{transform:translate(360px,360px)}
@keyframes appear {
0%{opacity:0;transform:scale(0) translate(var(--tx,0),var(--ty,0))}
60%{opacity:1;transform:scale(1.1) translate(var(--tx,0),var(--ty,0))}
100%{opacity:1;transform:scale(1) translate(var(--tx,0),var(--ty,0))}
}
@keyframes pop {
0%{transform:scale(0)}
50%{transform:scale(1.15)}
100%{transform:scale(1)}
}
.tile-new .tile-inner{animation:appear 200ms ease 100ms backwards}
.tile-merged .tile-inner{z-index:20;animation:pop 200ms ease 100ms backwards}
.game-explanation{margin-top:18px;text-align:center;font-size:.8rem;color:var(--text-secondary);font-family:var(--font-mono)}
.key-hint{display:inline-block;background:var(--bg-elevated);border:1px solid var(--border-color);border-radius:4px;padding:1px 7px;font-family:var(--font-mono);font-size:.75rem;color:var(--accent-1)}
.share-section{margin-top:32px;text-align:center}
.share-label{font-family:var(--font-mono);font-size:.65rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text-muted);margin-bottom:12px}
.share-buttons{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.share-btn{display:inline-flex;align-items:center;gap:7px;padding:9px 16px;border-radius:var(--radius-sm);border:1px solid var(--border-color);background:var(--bg-elevated);color:var(--text-secondary);font-family:var(--font-mono);font-size:.75rem;font-weight:700;letter-spacing:.04em;cursor:pointer;text-decoration:none;transition:background var(--transition-fast),color var(--transition-fast),border-color var(--transition-fast),transform var(--transition-fast);white-space:nowrap}
.share-btn:hover{transform:translateY(-2px);color:#fff}
.share-btn--facebook:hover{background:#1877f2;border-color:#1877f2}
.share-btn--twitter:hover{background:#000;border-color:#000}
.share-btn--whatsapp:hover{background:#25d366;border-color:#25d366;color:#000}
.share-btn--copy:hover{background:var(--accent-2);border-color:var(--accent-2)}
#shareResult{display:flex}
#shareResultMobile{display:none}
@media (max-width: 480px) {
#shareResult{display:none}
#shareResultMobile{display:flex}
.share-btn--copy{width:100%;justify-content:center}
}
.content-section{margin-top:16px}
.content-section h2{font-family:var(--font-display);font-size:1.2rem;font-weight:800;color:var(--text-primary);margin:2rem 0 .75rem;letter-spacing:-.02em}
.content-section h2:first-child{margin-top:0}
.content-section p{font-size:.95rem;color:var(--text-secondary);line-height:1.75}
.steps-list{list-style:none;display:flex;flex-direction:column;gap:12px;margin:1rem 0 1.5rem}
.steps-list li{display:flex;align-items:flex-start;gap:14px;background:var(--bg-surface);border:1px solid var(--border-color);border-radius:var(--radius-md);padding:14px 16px;transition:border-color var(--transition-fast)}
.steps-list li:hover{border-color:#c8ff0040}
.step-number{font-family:var(--font-mono);font-size:.7rem;font-weight:700;color:var(--accent-1);letter-spacing:.05em;flex-shrink:0;padding-top:2px}
.step-content{font-size:.9rem;color:var(--text-secondary);line-height:1.6}
.step-content strong{color:var(--text-primary)}
.tips-list{padding-left:0;list-style:none;margin:.75rem 0 1.5rem;display:flex;flex-direction:column;gap:8px}
.tips-list li{font-size:.9rem;color:var(--text-secondary);padding:10px 14px;border-left:2px solid var(--accent-2);background:var(--bg-surface);border-radius:0 var(--radius-sm) var(--radius-sm) 0;line-height:1.6}
.tips-list li strong{color:var(--text-primary)}
.faq-list{display:flex;flex-direction:column;gap:8px;margin:.75rem 0 1.5rem}
.faq-item{background:var(--bg-surface);border:1px solid var(--border-color);border-radius:var(--radius-md);overflow:hidden;transition:border-color var(--transition-fast)}
.faq-item[open]{border-color:#c8ff0033}
.faq-question{padding:14px 16px;font-family:var(--font-display);font-size:.95rem;font-weight:700;color:var(--text-primary);cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;transition:background var(--transition-fast);user-select:none}
.faq-question::-webkit-details-marker{display:none}
.faq-question::after{content:'+';font-family:var(--font-mono);font-size:1.2rem;color:var(--accent-1);flex-shrink:0;transition:transform var(--transition-fast)}
.faq-item[open] .faq-question::after{content:'−'}
.faq-question:hover{background:var(--bg-elevated)}
.faq-answer{padding:0 16px 14px;font-size:.88rem;color:var(--text-secondary);line-height:1.7;margin:0}
footer{text-align:center;padding:20px 0 0}
footer p{font-size:.8rem;color:var(--text-muted);margin-bottom:.4rem;font-family:var(--font-mono)}
.disclaimer{font-size:.72rem!important;max-width:540px;margin:0 auto;line-height:1.6!important;color:var(--text-muted)!important;opacity:.75}
@media screen and (max-width: 600px) {
.container{padding:20px 16px 40px}
.heading{flex-direction:column;align-items:flex-start;gap:.75rem}
.scores-container{width:100%}
.score-container,.best-container{flex:1;min-width:0}
.restart-button{width:100%}
}
@media screen and (max-width: 519px) {
:root{--game-size:calc(100vw - 32px);--game-padding:10px;--gap-size:10px;--cell-size:calc((100vw - 32px - 20px - 30px) / 4);--tile-size:var(--cell-size);--tile-line-height:var(--cell-size);--tile-step:calc(var(--cell-size) + 10px)}
.game-container{width:var(--game-size);height:var(--game-size);margin:0 auto}
.game-container .game-message p{font-size:1.6rem;transform:translate(-50%,-60%)}
.game-container .game-message .lower{bottom:25%}
.tile .tile-inner{font-size:clamp(.6rem,4.5vw,1.2rem)!important}
.tile-2 .tile-inner,.tile-4 .tile-inner{font-size:clamp(.9rem,5.5vw,1.4rem)!important}
h1.title{font-size:1.5rem}
}
@media (prefers-reduced-motion: reduce) {
*,::before,::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}
.lang-switcher{position:relative}
.lang-trigger{display:flex;align-items:center;gap:6px;padding:5px 10px 5px 8px;border-radius:20px;border:.5px solid var(--border-strong,#fff3);background:var(--surface-2,#2e2e36);cursor:pointer;font-size:13px;font-weight:500;color:var(--text-primary);white-space:nowrap;transition:border-color .15s,background .15s;user-select:none}
.lang-trigger:hover{border-color:var(--border-accent,#378add);background:var(--bg-accent,#378add1a)}
.lang-trigger .flag{font-size:16px;line-height:1}
.lang-trigger .code{font-size:12px;letter-spacing:.04em;color:var(--text-secondary)}
.lang-trigger .chevron{font-size:13px;color:var(--text-muted);margin-left:1px;transition:transform .2s}
.lang-switcher.open .chevron{transform:rotate(180deg)}
.lang-dropdown{position:absolute;right:0;top:calc(100% + 6px);background:var(--surface-2,#2e2e36);border:.5px solid var(--border-strong,#ffffff2e);border-radius:12px;padding:5px;min-width:150px;display:none;flex-direction:column;gap:2px;z-index:100}
.lang-switcher.open .lang-dropdown{display:flex}
.lang-option{display:flex;align-items:center;gap:10px;padding:7px 10px;border-radius:8px;text-decoration:none;color:var(--text-primary);font-size:13px;transition:background .12s}
.lang-option:hover{background:var(--surface-1)}
.lang-option.lang-active{background:var(--bg-accent,#378add24);color:var(--text-accent,#378add);font-weight:500}
.lang-option .flag{font-size:18px;line-height:1;flex-shrink:0}
.lang-option .check{font-size:13px;color:var(--text-accent,#378add);margin-left:auto}
@media (max-width: 480px) {
.lang-dropdown{right:auto;left:0}
}