.t-main { flex: 1; display: flex; justify-content: center; padding: 20px 16px 32px; }
.t-wrap { width: 100%; max-width: 440px; display: flex; flex-direction: column; align-items: center; }
.t-board { --gap: 10px; position: relative; width: 100%; aspect-ratio: 1; padding: var(--gap); border-radius: 22px; background: #dcdce3; touch-action: none; box-shadow: inset 0 1px 2px rgba(0,0,0,0.06); }
.t-cells, .t-tiles { position: absolute; inset: var(--gap); }
.t-cells { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(4, 1fr); gap: var(--gap); }
.t-cells div { border-radius: 14px; background: rgba(255,255,255,0.55); }
.t-tile { position: absolute; display: flex; align-items: center; justify-content: center; border-radius: 14px; font-weight: 700; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; transition: transform 0.11s cubic-bezier(0.22, 1, 0.36, 1); will-change: transform; box-shadow: inset 0 -3px 0 rgba(0,0,0,0.12), inset 0 2px 0 rgba(255,255,255,0.25); }
.t-tile.new { animation: t-new 0.18s cubic-bezier(0.22, 1, 0.36, 1); }
.t-tile.merged { animation: t-pop 0.2s cubic-bezier(0.22, 1, 0.36, 1); z-index: 2; }
@keyframes t-new { from { opacity: 0; scale: 0.5; } }
@keyframes t-pop { 0% { scale: 1; } 50% { scale: 1.14; } 100% { scale: 1; } }
/* Our own palette: cool greys into greens, then deep teal and ink for the big tiles. */
.v1 { background: #ffffff; color: #3a3a3c; }
.v2 { background: #eef6f0; color: #3a3a3c; }
.v3 { background: #c9ecd5; color: #14532d; }
.v4 { background: #9be0b4; color: #14532d; }
.v5 { background: #5fcf8d; color: #fff; }
.v6 { background: #22b36b; color: #fff; }
.v7 { background: #15803d; color: #fff; }
.v8 { background: #0f766e; color: #fff; }
.v9 { background: #0e7490; color: #fff; }
.v10 { background: #1d4ed8; color: #fff; }
.v11 { background: #6d28d9; color: #fff; box-shadow: 0 0 0 3px rgba(109,40,217,0.25), inset 0 -3px 0 rgba(0,0,0,0.15); }
.v12, .v13, .v14, .v15, .v16, .v17 { background: #1d1d1f; color: #fff; }
.t-hint { font-size: 13px; color: #86868b; text-align: center; margin: 16px 0 0; }
@media (prefers-reduced-motion: reduce) { .t-tile { transition: none; } .t-tile.new, .t-tile.merged { animation: none; } }