@font-face {
font-family: 'Outfit';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/outfit/v15/QGYyz_MVcBeNP4NjuGObqx1XmO1I4TC1C4E.ttf) format('truetype');
}
@font-face {
font-family: 'Outfit';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(https://fonts.gstatic.com/s/outfit/v15/QGYyz_MVcBeNP4NjuGObqx1XmO1I4e6yC4E.ttf) format('truetype');
}
@font-face {
font-family: 'Outfit';
font-style: normal;
font-weight: 800;
font-display: swap;
src: url(https://fonts.gstatic.com/s/outfit/v15/QGYyz_MVcBeNP4NjuGObqx1XmO1I4bCyC4E.ttf) format('truetype');
}


:root {
--bg-color: #faf8ef;
--board-bg: #bbada0;
--cell-bg: rgba(238, 228, 218, 0.35);
--text-primary: #776e65;
--text-secondary: #a3998f;
--white: #f9f6f2;

/* Tile colors - Calm pastel/earthy palette */
--t-2: #eee4da;
--t-4: #ede0c8;
--t-8: #f2b179;
--t-16: #f59563;
--t-32: #f67c5f;
--t-64: #f65e3b;
--t-128: #edcf72;
--t-256: #edcc61;
--t-512: #edc850;
--t-1024: #edc53f;
--t-2048: #edc22e;
--t-super: #3c3a32;

/* Grid layout constants */
--gap: 3%;
--size: 22.75%;
--step: 25.75%;
/* size + gap */
}

.bpofgame * {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
user-select: none;
-webkit-user-select: none;
}

.bpofgame{
background-color: var(--bg-color);
color: var(--text-primary);
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
overflow: hidden;
position: relative;
}

/* Background removed for calmness */
.background-animation {
display: none;
}

/* App Container */
.app-container {
width: 100%;
/*max-width: 500px;*/
padding:10px;
display: flex;
flex-direction: column;
gap:10px;
z-index: 1;
}

/* Header */
.header {
display: flex;
justify-content: space-between;
align-items: center;
}



.score-container {
display: flex;
gap: 12px;
}

.score-box {
background: #bbada0;
padding: 8px 16px;
border-radius: 6px;
display: flex;
flex-direction: column;
align-items: center;
position: relative;
color: white;
}

.score-label {
font-size: 0.75rem;
font-weight: 600;
color: #eee4da;
letter-spacing: 1px;
}

.score-value {
font-size: 1.5rem;
font-weight: 800;
}

.score-addition {
position: absolute;
bottom: -15px;
font-size: 1.2rem;
font-weight: bold;
color: rgba(119, 110, 101, 0.9);
opacity: 0;
pointer-events: none;
}

.score-addition.active {
animation: popup 0.6s ease-out;
}

@keyframes popup {
0% {
opacity: 1;
transform: translateY(0);
}

100% {
opacity: 0;
transform: translateY(-40px);
}
}

/* Controls */
.controls {
display: flex;
justify-content: space-between;
align-items: center;
}

.instruction {
color: var(--text-secondary);
font-size: 1rem;
}

.instruction strong {
color: var(--text-primary);
}

.btn-primary,
.btn-secondary {
padding: 12px 20px;
border-radius: 6px;
border: none;
font-size: 1rem;
font-weight: 600;
cursor: pointer;
transition: all 0.2s ease;
}

.btn-primary {
background: #8f7a66;
color: var(--white);
box-shadow: none;
}

.btn-primary:hover {
background: #9f8b77;
transform: none;
box-shadow: none;
}

.btn-primary:active {
transform: translateY(1px);
}

.btn-secondary {
background: rgba(238, 228, 218, 0.73);
color: var(--text-primary);
border: 1px solid rgba(0, 0, 0, 0.1);
backdrop-filter: none;
}

.btn-secondary:hover {
background: rgba(238, 228, 218, 1);
}

/* Game Board */
.game-board {
transform-origin:top center;
position: relative;
width: 100%;
aspect-ratio: 1 / 1;
background: var(--board-bg);
backdrop-filter: none;
-webkit-backdrop-filter: none;
border: none;
border-radius: 6px;
padding: 3%;
box-shadow: none;
}

.grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(4, 1fr);
gap: var(--gap);
width: 100%;
height: 100%;
}

.grid-cell {
background: var(--cell-bg);
border-radius: 3px;
box-shadow: none;
}

.tile-container {
position: absolute;
top: 3%;
left: 3%;
width: 94%;
height: 94%;
pointer-events: none;
}

.tile {
position: absolute;
width: var(--size);
height: var(--size);
border-radius: 3px;
display: flex;
justify-content: center;
align-items: center;
font-size: 80px;
font-weight: 800;
transition: transform 150ms ease-in-out;
z-index: 10;
}

/* Base translation via CSS vars */
.tile {
transform: translate(calc(var(--x) * 113.1868%), calc(var(--y) * 113.1868%));
}

/* Inner element for scaling animations */
.tile-inner {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
border-radius: 3px;
animation: appear 200ms ease cubic-bezier(0.175, 0.885, 0.32, 1.275);
background: inherit;
position: absolute;
top: 0;
left: 0;
}

@keyframes appear {
0% {
transform: scale(0);
}

100% {
transform: scale(1);
}
}

.tile.merged .tile-inner {
animation: pop 200ms ease-in-out;
}

@keyframes pop {
0% {
transform: scale(1);
}

50% {
transform: scale(1.2);
}

100% {
transform: scale(1);
}
}

/* Tile Dynamic Coloring via inline CSS variable --bg applied in JS, and we map it */
/* But we can also just use simple classes generated in JS */
.tile-2 .tile-inner {
background: var(--t-2);
color: var(--text-primary);
}

.tile-4 .tile-inner {
background: var(--t-4);
color: var(--text-primary);
}

.tile-8 .tile-inner {
background: var(--t-8);
color: var(--white);
}

.tile-16 .tile-inner {
background: var(--t-16);
color: var(--white);
font-size: 70px;
}

.tile-32 .tile-inner {
background: var(--t-32);
color: var(--white);
font-size: 70px;
}

.tile-64 .tile-inner {
background: var(--t-64);
color: var(--white);
font-size: 70px;
}

.tile-128 .tile-inner {
background: var(--t-128);
color: var(--white);
font-size: 60px;
box-shadow: 0 0 10px rgba(243, 215, 116, 0.3);
}

.tile-256 .tile-inner {
background: var(--t-256);
color: var(--white);
font-size: 60px;
box-shadow: 0 0 10px rgba(243, 215, 116, 0.4);
}

.tile-512 .tile-inner {
background: var(--t-512);
color: var(--white);
font-size: 60px;
box-shadow: 0 0 12px rgba(243, 215, 116, 0.5);
}

.tile-1024 .tile-inner {
background: var(--t-1024);
color: var(--white);
font-size: 50px;
box-shadow: 0 0 15px rgba(243, 215, 116, 0.6);
}

.tile-2048 .tile-inner {
background: var(--t-2048);
color: var(--white);
font-size: 50px;
box-shadow: 0 0 20px rgba(243, 215, 116, 0.8);
}

.tile-super .tile-inner {
background: var(--t-super);
color: var(--white);
font-size: 1.4rem;
}

/* Font size adjustments for large numbers */
@media (max-width: 400px) {
.tile {
font-size:50px;
}

.tile-128 .tile-inner,
.tile-256 .tile-inner,
.tile-512 .tile-inner {
font-size: 40px;
}

.tile-1024 .tile-inner,
.tile-2048 .tile-inner,
.tile-super .tile-inner {
font-size:30px;
}


}

/* Game Over Message Overlay */
.game-message {
display: none;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(238, 228, 218, 0.85);
backdrop-filter: none;
-webkit-backdrop-filter: none;
z-index: 100;
flex-direction: column;
justify-content: center;
align-items: center;
border-radius: 6px;
animation: fade-in 0.5s ease;
}

.game-message.active {
display: flex;
}

.game-message h2 {
font-size: 3rem;
font-weight: 800;
margin-bottom: 10px;
text-shadow: none;
color: var(--text-primary);
}

.game-message.won h2 {
color: var(--text-primary);
background: none;
-webkit-background-clip: unset;
background-clip: unset;
-webkit-text-fill-color: unset;
}

.game-message p {
font-size: 1.2rem;
margin-bottom: 30px;
color: var(--text-secondary);
}

.game-message .lower {
display: flex;
flex-direction: column;
align-items: center;
gap: 15px;
}

.game-message .lower .btn-secondary {
display: none;
/* Only show Keep Going when won */
}

.game-message.won .lower .btn-secondary {
display: block;
}

@keyframes fade-in {
0% {
opacity: 0;
}

100% {
opacity: 1;
}
}



@media (min-width: 768px) {

}
/* Mobile Performance Fixes */
.bpofgame{
touch-action: none !important;
user-select: none !important;
-webkit-user-select: none !important;
overscroll-behavior: none !important;
}
.bpofgame * {
-webkit-tap-highlight-color: transparent !important;
}
canvas, .game-container {
transform: translateZ(0);
}